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 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.59 9H15V4c0-.55-.45-1-1-1h-4c-.55 0-1 .45-1 1v5H7.41c-.89 0-1.34 1.08-.71 1.71l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.63-.63.19-1.71-.7-1.71zM5 19c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1z"/></svg> \ 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 @@ <div component="attachments-list"> @foreach($attachments as $attachment) <div class="attachment icon-list"> - <a class="icon-list-item py-xs attachment-{{ $attachment->external ? 'link' : 'file' }}" href="{{ $attachment->getUrl() }}" @if($attachment->external) target="_blank" @endif> - <span class="icon">@icon($attachment->external ? 'export' : 'file')</span> - <span>{{ $attachment->name }}</span> - </a> + <div class="split-icon-list-item attachment-{{ $attachment->external ? 'link' : 'file' }}"> + <a href="{{ $attachment->getUrl() }}" @if($attachment->external) target="_blank" @endif> + <div class="icon">@icon($attachment->external ? 'export' : 'file')</div> + <div class="label">{{ $attachment->name }}</div> + </a> + @if(!$attachment->external) + <div component="dropdown" class="icon-list-item-dropdown"> + <button refs="dropdown@toggle" type="button" class="icon-list-item-dropdown-toggle">@icon('caret-down')</button> + <ul refs="dropdown@menu" class="dropdown-menu" role="menu"> + <a href="{{ $attachment->getUrl(false) }}" class="icon-item"> + @icon('download') + <div>{{ trans('common.download') }}</div> + </a> + <a href="{{ $attachment->getUrl(true) }}" target="_blank" class="icon-item"> + @icon('export') + <div>{{ trans('common.open_in_tab') }}</div> + </a> + </ul> + </div> + @endif + </div> </div> @endforeach </div> \ No newline at end of file