Updated attachment links to have dropdown for open type

- Allows easier accessibility of inline attachments.
- Introduces a new split-icon-list-item thingy to support such cases
  where only part of the button is actually linked.

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>

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',

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;
 }
 

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;

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>
+            <div class="split-icon-list-item attachment-{{ $attachment->external ? 'link' : 'file' }}">
-                <span class="icon">@icon($attachment->external ? 'export' : 'file')</span>
+                <a href="{{ $attachment->getUrl() }}" @if($attachment->external) target="_blank" @endif>
-                <span>{{ $attachment->name }}</span>
+                    <div class="icon">@icon($attachment->external ? 'export' : 'file')</div>
-            </a>
+                    <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>