From 01c67aaa07aa2e5ed418299b8e37f551aa981633 Mon Sep 17 00:00:00 2001 From: Niklas Kiefer Date: Tue, 21 Sep 2021 14:58:50 +0200 Subject: [PATCH 1/8] chore: update icons --- src/components/Group.js | 12 +++++--- src/components/ListGroup.js | 16 ++++++---- src/components/entries/Collapsible.js | 17 ++++++----- src/components/entries/List.js | 37 +++++++++++++----------- src/components/icons/Arrow.svg | 3 ++ src/components/icons/Checkbox.svg | 1 - src/components/icons/CheckboxChecked.svg | 1 - src/components/icons/Create.svg | 4 +-- src/components/icons/Delete.svg | 3 ++ src/components/icons/FullPanel.svg | 3 -- src/components/icons/FullPanelOff.svg | 3 -- src/components/icons/GroupArrow.svg | 3 -- src/components/icons/ListArrow.svg | 3 -- src/components/icons/ListDelete.svg | 3 -- src/components/icons/index.js | 5 ++-- 15 files changed, 59 insertions(+), 55 deletions(-) create mode 100644 src/components/icons/Arrow.svg delete mode 100644 src/components/icons/Checkbox.svg delete mode 100644 src/components/icons/CheckboxChecked.svg create mode 100644 src/components/icons/Delete.svg delete mode 100644 src/components/icons/FullPanel.svg delete mode 100644 src/components/icons/FullPanelOff.svg delete mode 100644 src/components/icons/GroupArrow.svg delete mode 100644 src/components/icons/ListArrow.svg delete mode 100644 src/components/icons/ListDelete.svg diff --git a/src/components/Group.js b/src/components/Group.js index c379d091..63e88eaf 100644 --- a/src/components/Group.js +++ b/src/components/Group.js @@ -17,7 +17,7 @@ import { useLayoutState } from '../hooks'; -import { GroupArrowIcon } from './icons'; +import { ArrowIcon } from './icons'; /** * @param {import('../PropertiesPanel').GroupDefinition} props @@ -62,7 +62,8 @@ export default function Group(props) { return
{ label } @@ -71,8 +72,11 @@ export default function Group(props) { { edited && } -
diff --git a/src/components/ListGroup.js b/src/components/ListGroup.js index 4849a6fd..c1d206c4 100644 --- a/src/components/ListGroup.js +++ b/src/components/ListGroup.js @@ -18,8 +18,8 @@ import { import ListItem from './ListItem'; import { - CreateIcon, - GroupArrowIcon + ArrowIcon, + CreateIcon } from './icons'; const noop = () => {}; @@ -148,7 +148,10 @@ export default function ListGroup(props) { AddContainer ? ( - @@ -167,8 +170,11 @@ export default function ListGroup(props) { { hasItems ? ( - ) : null diff --git a/src/components/entries/Collapsible.js b/src/components/entries/Collapsible.js index e185ff5f..05949b10 100644 --- a/src/components/entries/Collapsible.js +++ b/src/components/entries/Collapsible.js @@ -5,8 +5,8 @@ import { import classnames from 'classnames'; import { - ListArrowIcon, - ListDeleteIcon, + ArrowIcon, + DeleteIcon, } from '../icons'; @@ -41,16 +41,19 @@ export default function CollapsibleEntry(props) { ) }> { label || placeholderLabel }
-
- -
+ { RemoveContainer ? ( - ) diff --git a/src/components/entries/List.js b/src/components/entries/List.js index 2089d817..d066754a 100644 --- a/src/components/entries/List.js +++ b/src/components/entries/List.js @@ -18,9 +18,9 @@ import { import classnames from 'classnames'; import { + ArrowIcon, CreateIcon, - GroupArrowIcon, - ListDeleteIcon + DeleteIcon } from '../icons'; /** @@ -104,20 +104,30 @@ export default function List(props) {
- { hasItems && ( -
+
{ items.length }
) } { hasItems && ( - ) } @@ -182,14 +192,15 @@ function ItemsList(props) { const key = getKey(item); return (
  • - {renderItem(item, index, item === newItem)} + { renderItem(item, index, item === newItem) } { onRemove && ( + > ) }
    • ); @@ -198,14 +209,6 @@ function ItemsList(props) { ); } -function getTitle(label, items) { - if (!items.length) { - return label; - } - - return `${label} (${items.length} items)`; -} - /** * Place new items in the beginning of the list and sort the rest with provided function. * diff --git a/src/components/icons/Arrow.svg b/src/components/icons/Arrow.svg new file mode 100644 index 00000000..a3894fbd --- /dev/null +++ b/src/components/icons/Arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icons/Checkbox.svg b/src/components/icons/Checkbox.svg deleted file mode 100644 index 60c321cd..00000000 --- a/src/components/icons/Checkbox.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/icons/CheckboxChecked.svg b/src/components/icons/CheckboxChecked.svg deleted file mode 100644 index 3fb385f4..00000000 --- a/src/components/icons/CheckboxChecked.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/icons/Create.svg b/src/components/icons/Create.svg index 55d5074c..5355980e 100644 --- a/src/components/icons/Create.svg +++ b/src/components/icons/Create.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/components/icons/Delete.svg b/src/components/icons/Delete.svg new file mode 100644 index 00000000..060f9087 --- /dev/null +++ b/src/components/icons/Delete.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icons/FullPanel.svg b/src/components/icons/FullPanel.svg deleted file mode 100644 index 3d7e758e..00000000 --- a/src/components/icons/FullPanel.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/icons/FullPanelOff.svg b/src/components/icons/FullPanelOff.svg deleted file mode 100644 index cd5f6c11..00000000 --- a/src/components/icons/FullPanelOff.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/icons/GroupArrow.svg b/src/components/icons/GroupArrow.svg deleted file mode 100644 index 0fcb12cc..00000000 --- a/src/components/icons/GroupArrow.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/icons/ListArrow.svg b/src/components/icons/ListArrow.svg deleted file mode 100644 index 67e94b36..00000000 --- a/src/components/icons/ListArrow.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/icons/ListDelete.svg b/src/components/icons/ListDelete.svg deleted file mode 100644 index fb18dbea..00000000 --- a/src/components/icons/ListDelete.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/icons/index.js b/src/components/icons/index.js index 48edcf95..102472ed 100644 --- a/src/components/icons/index.js +++ b/src/components/icons/index.js @@ -1,4 +1,3 @@ +export { default as ArrowIcon } from './Arrow.svg'; export { default as CreateIcon } from './Create.svg'; -export { default as ListArrowIcon } from './ListArrow.svg'; -export { default as ListDeleteIcon } from './ListDelete.svg'; -export { default as GroupArrowIcon } from './GroupArrow.svg'; \ No newline at end of file +export { default as DeleteIcon } from './Delete.svg'; \ No newline at end of file From 821ba2fff4e9bc41915ab15f7b256fbf5295d76b Mon Sep 17 00:00:00 2001 From: Niklas Kiefer Date: Tue, 21 Sep 2021 14:59:55 +0200 Subject: [PATCH 2/8] chore: ensure title attributes --- src/components/Group.js | 9 +-------- src/components/Header.js | 2 +- src/components/ListGroup.js | 19 ++++++++++--------- src/components/entries/Collapsible.js | 1 + src/components/entries/List.js | 3 ++- test/spec/components/Group.spec.js | 4 ++-- test/spec/components/List.spec.js | 4 ++-- test/spec/components/ListGroup.spec.js | 4 ++-- 8 files changed, 21 insertions(+), 25 deletions(-) diff --git a/src/components/Group.js b/src/components/Group.js index 63e88eaf..2ef69454 100644 --- a/src/components/Group.js +++ b/src/components/Group.js @@ -65,7 +65,7 @@ export default function Group(props) { edited ? '' : 'empty', open? 'open' : '' ) } onClick={ toggleOpen }> -
    +
    { label }
    @@ -102,11 +102,4 @@ function DataMarker() {
    ); -} - - -// helper ////////////// - -function getTitleAttribute(label, edited) { - return label + (edited ? ' (edited)' : ''); } \ No newline at end of file diff --git a/src/components/Header.js b/src/components/Header.js index 510704f3..af70cf6d 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -29,11 +29,11 @@ export default function Header(props) { { ElementIcon && }
    +
    { type }
    { getElementLabel(element) ?
    { label }
    : null } -
    { type }
    ); } \ No newline at end of file diff --git a/src/components/ListGroup.js b/src/components/ListGroup.js index c1d206c4..a524f547 100644 --- a/src/components/ListGroup.js +++ b/src/components/ListGroup.js @@ -137,10 +137,14 @@ export default function ListGroup(props) {
    -
    +
    { label }
    @@ -161,7 +165,10 @@ export default function ListGroup(props) { { hasItems ? ( -
    +
    { items.length }
    ) @@ -224,9 +231,3 @@ function getItem(items, id) { function createOrdering(items) { return items.map(i => i.id); } - -function getTitleAttribute(label, items) { - const count = items.length; - - return label + (count ? ` (${count} item${count != 1 ? 's' : ''})` : ''); -} diff --git a/src/components/entries/Collapsible.js b/src/components/entries/Collapsible.js index 05949b10..d67864ec 100644 --- a/src/components/entries/Collapsible.js +++ b/src/components/entries/Collapsible.js @@ -35,6 +35,7 @@ export default function CollapsibleEntry(props) { ) }>
    ', function() { const header = domQuery('.bio-properties-panel-group-header', result.container); - const title = domQuery('.bio-properties-panel-group-header-title', header); + const dataMarker = domQuery('.bio-properties-panel-dot', header); // then - expect(domAttr(title, 'title')).to.eql('Group (edited)'); + expect(domAttr(dataMarker, 'title')).to.eql('Section contains data'); }); }); diff --git a/test/spec/components/List.spec.js b/test/spec/components/List.spec.js index 3f73959e..4aed9c69 100644 --- a/test/spec/components/List.spec.js +++ b/test/spec/components/List.spec.js @@ -881,10 +881,10 @@ describe('', function() { const header = domQuery('.bio-properties-panel-list-entry-header', container); - const title = domQuery('.bio-properties-panel-list-entry-header-title', header); + const badge = domQuery('.bio-properties-panel-list-badge', header); // then - expect(domAttr(title, 'title')).to.eql('List (2 items)'); + expect(domAttr(badge, 'title')).to.eql('List contains 2 items'); }); }); diff --git a/test/spec/components/ListGroup.spec.js b/test/spec/components/ListGroup.spec.js index 7c141946..1326c9c0 100644 --- a/test/spec/components/ListGroup.spec.js +++ b/test/spec/components/ListGroup.spec.js @@ -1030,10 +1030,10 @@ describe('', function() { const header = domQuery('.bio-properties-panel-group-header', container); - const title = domQuery('.bio-properties-panel-group-header-title', header); + const badge = domQuery('.bio-properties-panel-list-badge', header); // then - expect(domAttr(title, 'title')).to.eql('List (2 items)'); + expect(domAttr(badge, 'title')).to.eql('List contains 2 items'); }); }); From 3cce3a8f8203ab55d570875cdf832269d39981c1 Mon Sep 17 00:00:00 2001 From: Niklas Kiefer Date: Tue, 21 Sep 2021 15:00:14 +0200 Subject: [PATCH 3/8] chore: update data marker dot --- src/components/Group.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/components/Group.js b/src/components/Group.js index 2ef69454..a71d98ce 100644 --- a/src/components/Group.js +++ b/src/components/Group.js @@ -93,13 +93,6 @@ export default function Group(props) { function DataMarker() { return ( -
    - - - -
    +
    ); } \ No newline at end of file From f64a597e2a69bee17083276f6899093a8bf1e459 Mon Sep 17 00:00:00 2001 From: Niklas Kiefer Date: Tue, 21 Sep 2021 15:00:40 +0200 Subject: [PATCH 4/8] chore: update create-new button --- src/components/ListGroup.js | 6 ++++++ src/components/entries/List.js | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/src/components/ListGroup.js b/src/components/ListGroup.js index a524f547..01378756 100644 --- a/src/components/ListGroup.js +++ b/src/components/ListGroup.js @@ -157,6 +157,12 @@ export default function ListGroup(props) { class="bio-properties-panel-group-header-button bio-properties-panel-add-entry" > + { + !hasItems ? ( +
    Create
    + ) + : null + } ) diff --git a/src/components/entries/List.js b/src/components/entries/List.js index d333410c..0e6043ef 100644 --- a/src/components/entries/List.js +++ b/src/components/entries/List.js @@ -111,6 +111,12 @@ export default function List(props) { class="bio-properties-panel-add-entry" > + { + !hasItems ? ( +
    Create
    + ) + : null + } { hasItems && ( From 4bbb7f73c16536d1807324da5e3aad8f199b0520 Mon Sep 17 00:00:00 2001 From: Niklas Kiefer Date: Tue, 21 Sep 2021 15:05:13 +0200 Subject: [PATCH 5/8] style: cleanup color palette + font Closes #15 --- assets/properties-panel.css | 305 +++++++++++++++++++++++++----------- 1 file changed, 215 insertions(+), 90 deletions(-) diff --git a/assets/properties-panel.css b/assets/properties-panel.css index fa5eff41..cd0e0979 100644 --- a/assets/properties-panel.css +++ b/assets/properties-panel.css @@ -2,47 +2,95 @@ * Theming */ .bio-properties-panel { - --color-silver-darken-80: #cdcdcd; + --color-grey-225-10-15: hsl(225, 10%, 15%); + --color-grey-225-10-35: hsl(225, 10%, 35%); + --color-grey-225-10-55: hsl(225, 10%, 55%); + --color-grey-225-10-75: hsl(225, 10%, 75%); + --color-grey-225-10-80: hsl(225, 10%, 80%); + --color-grey-225-10-85: hsl(225, 10%, 85%); + --color-grey-225-10-90: hsl(225, 10%, 90%); + --color-grey-225-10-95: hsl(225, 10%, 95%); + --color-grey-225-10-97: hsl(225, 10%, 97%); - --color-blue-205-100-95: #e5f4ff; - --color-blue-205-100-50: #0095ff; + --color-blue-205-100-45: hsl(205, 100%, 45%); + --color-blue-205-100-50: hsl(205, 100%, 50%); + --color-blue-205-100-95: hsl(205, 100%, 95%); - --color-red-360-100-97: #fff0f0; - --color-red-360-100-45: #e60000; + --color-green-150-86-44: hsl(150, 86%, 44%); - --color-grey-225-10-35: hsl(225, 10%, 35%); + --color-red-360-100-40: hsl(360, 100%, 40%); + --color-red-360-100-45: hsl(360, 100%, 45%); + --color-red-360-100-92: hsl(360, 100%, 92%); + --color-red-360-100-97: hsl(360, 100%, 97%); - --color-cccccc: #cccccc; - --color-aaaaaa: #aaaaaa; --color-white: white; --color-black: black; - --color-999999: #999999; - --color-000000-opacity-5: rgba(0, 0, 0, 0.05); - --color-000000-opacity-20: rgba(0, 0, 0, 0.2); - --color-000000-opacity-25: rgba(0, 0, 0, 0.25); - --color-000000-opacity-40: rgba(0, 0, 0, 0.4); + --color-transparent: transparent; + + --text-base-color: var(--color-grey-225-10-15); + --text-error-color: var(--color-red-360-100-45); + --description-color: var(--color-grey-225-10-35); + + --placeholder-color: var(--color-grey-225-10-75); + + --header-background-color: var(--color-grey-225-10-95); + --header-icon-fill-color: var(--color-grey-225-10-15); + --header-bottom-border-color: var(--color-grey-225-10-75); + + --group-background-color: var(--color-white); + --group-bottom-border-color: var(--color-grey-225-10-75); + + --add-entry-fill-color: var(--color-grey-225-10-35); + --add-entry-empty-fill-color: var(--color-grey-225-10-75); + --add-entry-hover-fill-color: var(--color-white); + --add-entry-hover-background-color: var(--color-blue-205-100-50); + --add-entry-label-color: var(--color-white); + + --remove-entry-fill-color: var(--color-red-360-100-45); + --remove-entry-hover-background-color: var(--color-red-360-100-92); + + --arrow-fill-color: var(--color-grey-225-10-35); + --arrow-hover-background-color: var(--color-grey-225-10-95); + --arrow-empty-fill-color: var(--color-grey-225-10-75); + + --dot-color: var(--color-grey-225-10-35); - --color-background-light: #e8eaee; + --list-badge-color: var(--color-white); + --list-badge-background-color: var(--color-grey-225-10-35); - --color-input-background: #f1f2f4; - --color-input-border: #d5d6dd; - --color-input-background-focus: var(--color-blue-205-100-95); - --color-input-border-focus: var(--color-blue-205-100-50); + --input-background-color: var(--color-grey-225-10-97); + --input-border-color: var(--color-grey-225-10-75); + + --input-focus-background-color: var(--color-blue-205-100-95); + --input-focus-border-color: var(--color-blue-205-100-50); - --color-input-background-error: var(--color-red-360-100-97); - --color-input-border-error: var(--color-red-360-100-45); - --color-input-border-error-focus: var(--color-red-360-100-45); + --input-error-background-color: var(--color-red-360-100-97); + --input-error-border-color: var(--color-red-360-100-45); + --input-error-focus-border-color: var(--color-red-360-100-45); - --color-toggle-switch-background-on: var(--color-blue-205-100-50); - --color-toggle-switch-background-off: var(--color-silver-darken-80); + --toggle-switch-on-background-color: var(--color-blue-205-100-50); + --toggle-switch-off-background-color: var(--color-grey-225-10-75); + --toggle-switch-switcher-background-color: var(--color-white); - --color-text-base: var(--color-black); - --color-text-error: var(--color-red-360-100-45); + --side-line-background-color: var(--color-grey-225-10-35); + --side-line-extension-background-color: var(--color-grey-225-10-35); + + --list-entry-dot-background-color: var(--color-grey-225-10-35); + --list-entry-header-button-fill-color: var(--color-grey-225-10-35); + --list-entry-add-entry-empty-fill-color: var(--color-white); + --list-entry-add-entry-empty-background-color: var(--color-blue-205-100-50); + --list-entry-add-entry-empty-hover-background-color: var(--color-blue-205-100-45); + --list-entry-add-entry-label-color: var(--color-white); + --list-entry-add-entry-background-color: var(--color-blue-205-100-50); + --list-entry-add-entry-fill-color: var(--color-white); --text-size-base: 14px; - --text-line-height: 1.5; + --text-size-small: 13px; + --text-size-smallest: 12px; + --text-line-height: 21px; + --line-height-condensed: 17px; - --color-description: var(--color-999999); + --font-family: sans-serif; display: none; position: relative; @@ -52,8 +100,15 @@ } .bio-properties-panel * { - box-sizing: border-box; + color: var(--text-base-color); + font-size: var(--text-size-base); line-height: var(--text-line-height); + font-weight: 400; + box-sizing: border-box; +} + +.bio-properties-panel { + font-family: var(--font-family); } .bio-properties-panel.open { @@ -64,8 +119,8 @@ .bio-properties-panel-placeholder { padding: 10px; - color: var(--color-silver-darken); - font-size: 14px; + color: var(--placeholder-color); + font-size: var(--text-size-base); text-align: center; } @@ -79,8 +134,8 @@ font-size: var(--text-size-base); padding: 10px; margin-bottom: 2px; - background-color: var(--color-background-light); - border-bottom: 1px solid var(--color-cccccc); + background-color: var(--header-background-color); + border-bottom: 1px solid var(--header-bottom-border-color); width: 100%; z-index: 1; max-height: 64px; @@ -88,6 +143,7 @@ } .bio-properties-panel-header-icon { + fill: var(--header-icon-fill-color); display: flex; flex-direction: row; align-items: center; @@ -98,15 +154,16 @@ .bio-properties-panel-header-labels { overflow: hidden; + user-select: none; } .bio-properties-panel-header-type { - font-size: 12px; - font-weight: bold; + font-size: var(--text-size-smallest); + font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - padding: 2px; + text-transform: uppercase; } .bio-properties-panel-header-label { @@ -130,8 +187,8 @@ * Groups */ .bio-properties-panel-group { - background-color: var(--color-white); - border-bottom: 1px solid var(--color-cccccc); + background-color: var(--group-background-color); + border-bottom: 1px solid var(--group-bottom-border-color); } .bio-properties-panel-group-header { @@ -153,6 +210,10 @@ margin: 1px 12px 0; } +.bio-properties-panel-group-header.open .bio-properties-panel-group-header-title { + font-weight: 500; +} + .bio-properties-panel-group-header-buttons { display: flex; margin-right: 12px; @@ -163,7 +224,7 @@ justify-content: center; align-items: center; align-self: center; - width: 20px; + font-size: var(--text-size-small); height: 20px; margin-right: 4px; padding: 0; @@ -175,17 +236,25 @@ margin-right: 0; } -.bio-properties-panel-group-header:not(.empty) .bio-properties-panel-add-entry { - visibility: hidden; +.bio-properties-panel-add-entry { + fill: var(--add-entry-fill-color); + border-radius: 11px; } -.bio-properties-panel-group-header:not(.empty):hover .bio-properties-panel-add-entry { - visibility: visible; +.bio-properties-panel-group-header.empty .bio-properties-panel-add-entry { + fill: var(--add-entry-empty-fill-color); +} + +.bio-properties-panel-group-header.empty .bio-properties-panel-add-entry-label { + color: var(--add-entry-label-color); } +.bio-properties-panel-group-header-button.bio-properties-panel-add-entry:hover { + background-color: var(--add-entry-hover-background-color); + fill: var(--add-entry-hover-fill-color); +} .bio-properties-panel-group-entries { - border-bottom: solid 1px var(--color-silver-darken); display: none; } @@ -197,14 +266,36 @@ display: block; } +.bio-properties-panel-arrow { + display: flex; + justify-content: center; + text-align: center; + fill: var(--arrow-fill-color); + min-width: 22px; + border-radius: 11px; + border: none; + background: none; +} + +.bio-properties-panel-arrow:hover { + background-color: var(--arrow-hover-background-color); +} + .bio-properties-panel-arrow-down { transform: rotate(90deg); } +.bio-properties-panel-group-header.empty .bio-properties-panel-arrow { + fill: var(--arrow-empty-fill-color); +} + .bio-properties-panel-dot { - width: 6px; - margin-right: 12px; - margin-top: -1px; + align-self: center; + height: 8px; + min-width: 8px; + border-radius: 50%; + margin: 12px; + background-color: var(--dot-color); } /** @@ -220,24 +311,24 @@ } .bio-properties-panel-list-badge { - color: var(--color-white); - background-color: var(--color-black); - border: 2px solid; - border-radius: 20px; - min-width: fit-content; - font-size: 12px; height: 22px; - padding: 2px 6px; - margin-right: 4px; + min-width: 22px; + color: var(--list-badge-color); + border-radius: 11px; + font-size: var(--text-size-small); + line-height: 22px; + text-align: center; user-select: none; - line-height: normal; + padding: 0 5px; + margin: 5px; + background-color: var(--list-badge-background-color); } /** * Basic entries */ .bio-properties-panel-entry { - margin: 2px 12px 4px; + margin: 2px 32px 6px 12px; } .bio-properties-panel-entry:last-child { @@ -246,29 +337,25 @@ .bio-properties-panel-label { display: block; - margin: 4px 0; - line-height: 18px; - font-weight: 400; - font-size: 13px; + font-size: var(--text-size-small); + margin: 2px 0; } .bio-properties-panel-description { - color: var(--color-description); + color: var(--description-color); display: block; margin: 4px 0 8px; line-height: 16px; font-weight: 400; - font-size: 12px; + font-size: var(--text-size-small); } .bio-properties-panel-input { - padding: 5px 6px 4px; - border: 1px solid var(--color-input-border); - border-radius: 3px; - background-color: var(--color-input-background); - font-size: 14px; - font-style: normal; - font-weight: 400; + padding: 3px 6px 2px; + border: 1px solid var(--input-border-color); + border-radius: 2px; + background-color: var(--input-background-color); + font-size: var(--text-size-base); font-family: inherit; } @@ -282,8 +369,8 @@ textarea.bio-properties-panel-input, .bio-properties-panel-input:focus { outline: none; - background-color: var(--color-input-background-focus); - border: 1px solid var(--color-input-border-focus); + background-color: var(--input-focus-background-color); + border: 1px solid var(--input-focus-border-color); } .bio-properties-panel-input-monospace { @@ -297,6 +384,7 @@ textarea.bio-properties-panel-input, .bio-properties-panel-checkbox > .bio-properties-panel-label { display: inline-block; + font-size: var(--text-size-base); margin-left: 4px; vertical-align: middle; } @@ -306,18 +394,18 @@ textarea.bio-properties-panel-input { } .bio-properties-panel-entry.has-error .bio-properties-panel-input { - border-color: var(--color-input-border-error); - background-color: var(--color-input-background-error); + border-color: var(--input-error-border-color); + background-color: var(--input-error-background-color); } .bio-properties-panel-entry.has-error .bio-properties-panel-input:focus { - border-color: var(--color-input-border-error-focus); + border-color: var(--input-error-focus-border-color); } .bio-properties-panel-entry .bio-properties-panel-error { - color: var(--color-text-error); + color: var(--text-error-color); margin: 4px 0; - font-size: 13px; + font-size: var(--text-size-small); } .bio-properties-panel-simple { @@ -338,10 +426,14 @@ textarea.bio-properties-panel-input { align-items: center; } +.bio-properties-panel-toggle-switch > .bio-properties-panel-label { + font-size: var(--text-size-base); +} + .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__label { margin: 0; margin-left: 6px; - font-size: 12px; + font-size: var(--text-size-base); } .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher { @@ -362,7 +454,7 @@ textarea.bio-properties-panel-input { left: 0; right: 0; bottom: 0; - background-color: var(--color-toggle-switch-background-off); + background-color: var(--toggle-switch-off-background-color); -webkit-transition: 0.4s; transition: 0.4s; border-radius: 34px; @@ -375,14 +467,14 @@ textarea.bio-properties-panel-input { width: 12px; left: 2px; bottom: 2px; - background-color: white; + background-color: var(--toggle-switch-switcher-background-color); -webkit-transition: 0.4s; transition: 0.4s; border-radius: 50%; } .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox']:checked + .bio-properties-panel-toggle-switch__slider { - background-color: var(--color-toggle-switch-background-on); + background-color: var(--toggle-switch-on-background-color); box-shadow: 0 0 1px ; } @@ -438,7 +530,7 @@ textarea.bio-properties-panel-input { top: 0; width: 12px; height: 12px; - font-size: 16px; + justify-content: center; } .bio-properties-panel-remove-entry { @@ -451,24 +543,31 @@ textarea.bio-properties-panel-input { margin-right: 14px; padding: 0; + fill: var(--remove-entry-fill-color); border: none; background: none; visibility: hidden; } -.bio-properties-panel-list-entry-item:hover .bio-properties-panel-remove-entry, -.bio-properties-panel-collapsible-entry-header:hover .bio-properties-panel-remove-entry { +.bio-properties-panel-remove-entry:hover { + background-color: var(--remove-entry-hover-background-color); +} + +.bio-properties-panel-list-entry-item:hover .bio-properties-panel-remove-list-entry, +.bio-properties-panel-collapsible-entry:hover > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry { visibility: visible; } +/* Side line */ .bio-properties-panel-collapsible-entry-entries::before { content: ""; position: absolute; - left: 10px; + left: 15px; width: 2px; - top: 0; + top: -6px; bottom: 12px; - background-color: var(--color-grey-225-10-35); + background-color: var(--side-line-background-color); + border-radius: 1px; } /* Side line extension for non-list entry or open list entry positioned as the last one. */ @@ -485,22 +584,27 @@ textarea.bio-properties-panel-input { width: 2px; top: 0; bottom: 0; - background-color: var(--color-grey-225-10-35); + background-color: var(--side-line-extension-background-color); } /* List entry */ .bio-properties-panel-list-entry { position: relative; + margin-right: 5px; +} + +.bio-properties-panel-list-entry .bio-properties-panel-entry { + margin-right: 0; } .bio-properties-panel-list-entry-header { display: flex; justify-content: space-between; - height: 32px; } +/* Nested list dot */ .bio-properties-panel-list-entry::before { content: ""; width: 8px; @@ -509,7 +613,7 @@ textarea.bio-properties-panel-input { left: -20px; top: 13px; border-radius: 50%; - background-color: var(--color-grey-225-10-35); + background-color: var(--list-entry-dot-background-color); } .bio-properties-panel-list-entry-header-title { @@ -521,7 +625,7 @@ textarea.bio-properties-panel-input { } .bio-properties-panel-list-entry-header-title.open { - font-weight: 600; + font-weight: 500; } .bio-properties-panel-list-entry-header-title, @@ -541,6 +645,7 @@ textarea.bio-properties-panel-input { padding: 0; border: none; background: none; + fill: var(--list-entry-header-button-fill-color); } .bio-properties-panel-list-entry-header-buttons > :last-child { @@ -566,3 +671,23 @@ textarea.bio-properties-panel-input { .bio-properties-panel-list-entry-item > .bio-properties-panel-remove-entry { margin-right: 2px; } + +.bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry { + fill: var(--list-entry-add-entry-empty-fill-color); + background-color: var(--list-entry-add-entry-empty-background-color); +} + +.bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry:hover { + background-color: var(--list-entry-add-entry-empty-hover-background-color); +} + +.bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry-label { + color: var(--list-entry-add-entry-label-color); + padding: 4px 7px; +} + +.bio-properties-panel-list-entry-header-buttons .bio-properties-panel-add-entry:hover { + background-color: var(--list-entry-add-entry-background-color); + fill: var(--list-entry-add-entry-fill-color); +} + From 17b3ce48f768f7fa8a71cae83ec8dbe5e4dd6c1f Mon Sep 17 00:00:00 2001 From: Niklas Kiefer Date: Tue, 21 Sep 2021 15:10:23 +0200 Subject: [PATCH 6/8] style: align spacings --- assets/properties-panel.css | 161 ++++++++++++++++++------- src/components/entries/Checkbox.js | 2 +- src/components/entries/ToggleSwitch.js | 2 +- 3 files changed, 121 insertions(+), 44 deletions(-) diff --git a/assets/properties-panel.css b/assets/properties-panel.css index cd0e0979..3f3cff74 100644 --- a/assets/properties-panel.css +++ b/assets/properties-panel.css @@ -132,7 +132,7 @@ flex-direction: row; align-items: center; font-size: var(--text-size-base); - padding: 10px; + padding: 16px 10px; margin-bottom: 2px; background-color: var(--header-background-color); border-bottom: 1px solid var(--header-bottom-border-color); @@ -148,12 +148,13 @@ flex-direction: row; align-items: center; justify-content: center; - min-width: 48px; - height: 48px; + width: 32px; + height: 32px; } .bio-properties-panel-header-labels { overflow: hidden; + margin-left: 12px; user-select: none; } @@ -170,7 +171,7 @@ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - padding: 2px; + margin-top: -6px; } /** @@ -216,7 +217,6 @@ .bio-properties-panel-group-header-buttons { display: flex; - margin-right: 12px; } .bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-button { @@ -225,14 +225,16 @@ align-items: center; align-self: center; font-size: var(--text-size-small); - height: 20px; - margin-right: 4px; - padding: 0; + height: 22px; + line-height: 22px; + min-width: 22px; + margin: 5px; + padding: 0 3px; border: none; background: none; } -.bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-button:last-child { +.bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-buttons:last-child { margin-right: 0; } @@ -243,10 +245,13 @@ .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry { fill: var(--add-entry-empty-fill-color); + margin-right: 19px; + padding-left: 6px; } .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry-label { color: var(--add-entry-label-color); + padding: 4px 6px 3px 2px; } .bio-properties-panel-group-header-button.bio-properties-panel-add-entry:hover { @@ -258,10 +263,6 @@ display: none; } -.bio-properties-panel-group:last-child .bio-properties-panel-group-entries { - border-bottom: none; -} - .bio-properties-panel-group-entries.open { display: block; } @@ -308,6 +309,7 @@ .bio-properties-panel-list.open { display: block; margin-bottom: 6px; + padding-bottom: 2px; } .bio-properties-panel-list-badge { @@ -338,14 +340,14 @@ .bio-properties-panel-label { display: block; font-size: var(--text-size-small); - margin: 2px 0; + margin: 2px 0 1px; } .bio-properties-panel-description { color: var(--description-color); display: block; - margin: 4px 0 8px; - line-height: 16px; + margin: 2px 0 4px; + line-height: var(--line-height-condensed); font-weight: 400; font-size: var(--text-size-small); } @@ -373,6 +375,10 @@ textarea.bio-properties-panel-input, border: 1px solid var(--input-focus-border-color); } +select.bio-properties-panel-input { + padding: 4px 6px; +} + .bio-properties-panel-input-monospace { font-family: monospace; } @@ -385,10 +391,19 @@ textarea.bio-properties-panel-input, .bio-properties-panel-checkbox > .bio-properties-panel-label { display: inline-block; font-size: var(--text-size-base); - margin-left: 4px; + margin-left: 6px; + margin-top: auto; vertical-align: middle; } +.bio-properties-panel-checkbox-entry + .bio-properties-panel-checkbox-entry { + margin-top: -8px; +} + +.bio-properties-panel-checkbox-entry > .bio-properties-panel-description { + margin-left: 18px; +} + textarea.bio-properties-panel-input { resize: vertical; } @@ -410,7 +425,7 @@ textarea.bio-properties-panel-input { .bio-properties-panel-simple { width: 100%; - margin-right: 12px; + margin-right: 8px; } .bio-properties-panel-simple + .bio-properties-panel-remove-entry { @@ -420,6 +435,14 @@ textarea.bio-properties-panel-input { /** * Toggle Switch */ +.bio-properties-panel-toggle-switch-entry + .bio-properties-panel-toggle-switch-entry { + margin-top: -8px; +} + +.bio-properties-panel-toggle-switch-entry > .bio-properties-panel-description { + margin-left: 38px; +} + .bio-properties-panel-toggle-switch .bio-properties-panel-field-wrapper { display: flex; flex-direction: row; @@ -501,7 +524,7 @@ textarea.bio-properties-panel-input { } .bio-properties-panel-collapsible-entry-entries { - padding-left: 15px; + padding-left: 20px; margin-bottom: 10px; position: relative; display: none; @@ -516,7 +539,7 @@ textarea.bio-properties-panel-input { } .bio-properties-panel-collapsible-entry-header .bio-properties-panel-collapsible-entry-header-title { - padding: 2px 24px 2px 25px; + padding: 2px 24px 2px 32px; font-size: var(--text-size-base); white-space: nowrap; overflow: hidden; @@ -526,24 +549,26 @@ textarea.bio-properties-panel-input { .bio-properties-panel-collapsible-entry-arrow { position: absolute; - left: 8px; - top: 0; - width: 12px; - height: 12px; + top: 2px; + left: 6px; + padding: 0 3px; + height: 22px; + display: inline-flex; justify-content: center; + align-items: center; + align-self: center; } .bio-properties-panel-remove-entry { display: flex; align-items: center; justify-content: center; - width: 16px; - height: 16px; - - margin-right: 14px; + margin-right: 5px; padding: 0; - + width: 22px; + height: 22px; fill: var(--remove-entry-fill-color); + border-radius: 50%; border: none; background: none; visibility: hidden; @@ -562,7 +587,7 @@ textarea.bio-properties-panel-input { .bio-properties-panel-collapsible-entry-entries::before { content: ""; position: absolute; - left: 15px; + left: 16px; width: 2px; top: -6px; bottom: 12px; @@ -580,18 +605,25 @@ textarea.bio-properties-panel-input { .bio-properties-panel-list-entry.open:last-child::after { content: ""; position: absolute; - left: -17px; + left: -16px; width: 2px; top: 0; - bottom: 0; + bottom: -4px; background-color: var(--side-line-extension-background-color); + border-radius: 1px; } -/* List entry */ +.bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:last-child::after { + left: -18px; +} +/* + * List entry + */ .bio-properties-panel-list-entry { position: relative; margin-right: 5px; + margin-bottom: 0; } .bio-properties-panel-list-entry .bio-properties-panel-entry { @@ -599,6 +631,8 @@ textarea.bio-properties-panel-input { } .bio-properties-panel-list-entry-header { + position: relative; + overflow: hidden; display: flex; justify-content: space-between; height: 32px; @@ -610,13 +644,15 @@ textarea.bio-properties-panel-input { width: 8px; height: 8px; position: absolute; - left: -20px; + left: -19px; top: 13px; border-radius: 50%; background-color: var(--list-entry-dot-background-color); } .bio-properties-panel-list-entry-header-title { + display: block; + margin: auto 0; padding: 2px 0; font-size: var(--text-size-base); white-space: nowrap; @@ -628,7 +664,6 @@ textarea.bio-properties-panel-input { font-weight: 500; } -.bio-properties-panel-list-entry-header-title, .bio-properties-panel-list-entry-header-buttons { display: flex; align-items: center; @@ -639,10 +674,11 @@ textarea.bio-properties-panel-input { justify-content: center; align-items: center; align-self: center; - width: 20px; - height: 20px; - margin-right: 4px; - padding: 0; + height: 22px; + line-height: 22px; + min-width: 22px; + margin: 5px; + padding: 0 3px; border: none; background: none; fill: var(--list-entry-header-button-fill-color); @@ -668,13 +704,40 @@ textarea.bio-properties-panel-input { justify-content: space-between; } -.bio-properties-panel-list-entry-item > .bio-properties-panel-remove-entry { - margin-right: 2px; +.bio-properties-panel-list-entry-item .bio-properties-panel-remove-entry { + margin-right: 1px; +} + +.bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry { + width: 100%; + margin-right: 4px; +} + +.bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-header { + margin-left: -8px; +} + +.bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-arrow { + left: 2px; +} + +.bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-header-title { + padding-left: 30px; +} + +.bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries { + padding-left: 10px; +} + +.bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries::before { + left: 4px; } .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry { fill: var(--list-entry-add-entry-empty-fill-color); background-color: var(--list-entry-add-entry-empty-background-color); + margin-right: 16px; + padding-left: 6px; } .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry:hover { @@ -683,7 +746,7 @@ textarea.bio-properties-panel-input { .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry-label { color: var(--list-entry-add-entry-label-color); - padding: 4px 7px; + padding: 4px 6px 3px 2px; } .bio-properties-panel-list-entry-header-buttons .bio-properties-panel-add-entry:hover { @@ -691,3 +754,17 @@ textarea.bio-properties-panel-input { fill: var(--list-entry-add-entry-fill-color); } +.bio-properties-panel-list-entry-item .bio-properties-panel-simple .bio-properties-panel-input { + border-radius: 0; + margin-bottom: -2px; +} + +.bio-properties-panel-list-entry-item:first-child .bio-properties-panel-simple .bio-properties-panel-input { + border-top-left-radius: 2px; + border-top-right-radius: 2px; +} + +.bio-properties-panel-list-entry-item:last-child .bio-properties-panel-simple .bio-properties-panel-input { + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; +} diff --git a/src/components/entries/Checkbox.js b/src/components/entries/Checkbox.js index d44ac55b..bb2583bc 100644 --- a/src/components/entries/Checkbox.js +++ b/src/components/entries/Checkbox.js @@ -45,7 +45,7 @@ export default function CheckboxEntry(props) { const value = getValue(element); return ( -
    +
    ); diff --git a/src/components/entries/ToggleSwitch.js b/src/components/entries/ToggleSwitch.js index a2e48476..773307b8 100644 --- a/src/components/entries/ToggleSwitch.js +++ b/src/components/entries/ToggleSwitch.js @@ -55,7 +55,7 @@ export default function ToggleSwitchEntry(props) { const value = getValue(); return ( -
    +
    { description &&
    { description }
    }
    From 4ee63505754cc19bfff599fe5bee5c80bebdbaff Mon Sep 17 00:00:00 2001 From: Niklas Kiefer Date: Tue, 5 Oct 2021 18:18:02 +0200 Subject: [PATCH 7/8] style: ensure hover matches click area for add and remove --- assets/properties-panel.css | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/assets/properties-panel.css b/assets/properties-panel.css index 3f3cff74..b1f14289 100644 --- a/assets/properties-panel.css +++ b/assets/properties-panel.css @@ -238,18 +238,28 @@ margin-right: 0; } +.bio-properties-panel-add-container { + pointer-events: none; +} + .bio-properties-panel-add-entry { + pointer-events: all; fill: var(--add-entry-fill-color); border-radius: 11px; } .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry { fill: var(--add-entry-empty-fill-color); - margin-right: 19px; + margin-right: 69px; padding-left: 6px; } +.bio-properties-panel-group-header.empty .bio-properties-panel-add-entry:hover { + margin-right: 19px; +} + .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry-label { + display: none; color: var(--add-entry-label-color); padding: 4px 6px 3px 2px; } @@ -259,6 +269,10 @@ fill: var(--add-entry-hover-fill-color); } +.bio-properties-panel-group-header-button.bio-properties-panel-add-entry:hover .bio-properties-panel-add-entry-label { + display: block; +} + .bio-properties-panel-group-entries { display: none; } @@ -559,7 +573,12 @@ textarea.bio-properties-panel-input { align-self: center; } +.bio-properties-panel-remove-container { + pointer-events: none; +} + .bio-properties-panel-remove-entry { + pointer-events: all; display: flex; align-items: center; justify-content: center; From a8fb522cdd472680668a7764c4293227914feffa Mon Sep 17 00:00:00 2001 From: Niklas Kiefer Date: Fri, 8 Oct 2021 13:55:47 +0200 Subject: [PATCH 8/8] feat(checkbox): add description --- src/components/entries/Checkbox.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/entries/Checkbox.js b/src/components/entries/Checkbox.js index bb2583bc..214febcc 100644 --- a/src/components/entries/Checkbox.js +++ b/src/components/entries/Checkbox.js @@ -29,6 +29,7 @@ function Checkbox(props) { * @param {Object} props * @param {Object} props.element * @param {String} props.id + * @param {String} props.description * @param {String} props.label * @param {Function} props.getValue * @param {Function} props.setValue @@ -37,6 +38,7 @@ export default function CheckboxEntry(props) { const { element, id, + description, label, getValue, setValue @@ -47,6 +49,7 @@ export default function CheckboxEntry(props) { return (
    + { description &&
    { description }
    }
    ); }