From 999cc4e03f7fef201288c6eba0a652e54d0c1957 Mon Sep 17 00:00:00 2001 From: Nick Date: Thu, 8 Aug 2024 22:21:23 +0000 Subject: [PATCH 1/4] feat: adding title property to ButtonInputs --- .../base/inputs/button/button-input.tsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/client/src/components/base/inputs/button/button-input.tsx b/client/src/components/base/inputs/button/button-input.tsx index 0fad7dd..9def17a 100644 --- a/client/src/components/base/inputs/button/button-input.tsx +++ b/client/src/components/base/inputs/button/button-input.tsx @@ -4,13 +4,26 @@ type Params = { label?: string; icon?: string; color?: string; + title?: string; disabled?: boolean; onClick: (event: React.MouseEvent) => void; }; -export default function ButtonInput({ label, icon, color, disabled = false, onClick }: Params) { +export default function ButtonInput({ + label, + icon, + color, + title, + disabled = false, + onClick, +}: Params) { return ( - From e23766c77aff75ea54bde279a6c4fece8725e16a Mon Sep 17 00:00:00 2001 From: Nick Date: Thu, 8 Aug 2024 22:21:38 +0000 Subject: [PATCH 2/4] feat: updating preset card styling --- .../cards/preset-card/preset-card.scss | 61 ++++++++++++++----- .../cards/preset-card/preset-card.tsx | 15 ++--- 2 files changed, 53 insertions(+), 23 deletions(-) diff --git a/client/src/components/cards/preset-card/preset-card.scss b/client/src/components/cards/preset-card/preset-card.scss index c0adb91..65dd518 100644 --- a/client/src/components/cards/preset-card/preset-card.scss +++ b/client/src/components/cards/preset-card/preset-card.scss @@ -1,5 +1,6 @@ @use 'src/style/modules/colors'; @use 'src/style/modules/font'; +@use 'src/style/modules/sizing'; .preset-card { padding: 1rem; @@ -19,7 +20,6 @@ flex-grow: 1; margin: 0; padding: 0.5rem 0; - // border-bottom: 0.2rem solid hsla(0, 0%, 100%, 0.1); } .preset-buttons { @@ -36,29 +36,58 @@ .preset-body { .preset-tabs { - button { - padding: 0.5rem 1rem; - border: none; - border-radius: 0; - font-family: font.$font-family-primary; - font-size: 1.25rem; - background-color: colors.$transparent-light-tertiary; - color: colors.$text-color-tertiary; - - &.current { - background-color: colors.$transparent-light-primary; - color: colors.$text-color-secondary; + display: flex; + flex-flow: row wrap; + + .tab-button-container { + max-height: 2.75rem; + + button { + height: 200%; + padding: 0.5rem 1rem; + border: none; + border-radius: 0; + font-family: font.$font-family-primary; + font-size: 1.25rem; + border-right: 0.2rem solid colors.$background-five; + border-radius: 1rem 1rem 0 0; + background-color: colors.$background-four; + color: colors.$text-color-tertiary; + display: inline-flex; + + &.current { + background-color: colors.$background-five; + color: colors.$text-color-secondary; + } + + &:hover { + background-color: colors.$background-five; + border-right: 0.2rem solid colors.$background-six; + } + + .tab-button-label { + // max-height: 2.75rem; + } } + } - &:hover { - background-color: colors.$transparent-light-secondary; + @media screen and (max-width: sizing.$small-max-width) { + .tab-button-container { + flex-grow: 1; + button { + width: 100%; + border-top: 0.2rem solid colors.$background-five; + } } } } .current-tab { - background-color: colors.$transparent-light-primary; + background-color: colors.$background-five; padding: 1rem; + border-radius: 1rem; + position: relative; + z-index: 1; .preset-card-section { max-width: 100%; diff --git a/client/src/components/cards/preset-card/preset-card.tsx b/client/src/components/cards/preset-card/preset-card.tsx index 72b10f7..590ea9a 100644 --- a/client/src/components/cards/preset-card/preset-card.tsx +++ b/client/src/components/cards/preset-card/preset-card.tsx @@ -50,13 +50,14 @@ export default function PresetCard({ preset, handleRemovePreset }: Params) {
{tabs.map((tab, index) => ( - +
+ +
))}
From 474fbb21195bae5fa96bb9bd79bc1d3220d52252 Mon Sep 17 00:00:00 2001 From: Nick Date: Thu, 8 Aug 2024 22:22:42 +0000 Subject: [PATCH 3/4] feat: updating watcher card styling --- .../components/watcher-card-rule.tsx | 6 +- .../cards/watcher-card/watcher-card.scss | 278 +++++++++--------- .../cards/watcher-card/watcher-card.tsx | 83 +++--- client/src/sections/watchers/watchers.tsx | 3 +- 4 files changed, 193 insertions(+), 177 deletions(-) diff --git a/client/src/components/cards/watcher-card/components/watcher-card-rule.tsx b/client/src/components/cards/watcher-card/components/watcher-card-rule.tsx index 0ff5ac7..1512178 100644 --- a/client/src/components/cards/watcher-card/components/watcher-card-rule.tsx +++ b/client/src/components/cards/watcher-card/components/watcher-card-rule.tsx @@ -113,7 +113,11 @@ export default function WatcherCardRule({ )} -
diff --git a/client/src/components/cards/watcher-card/watcher-card.scss b/client/src/components/cards/watcher-card/watcher-card.scss index 563dae7..af8df32 100644 --- a/client/src/components/cards/watcher-card/watcher-card.scss +++ b/client/src/components/cards/watcher-card/watcher-card.scss @@ -2,185 +2,191 @@ @use 'src/style/modules/font'; .watcher-card { - padding: 1rem; + display: flex; + flex-flow: row nowrap; + overflow: hidden; background-color: colors.$background-tertiary; border-radius: 1rem; - .watcher-card-header { + .watcher-card-number { + padding: 1rem; display: flex; - flex-flow: row nowrap; align-items: center; - justify-content: space-between; - gap: 1rem; - margin: 1rem 0 1.5rem 0; - - .watcher-card-header-label { - // height: 100%; - flex-grow: 1; - margin: 0; - padding: 0.5rem 0; - // border-bottom: 0.2rem solid hsla(0, 0%, 100%, 0.1); - } + background-color: colors.$background-four; + } - .watcher-card-header-buttons { - display: flex; - flex-flow: row nowrap; - justify-content: right; - gap: 1rem; + .watcher-card-body { + padding: 1rem 1.5rem; + flex-grow: 1; - * { - font-size: 1.25rem; - } - } - } + .watcher-card-info, + .watcher-card-rules { + margin-bottom: 1.5rem; + + .watcher-card-info-header, + .watcher-card-rules-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 1rem; - .watcher-card-info, - .watcher-card-rules { - margin-bottom: 1.5rem; + h5 { + margin: 0; + color: colors.$text-color-tertiary; + } - h5 { - margin: 0.5rem 0; - color: colors.$text-color-tertiary; + button { + padding: 0.4em; + + .bi { + line-height: 1; + font-size: 1.5rem; + } + } + } } - } - .watcher-card-info { - } + .watcher-card-info { + .watcher-card-info-children { + display: flex; + flex-flow: row wrap; + gap: 1rem; - .watcher-card-rules { - .watcher-card-rule-cards { - display: flex; - flex-flow: column nowrap; - gap: 1rem; + .text-info { + flex-grow: 1; + border-radius: 1.5rem; - .watcher-card-rule { - background-color: colors.$background-four; - padding: 1rem; - border-radius: 1rem; + background-color: colors.$background-four; + padding: 0.5rem 1.5rem; + } + } + } - .watcher-card-rule-header { - display: flex; - flex-flow: row nowrap; - align-items: center; - gap: 1rem; + .watcher-card-rules { + .watcher-card-rule-cards { + display: flex; + flex-flow: column nowrap; + gap: 1rem; - font-family: font.$font-family-secondary; - margin-bottom: 0.5rem; + .watcher-card-rule { + background-color: colors.$background-four; + padding: 1rem; + border-radius: 1rem; - #rule-name { - flex-grow: 1; - padding: 0 1rem; - border-radius: 1.75rem; - height: 2.5rem; + .watcher-card-rule-header { + display: flex; + flex-flow: row nowrap; + align-items: center; + gap: 1rem; - font-size: 1.5rem; font-family: font.$font-family-secondary; + margin-bottom: 0.5rem; - border: none; - background-color: transparent; - color: colors.$text-color-secondary; + #rule-name { + flex-grow: 1; + padding: 0 1rem; + border-radius: 1.75rem; + height: 2.5rem; - &:hover, - &:focus { - background-color: colors.$background-five; - } - } + font-size: 1.5rem; + font-family: font.$font-family-secondary; - button { - padding: 0.5rem; - aspect-ratio: 1; - line-height: 1rem; - border: none; - border-radius: 0.5rem; - background-color: transparent; - font-size: 1.5rem; + border: none; + background-color: transparent; + color: colors.$text-color-secondary; - .bi { - display: inline-block; - line-height: 1rem; + &:hover, + &:focus { + background-color: colors.$background-five; + } } - &:hover { - color: colors.$text-color-primary; - } - - &:active { - color: colors.$background-tertiary; + button { + padding: 0.5rem; + aspect-ratio: 1; + line-height: 1rem; + border: none; + border-radius: 0.5rem; + background-color: transparent; + font-size: 1.5rem; + + .bi { + display: inline-block; + line-height: 1rem; + } + + &:hover { + color: colors.$text-color-primary; + } + + &:active { + color: colors.$background-tertiary; + } } - } - .save-button { - // background-color: white; - color: colors.$handbrake-blue; + .save-button { + // background-color: white; + color: colors.$handbrake-blue; - &:hover { - background-color: colors.$handbrake-blue; + &:hover { + background-color: colors.$handbrake-blue; + } } - } - .remove-button { - color: colors.$handbrake-red; + .remove-button { + color: colors.$handbrake-red; - &:hover { - background-color: colors.$handbrake-red; + &:hover { + background-color: colors.$handbrake-red; + } } } - } - .watcher-card-rule-properties { - width: 100%; - display: inline-flex; - flex-flow: row wrap; - align-items: center; - gap: 0.5rem; - - * { - height: 2.5rem; - display: inline; - vertical-align: middle; - } + .watcher-card-rule-properties { + width: 100%; + display: inline-flex; + flex-flow: row wrap; + align-items: center; + gap: 0.5rem; + + * { + height: 2.5rem; + display: inline; + vertical-align: middle; + } - span { - align-content: center; - } + span { + align-content: center; + } - input, - select { - flex-grow: 1; - border-radius: 1.75rem; - border: none; + input, + select { + flex-grow: 1; + border-radius: 1.75rem; + border: none; - font-size: 1.5rem; - font-family: font.$font-family-primary; + font-size: 1.5rem; + font-family: font.$font-family-primary; - background-color: colors.$background-five; - color: colors.$text-color-primary; - } + background-color: colors.$background-five; + color: colors.$text-color-primary; + } - input { - padding: 0 1rem; - } + input { + padding: 0 1rem; + } - select { - padding-left: 1rem; - } + select { + padding-left: 1rem; + } - #comparison { - min-width: 15rem; - flex-grow: 10; + #comparison { + min-width: 15rem; + flex-grow: 10; + } } } } } - - .watcher-card-rule-buttons { - margin-top: 1.5rem; - - .controlled-button { - * { - font-size: 1.25rem; - } - } - } } } diff --git a/client/src/components/cards/watcher-card/watcher-card.tsx b/client/src/components/cards/watcher-card/watcher-card.tsx index 273c879..99188ae 100644 --- a/client/src/components/cards/watcher-card/watcher-card.tsx +++ b/client/src/components/cards/watcher-card/watcher-card.tsx @@ -14,6 +14,7 @@ import WatcherCardRule from './components/watcher-card-rule'; type Params = { watcherID: number; watcher: WatcherDefinitionWithRulesType; + index: number; handleRemoveWatcher: (id: number) => void; handleAddRule: (id: number, rule: WatcherRuleDefinitionType) => void; handleUpdateRule: (id: number, rule: WatcherRuleDefinitionType) => void; @@ -23,6 +24,7 @@ type Params = { export default function WatcherCard({ watcherID, watcher, + index, handleRemoveWatcher, handleAddRule, handleUpdateRule, @@ -41,47 +43,50 @@ export default function WatcherCard({ return (
-
-

{watcher.watch_path}

-
- handleRemoveWatcher(watcherID)} - /> -
-
-
-
Info
- {watcher.watch_path || 'N/A'} - {watcher.output_path || 'N/A'} - {watcher.preset_id} - {/* - {defaultMaskLookup[WatcherRuleMaskMethods[watcher.default_mask]]} - */} +
+

{index + 1}

-
-
Rules
-
- {Object.keys(watcher.rules) - .map((ruleID) => parseInt(ruleID)) - .map((ruleID, index) => ( - - ))} +
+
+
+
Info
+ handleRemoveWatcher(watcherID)} + /> +
+
+ {watcher.watch_path || 'N/A'} + {watcher.output_path || 'N/A'} + {watcher.preset_id} +
-
- handleAddRule(watcherID, defaultRuleDefinition)} - /> +
+
+
Rules
+ handleAddRule(watcherID, defaultRuleDefinition)} + /> +
+
+ {Object.keys(watcher.rules) + .map((ruleID) => parseInt(ruleID)) + .map((ruleID, index) => ( + + ))} +
diff --git a/client/src/sections/watchers/watchers.tsx b/client/src/sections/watchers/watchers.tsx index 57db9b1..42b1374 100644 --- a/client/src/sections/watchers/watchers.tsx +++ b/client/src/sections/watchers/watchers.tsx @@ -51,10 +51,11 @@ export default function WatchersSection() { {watcherIDs.length > 0 && ( - {watcherIDs.map((watcherID) => ( + {watcherIDs.map((watcherID, index) => ( Date: Thu, 8 Aug 2024 22:31:33 +0000 Subject: [PATCH 4/4] feat: display 'N/A' if there are no rules on a watcher --- client/src/components/cards/watcher-card/watcher-card.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/client/src/components/cards/watcher-card/watcher-card.tsx b/client/src/components/cards/watcher-card/watcher-card.tsx index 99188ae..44a8ee0 100644 --- a/client/src/components/cards/watcher-card/watcher-card.tsx +++ b/client/src/components/cards/watcher-card/watcher-card.tsx @@ -74,6 +74,11 @@ export default function WatcherCard({ />
+ {Object.keys(watcher.rules).length == 0 && ( +
+ N/A +
+ )} {Object.keys(watcher.rules) .map((ruleID) => parseInt(ruleID)) .map((ruleID, index) => (