Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Properties panel design finishing #105

Merged
merged 8 commits into from
Oct 11, 2021
Merged

Properties panel design finishing #105

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
01c67aa
chore: update icons
Sep 21, 2021
821ba2f
chore: ensure title attributes
Sep 21, 2021
3cce3a8
chore: update data marker dot
Sep 21, 2021
f64a597
chore: update create-new button
Sep 21, 2021
4bbb7f7
style: cleanup color palette + font
Sep 21, 2021
17b3ce4
style: align spacings
Sep 21, 2021
4ee6350
style: ensure hover matches click area for add and remove
Oct 5, 2021
a8fb522
feat(checkbox): add description
Oct 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions src/components/Group.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
useLayoutState
} from '../hooks';

import { GroupArrowIcon } from './icons';
import { ArrowIcon } from './icons';

/**
* @param {import('../PropertiesPanel').GroupDefinition} props
Expand Down Expand Up @@ -62,7 +62,8 @@ export default function Group(props) {
return <div class="bio-properties-panel-group" data-group-id={ 'group-' + id }>
<div class={ classnames(
'bio-properties-panel-group-header',
edited ? '' : 'empty'
edited ? '' : 'empty',
open? 'open' : ''
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
open? 'open' : ''
open ? 'open' : ''

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So that it doesn't look like similar to optional chaining.

) } onClick={ toggleOpen }>
<div title={ getTitleAttribute(label, edited) } class="bio-properties-panel-group-header-title">
{ label }
Expand All @@ -71,8 +72,11 @@ export default function Group(props) {
{
edited && <DataMarker />
}
<button class="bio-properties-panel-group-header-button">
<GroupArrowIcon class={ open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right' } />
<button
title="Toggle section"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did we agree to call this section instead of group?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure whether we ever actively agree on a specific term here, but "section" is part of our technical writing guide.

"Group" seems to be something we came up technically.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍🏻

class="bio-properties-panel-group-header-button bio-properties-panel-arrow"
>
<ArrowIcon class={ open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right' } />
</button>
</div>
</div>
Expand Down
16 changes: 11 additions & 5 deletions src/components/ListGroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ import {
import ListItem from './ListItem';

import {
CreateIcon,
GroupArrowIcon
ArrowIcon,
CreateIcon
} from './icons';

const noop = () => {};
Expand Down Expand Up @@ -148,7 +148,10 @@ export default function ListGroup(props) {
AddContainer
? (
<AddContainer>
<button class="bio-properties-panel-group-header-button bio-properties-panel-add-entry">
<button
title="Create new list item"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This title is very generic. Are we okay with that or should we make this configurable (e.g. Create new input)?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's part of our design prototype, so it might be ok to keep it generic. We can update it afterward if we see a need though.

/cc @andreasgeier

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍🏻

class="bio-properties-panel-group-header-button bio-properties-panel-add-entry"
>
<CreateIcon />
</button>
</AddContainer>
Expand All @@ -167,8 +170,11 @@ export default function ListGroup(props) {
{
hasItems
? (
<button class="bio-properties-panel-group-header-button">
<GroupArrowIcon class={ open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right' } />
<button
title="Toggle section"
class="bio-properties-panel-group-header-button bio-properties-panel-arrow"
>
<ArrowIcon class={ open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right' } />
</button>
)
: null
Expand Down
17 changes: 10 additions & 7 deletions src/components/entries/Collapsible.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import {
import classnames from 'classnames';

import {
ListArrowIcon,
ListDeleteIcon,
ArrowIcon,
DeleteIcon,
} from '../icons';


Expand Down Expand Up @@ -41,16 +41,19 @@ export default function CollapsibleEntry(props) {
) }>
{ label || placeholderLabel }
</div>
<div class="bio-properties-panel-collapsible-entry-arrow">
<ListArrowIcon class={ open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right' } />
</div>
<button
title="Toggle list item"
class="bio-properties-panel-arrow bio-properties-panel-collapsible-entry-arrow"
>
<ArrowIcon class={ open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right' } />
</button>
{
RemoveContainer
?
(
<RemoveContainer>
<button class="bio-properties-panel-remove-entry">
<ListDeleteIcon />
<button title="Delete item" class="bio-properties-panel-remove-entry">
<DeleteIcon />
</button>
</RemoveContainer>
)
Expand Down
37 changes: 20 additions & 17 deletions src/components/entries/List.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ import {
import classnames from 'classnames';

import {
ArrowIcon,
CreateIcon,
GroupArrowIcon,
ListDeleteIcon
DeleteIcon
} from '../icons';

/**
Expand Down Expand Up @@ -104,20 +104,30 @@ export default function List(props) {
<div
class="bio-properties-panel-list-entry-header-buttons"
>
<button onClick={ addItem } class="bio-properties-panel-add-entry">
<button
title="Create new list item"
onClick={ addItem }
class="bio-properties-panel-add-entry"
>
<CreateIcon />
</button>
{
hasItems && (
<div class="bio-properties-panel-list-badge">
<div
title={ `List contains ${items.length} item${items.length != 1 ? 's' : ''}` }
class="bio-properties-panel-list-badge"
>
{ items.length }
</div>
)
}
{
hasItems && (
<button class="bio-properties-panel-list-entry-arrow">
<GroupArrowIcon class={ open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right' } />
<button
title="Toggle list item"
class="bio-properties-panel-arrow"
>
<ArrowIcon class={ open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right' } />
</button>
)
}
Expand Down Expand Up @@ -182,14 +192,15 @@ function ItemsList(props) {
const key = getKey(item);

return (<li class="bio-properties-panel-list-entry-item" key={ key }>
{renderItem(item, index, item === newItem)}
{ renderItem(item, index, item === newItem) }
{
onRemove && (
<button
type="button"
class="bio-properties-panel-remove-entry"
title="Delete item"
class="bio-properties-panel-remove-entry bio-properties-panel-remove-list-entry"
onClick={ () => onRemove && onRemove(item) }
><ListDeleteIcon /></button>
><DeleteIcon /></button>
)
}
</li>);
Expand All @@ -198,14 +209,6 @@ function ItemsList(props) {
</ol>);
}

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.
*
Expand Down
3 changes: 3 additions & 0 deletions src/components/icons/Arrow.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion src/components/icons/Checkbox.svg
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion src/components/icons/CheckboxChecked.svg
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions src/components/icons/Create.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/components/icons/Delete.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 0 additions & 3 deletions src/components/icons/FullPanel.svg
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions src/components/icons/FullPanelOff.svg
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions src/components/icons/GroupArrow.svg
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions src/components/icons/ListArrow.svg
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions src/components/icons/ListDelete.svg
View file
Open in desktop

This file was deleted.

5 changes: 2 additions & 3 deletions src/components/icons/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
export { default as DeleteIcon } from './Delete.svg';