TheDude
/
openproject
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[chore] add spot hover menu (#10762)

Browse Source 
- new hover menu for spot-list
- introduced floating wrapper
- align children to top when list item gets line breaks
- reworked spot list item style
- add word wrap to the spot list title
pull/10788/head
Eric Schubert 2 years ago committed by GitHub
parent f16f8c5f76
commit d3dc062367
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 141 additions and 12 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 115
      frontend/src/app/spot/spot-docs.component.html
  2. 38
      frontend/src/app/spot/styles/sass/components/list.sass

115
frontend/src/app/spot/spot-docs.component.html
Unescape View File

@ -125,6 +125,11 @@ Currently selected value is {{ toggleValue }}
<h2>Normal list</h2>
<p>HINT: To enable floating actions on hover, every <i>spot-list--item</i> needs a
<i>spot-list--item-floating-wrapper</i>, which wraps the item's content and the <i>spot-list-item-floating-actions</i>,
but not any sub lists. This way, floating actions on hover are defined specific for each item, hence in the same list
items with floating actions can be right next to items without.</p>
<ul class="spot-list">
<li class="spot-list--item">
<label class="spot-list--item-action">
@ -132,6 +137,25 @@ Currently selected value is {{ toggleValue }}
<div class="spot-list--item-title">Checkbox item</div>
</label>
</li>
<li class="spot-list--item">
<div class="spot-list--item-floating-wrapper">
<label class="spot-list--item-action">
<spot-checkbox [(ngModel)]="listCheckboxValue"></spot-checkbox>
<div class="spot-list--item-title">Checkbox item with hover menu</div>
</label>
<div class="spot-list--item-floating-actions">
<button class="spot-link">
<span class="spot-icon spot-icon_folder-open"></span>
</button>
<button class="spot-link">
<span class="spot-icon spot-icon_external-link"></span>
</button>
<button class="spot-link">
<span class="spot-icon spot-icon_file-doc"></span>
</button>
</div>
</div>
</li>
<li class="spot-list--item">
<label class="spot-list--item-action">
<spot-checkbox [(ngModel)]="listCheckboxValue"></spot-checkbox>
@ -139,15 +163,25 @@ Currently selected value is {{ toggleValue }}
</label>
<ul class="spot-list">
<li class="spot-list--item">
<label class="spot-list--item-action">
<spot-checkbox [(ngModel)]="listCheckboxValue"></spot-checkbox>
<div class="spot-list--item-title">Child checkbox item</div>
</label>
<div class="spot-list--item-floating-wrapper">
<label class="spot-list--item-action">
<spot-checkbox [(ngModel)]="listCheckboxValue"></spot-checkbox>
<div class="spot-list--item-title">Child checkbox item</div>
</label>
<div class="spot-list--item-floating-actions">
<button class="spot-link">
<span class="spot-icon spot-icon_folder-open"></span>
</button>
<button class="spot-link">
<span class="spot-icon spot-icon_file-doc"></span>
</button>
</div>
</div>
<ul class="spot-list">
<li class="spot-list--item">
<label class="spot-list--item-action">
<spot-checkbox [(ngModel)]="listCheckboxValue"></spot-checkbox>
<div class="spot-list--item-title">Secon level child</div>
<div class="spot-list--item-title">Second level child</div>
</label>
</li>
</ul>
@ -158,6 +192,22 @@ Currently selected value is {{ toggleValue }}
<div class="spot-list--item-title">Second child checkbox item</div>
</label>
</li>
<li class="spot-list--item">
<div class="spot-list--item-floating-wrapper">
<label class="spot-list--item-action">
<spot-checkbox [(ngModel)]="listCheckboxValue"></spot-checkbox>
<div class="spot-list--item-title">Second child checkbox item with hover menu</div>
</label>
<div class="spot-list--item-floating-actions">
<button class="spot-link">
<span class="spot-icon spot-icon_folder-open"></span>
</button>
<button class="spot-link">
<span class="spot-icon spot-icon_file-doc"></span>
</button>
</div>
</div>
</li>
<li class="spot-list--item">
<label class="spot-list--item-action spot-list--item-action_disabled">
<spot-checkbox
@ -180,6 +230,25 @@ Currently selected value is {{ toggleValue }}
<div class="spot-list--item-title">Checkbox item</div>
</label>
</li>
<li class="spot-list--item">
<div class="spot-list--item-floating-wrapper">
<label class="spot-list--item-action">
<spot-checkbox [(ngModel)]="listCheckboxValue"></spot-checkbox>
<div class="spot-list--item-title">Checkbox item with hover menu</div>
</label>
<div class="spot-list--item-floating-actions">
<button class="spot-link">
<span class="spot-icon spot-icon_folder-open"></span>
</button>
<button class="spot-link">
<span class="spot-icon spot-icon_external-link"></span>
</button>
<button class="spot-link">
<span class="spot-icon spot-icon_file-doc"></span>
</button>
</div>
</div>
</li>
<li class="spot-list--item">
<label class="spot-list--item-action">
<spot-checkbox [(ngModel)]="listCheckboxValue"></spot-checkbox>
@ -187,15 +256,25 @@ Currently selected value is {{ toggleValue }}
</label>
<ul class="spot-list spot-list_compact">
<li class="spot-list--item">
<label class="spot-list--item-action">
<spot-checkbox [(ngModel)]="listCheckboxValue"></spot-checkbox>
<div class="spot-list--item-title">Child checkbox item</div>
</label>
<div class="spot-list--item-floating-wrapper">
<label class="spot-list--item-action">
<spot-checkbox [(ngModel)]="listCheckboxValue"></spot-checkbox>
<div class="spot-list--item-title">Child checkbox item</div>
</label>
<div class="spot-list--item-floating-actions">
<button class="spot-link">
<span class="spot-icon spot-icon_folder-open"></span>
</button>
<button class="spot-link">
<span class="spot-icon spot-icon_file-doc"></span>
</button>
</div>
</div>
<ul class="spot-list spot-list_compact">
<li class="spot-list--item">
<label class="spot-list--item-action">
<spot-checkbox [(ngModel)]="listCheckboxValue"></spot-checkbox>
<div class="spot-list--item-title">Secon level child</div>
<div class="spot-list--item-title">Second level child</div>
</label>
</li>
</ul>
@ -206,6 +285,22 @@ Currently selected value is {{ toggleValue }}
<div class="spot-list--item-title">Second child checkbox item</div>
</label>
</li>
<li class="spot-list--item">
<div class="spot-list--item-floating-wrapper">
<label class="spot-list--item-action">
<spot-checkbox [(ngModel)]="listCheckboxValue"></spot-checkbox>
<div class="spot-list--item-title">Second child checkbox item with hover menu</div>
</label>
<div class="spot-list--item-floating-actions">
<button class="spot-link">
<span class="spot-icon spot-icon_folder-open"></span>
</button>
<button class="spot-link">
<span class="spot-icon spot-icon_file-doc"></span>
</button>
</div>
</div>
</li>
<li class="spot-list--item">
<label class="spot-list--item-action spot-list--item-action_disabled">
<spot-checkbox

38
frontend/src/app/spot/styles/sass/components/list.sass
Unescape View File

@ -14,36 +14,70 @@
@include spot-body-big
display: flex
align-items: center
align-items: flex-start
justify-content: flex-start
padding: $spot-spacing-0_5 $spot-spacing-1
width: 100%
background-color: transparent
margin: 0
border: 0
cursor: pointer
> *:first-child
flex-shrink: 0
&:hover
background-color: $spot-color-basic-gray-6
text-decoration: none
&_disabled
color: $spot-color-basic-gray-3
cursor: default
&-floating-wrapper
position: relative
display: flex
&:hover,
&:focus-within
background-color: $spot-color-basic-gray-6
&-floating-actions
opacity: 0
position: absolute
right: 0
height: 100%
padding: $spot-spacing-0_5 $spot-spacing-1
background: linear-gradient(90deg, rgba($spot-color-basic-gray-6, 0) 0%, $spot-color-basic-gray-6 1rem)
> .spot-link
&:not(:first-child)
margin-left: $spot-spacing-0_5
&-title
margin-right: auto
word-break: break-word
min-height: $spot-spacing-1_5
&:not(:first-child)
margin-left: $spot-spacing-0_5
&:not(:last-child)
margin-left: $spot-spacing-0_5
&-floating-wrapper:hover > &-floating-actions,
&-floating-actions:focus-within,
&-floating-actions:hover
opacity: 1
&_compact &--item:not(:first-child)
margin-top: $spot-spacing-0_25
&--item > &_compact > &--item:first-child
margin-top: $spot-spacing-0_25
&_compact &--item-action
&_compact &--item-action,
&_compact &--item-floating-actions
padding: $spot-spacing-0_25 $spot-spacing-1
$item-list: ""

Write Preview
Loading…
Cancel
Save