diff --git a/resources/icons/download.svg b/resources/icons/download.svg new file mode 100644 index 000000000..6299571d6 --- /dev/null +++ b/resources/icons/download.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/lang/en/common.php b/resources/lang/en/common.php index 2f09e53d1..703a70c7e 100644 --- a/resources/lang/en/common.php +++ b/resources/lang/en/common.php @@ -47,6 +47,8 @@ return [ 'previous' => 'Previous', 'filter_active' => 'Active Filter:', 'filter_clear' => 'Clear Filter', + 'download' => 'Download', + 'open_in_tab' => 'Open in Tab', // Sort Options 'sort_options' => 'Sort Options', diff --git a/resources/sass/_lists.scss b/resources/sass/_lists.scss index 8ca811c5c..19060fbbf 100644 --- a/resources/sass/_lists.scss +++ b/resources/sass/_lists.scss @@ -453,6 +453,61 @@ ul.pagination { } } +.split-icon-list-item { + display: flex; + align-items: center; + gap: $-m; + background-color: transparent; + border: 0; + width: 100%; + position: relative; + word-break: break-word; + border-radius: 4px; + > a { + padding: $-s $-m; + display: flex; + align-items: center; + gap: $-m; + flex: 1; + } + > a:hover { + text-decoration: none; + } + .icon { + flex-basis: 1.88em; + flex: none; + } + &:hover { + @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06)); + } +} + +.icon-list-item-dropdown { + margin-inline-start: auto; + align-self: stretch; + display: flex; + align-items: stretch; + border-inline-start: 1px solid rgba(0, 0, 0, .1); + visibility: hidden; +} +.split-icon-list-item:hover .icon-list-item-dropdown, +.split-icon-list-item:focus-within .icon-list-item-dropdown { + visibility: visible; +} +.icon-list-item-dropdown-toggle { + padding: $-xs; + display: flex; + align-items: center; + cursor: pointer; + @include lightDark(color, #888, #999); + svg { + margin: 0; + } + &:hover { + @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06)); + } +} + .card .entity-list-item:not(.no-hover, .book-contents .entity-list-item):hover { @include lightDark(background-color, #F2F2F2, #2d2d2d); border-radius: 0; @@ -648,9 +703,10 @@ ul.pagination { } } -// Shift in right-sidebar dropdown menus to prevent shadows +// Shift in sidebar dropdown menus to prevent shadows // being cut by scrollable container. -.tri-layout-right .dropdown-menu { +.tri-layout-right .dropdown-menu, +.tri-layout-left .dropdown-menu { right: $-xs; } diff --git a/resources/sass/_pages.scss b/resources/sass/_pages.scss index 73819975f..3ceec61d0 100755 --- a/resources/sass/_pages.scss +++ b/resources/sass/_pages.scss @@ -396,10 +396,14 @@ body.tox-fullscreen, body.markdown-fullscreen { } } -.entity-list-item > span:first-child, .icon-list-item > span:first-child, .chapter-expansion > .icon { +.entity-list-item > span:first-child, +.icon-list-item > span:first-child, +.split-icon-list-item > a > .icon, +.chapter-expansion > .icon { font-size: 0.8rem; width: 1.88em; height: 1.88em; + flex-shrink: 0; display: flex; align-items: center; justify-content: center; diff --git a/resources/views/attachments/list.blade.php b/resources/views/attachments/list.blade.php index f0a1354ea..a6ffb709b 100644 --- a/resources/views/attachments/list.blade.php +++ b/resources/views/attachments/list.blade.php @@ -1,10 +1,27 @@
@foreach($attachments as $attachment)
- external) target="_blank" @endif> - @icon($attachment->external ? 'export' : 'file') - {{ $attachment->name }} - +
@endforeach
\ No newline at end of file