alchemy_cms 8.3.11 → 8.4.0

data/app/stylesheets/alchemy/admin/remote-select.scss

@@ -0,0 +1,170 @@
+/* Shared layout for the remote selects (page, node, attachment, and external
+ * consumers like solidus and blish). Two surfaces share one leading column and
+ * the same cell classes:
+ *
+ *   - the dropdown option, a two row grid (name/aside over secondary/badge)
+ *   - the selected item shown in the control, a single flex row
+ *
+ * The grid keeps the option's secondary text (a url) on its own row where the
+ * flexible name column lets it ellipsis. The control instead needs the url to
+ * give way *before* the name does, which a grid cannot express (its `1fr` name
+ * track collapses first), so the control is a flex row where the trailing text
+ * shrinks ten times faster than the name.
+ */
+.remote-select--entry,
+.remote-select--selection {
+  /* Redefine the spacing and colour tokens with Alchemy's defaults, so the
+   * layout also works when only this file is loaded (e.g. from a gem that links
+   * the standalone stylesheet).
+   */
+  --size-1: var(--spacing-0, 2px);
+  --size-2: var(--spacing-1, 4px);
+  --size-3: var(--spacing-2, 8px);
+  --small-font-size: var(--font-size_small, 10px);
+  --color: var(--text-color, hsla(224deg, 23%, 26%, 0.8));
+  --muted-color: var(--text-color-muted, hsla(224deg, 23%, 26%, 0.5));
+  --highlight-color: var(--color-grey_light, hsl(0deg, 0%, 94%));
+  --badge-bg-color: var(--color-grey_light, hsl(0deg, 0%, 94%));
+  --badge-highlight-bg-color: var(--color-white, hsl(0deg, 0%, 100%));
+  --border-radius: var(--border-radius_medium, 3px);
+
+  color: var(--color);
+
+  .ts-dropdown .option.active & {
+    color: var(--highlight-color);
+  }
+}
+
+.remote-select--entry {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  /* The name and its secondary text sit in different sizes; align them on a
+   * common baseline rather than centering both boxes.
+   */
+  align-items: baseline;
+  column-gap: var(--size-3);
+  row-gap: var(--size-1);
+  overflow: hidden;
+}
+
+.remote-select--selection {
+  display: flex;
+  align-items: baseline;
+  column-gap: var(--size-3);
+  overflow: hidden;
+}
+
+/* Leading column, two mutually exclusive modes. A select uses one or the other,
+ * never both.
+ */
+.remote-select--icon {
+  grid-column: 1;
+  grid-row: 1;
+  /* An icon has no baseline of its own, it would hang off the bottom edge. */
+  align-self: center;
+
+  .icon {
+    fill: currentColor;
+  }
+}
+
+.remote-select--media {
+  grid-column: 1;
+  grid-row: 1 / -1;
+  align-self: center;
+  width: var(--remote-select-media-size, 20px);
+  height: var(--remote-select-media-size, 20px);
+  border-radius: var(--border-radius_medium);
+  object-fit: cover;
+}
+
+.remote-select--primary {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.remote-select--secondary {
+  grid-column: 2;
+  grid-row: 2;
+  color: var(--muted-color);
+  font-size: var(--small-font-size);
+
+  .ts-dropdown .option.active & {
+    color: var(--highlight-color);
+  }
+}
+
+.remote-select--primary,
+.remote-select--secondary,
+.remote-select--selection-name,
+.remote-select--selection-aside {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.remote-select--aside {
+  grid-column: 3;
+  grid-row: 1;
+}
+
+.remote-select--secondary-aside {
+  grid-column: 3;
+  grid-row: 2;
+}
+
+.remote-select--aside,
+.remote-select--secondary-aside {
+  justify-self: end;
+  white-space: nowrap;
+  font-size: var(--small-font-size);
+}
+
+/* The trailing text of the selected item (e.g. a url). It shrinks much faster
+ * than the name, so a long url gives way to an ellipsis before the name does.
+ */
+.remote-select--selection-aside {
+  flex: 0 10 auto;
+  margin-left: auto;
+  color: var(--muted-color);
+  font-size: var(--small-font-size);
+
+  .ts-dropdown .option.active & {
+    color: var(--highlight-color);
+  }
+}
+
+/* Head truncation, for a url whose identifying part is its leaf segment. The
+ * helper wraps the text in <bdi>; without the wrapper the leading slash reorders
+ * to the wrong end.
+ */
+.remote-select--truncate-head {
+  direction: rtl;
+  text-align: left;
+}
+
+.remote-select--badge {
+  display: inline-block;
+  background-color: var(--badge-bg-color);
+  border-radius: var(--border-radius);
+  padding: var(--size-1) var(--size-2);
+  text-transform: uppercase;
+  color: var(--color);
+
+  .ts-dropdown .option.active & {
+    color: var(--color);
+    background-color: var(--badge-highlight-bg-color);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .remote-select--entry,
+  .remote-select--selection {
+    --color: var(--select-text-color, hsl(200deg, 5%, 70%));
+    --muted-color: var(--a-lighter-grey, hsl(200deg, 5%, 70%));
+    --highlight-color: var(--select-hover-text-color, hsl(0deg, 0%, 100%));
+    --badge-bg-color: var(--a-dark-grey, hsl(200deg, 5%, 17.5%));
+    --badge-highlight-bg-color: var(--badge-bg-color);
+  }
+}

data/app/stylesheets/alchemy/admin/search.scss

@@ -42,8 +42,7 @@
   justify-content: center;
 }
 
-#toolbar,
-#overlay_toolbar {
+.toolbar {
   .search_form {
     position: absolute;
     top: 0;
@@ -55,7 +54,7 @@
     height: inherit;
   }
 
-  .search_input_field {
+  input.search_input_field {
     width: 0;
     height: 100%;
     border: none;

data/app/stylesheets/alchemy/admin/selects.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
-@use "alchemy_admin/select2";
 @use "../extends";
 @use "../mixins";
 
@@ -44,288 +43,8 @@ select {
   }
 }
 
-.select2-container {
-  border-radius: var(--border-radius_medium);
-
-  &.alchemy_selectbox {
-    .select2-choice {
-      width: 100%;
-
-      @include mixins.button-defaults(
-        $background-color: var(--select-background-color),
-        $height: var(--form-field-height),
-        $hover-color: var(--select-background-color),
-        $hover-border-color: var(--select-hover-border-color),
-        $padding: var(--form-field-padding),
-        $border: 1px solid var(--select-border-color),
-        $box-shadow: none,
-        $color: var(--select-text-color),
-        $margin: 0
-      );
-
-      & {
-        background-image: none;
-        display: flex;
-        gap: var(--spacing-2);
-        align-items: center;
-        font-weight: normal;
-        text-align: left;
-      }
-
-      .select2-chosen {
-        flex-grow: 1;
-        margin-right: 0;
-      }
-
-      .select2-arrow {
-        position: static;
-        background: transparent;
-        border-left: 0 none;
-
-        b {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          background-image: none;
-          color: var(--icon-color);
-
-          &:before {
-            display: inline-block;
-            content: "";
-            width: 1rem;
-            height: 1rem;
-            background: var(--select-background-image) no-repeat;
-          }
-        }
-      }
-    }
-
-    &.medium {
-      width: var(--select-medium-width);
-    }
-
-    &.large {
-      width: var(--select-large-width);
-    }
-
-    &.select2-container-active {
-      .select2-choice,
-      .select2-choices {
-        @include mixins.default-focus-style(
-          $box-shadow: 0 0 0 1px var(--focus-color)
-        );
-      }
-    }
-
-    &.select2-container-disabled {
-      .select2-choice,
-      .select2-choice:hover {
-        background-image: none;
-        background-color: var(--select-disabled-background-color);
-        box-shadow: none;
-        border-color: var(--select-disabled-border-color);
-        cursor: not-allowed;
-        color: var(--select-disabled-text-color);
-
-        .select2-arrow {
-          border-color: var(--select-disabled-border-color);
-
-          b {
-            color: var(--text-color-muted);
-          }
-        }
-      }
-    }
-  }
-
-  &.select2-allowclear {
-    .select2-search-choice-close {
-      position: static;
-      display: inline-flex;
-      left: auto;
-      right: var(--spacing-1);
-      top: 5px;
-      background: none;
-      text-decoration: none;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  &.select2-container-multi {
-    margin-top: 0 !important;
-
-    &.select2-container-active {
-      .select2-choices {
-        @include mixins.default-focus-style(
-          $box-shadow: 0 0 0 1px var(--focus-color)
-        );
-      }
-    }
-
-    &.select2-container-disabled {
-      .select2-choices {
-        background-color: var(--select-disabled-background-color);
-        border-color: var(--select-disabled-border-color);
-        cursor: not-allowed;
-        color: var(--select-disabled-text-color);
-      }
-    }
-
-    .select2-search-choice-close {
-      position: absolute;
-      left: initial;
-      right: var(--spacing-1);
-    }
-
-    .select2-choices {
-      @extend %default-input-style;
-      padding: 0 var(--spacing-0);
-      width: 100%;
-
-      .select2-search-choice {
-        display: flex;
-        align-items: center;
-        gap: var(--spacing-0);
-        margin: var(--spacing-1);
-        padding: var(--spacing-1) var(--spacing-6) var(--spacing-1)
-          var(--spacing-2);
-        background-image: none;
-        border: 0 none;
-        box-shadow: none;
-        color: var(--text-color);
-        background-color: var(--tag-background-color);
-      }
-
-      .select2-search-field {
-        height: 29px;
-
-        input {
-          color: var(--form-field-text-color);
-          padding: 3px 6px;
-          margin: 0;
-          width: 0;
-
-          &.select2-active {
-            background: var(--form-field-background-color) !important;
-          }
-        }
-      }
-    }
-  }
-
-  .select2-default {
-    color: var(--text-color-muted) !important;
-  }
-
-  .select2-search-choice-close {
-    &:before {
-      content: "";
-      display: inline-flex;
-      width: 12px;
-      height: 12px;
-      background: var(--select-close-icon) no-repeat;
-    }
-
-    &:hover {
-      color: var(--icon-color);
-    }
-  }
-}
-
-.select2-drop {
-  background: var(--select-dropdown-background-color);
-  box-shadow: var(--select-dropdown-box-shadow);
-  color: var(--select-dropdown-text-color, var(--text-color));
-  margin-top: 1px;
-
-  &.select2-drop-above {
-    margin-top: -1px;
-
-    &.select2-drop-active {
-      border-top-color: var(--select-dropdown-border-color);
-    }
-  }
-
-  .select2-search {
-    margin: var(--spacing-1) 0;
-
-    .select2-input {
-      width: inherit;
-
-      &.select2-active {
-        background: var(--form-field-background-color) !important;
-      }
-    }
-  }
-
-  &.select2-with-searchbox .select2-results > .select2-result:first-child {
-    @include mixins.border-top-radius(0);
-  }
-
-  .select2-results {
-    padding: 0;
-    margin: 0;
-
-    > .select2-result:first-child {
-      @include mixins.border-top-radius(var(--border-radius_medium));
-    }
-
-    > .select2-result:last-child {
-      @include mixins.border-bottom-radius(var(--border-radius_medium));
-    }
-
-    .select2-result {
-      margin: 0;
-      padding: var(--spacing-1) 0;
-
-      &.select2-highlighted {
-        background: var(--select-hover-bg-color, var(--color-blue_dark));
-        color: var(--select-hover-text-color, var(--color-white));
-      }
-
-      &.select2-result-with-children {
-        padding: 0;
-      }
-    }
-
-    .select2-no-results,
-    .select2-searching {
-      padding: var(--spacing-2);
-      margin: 0;
-      background: var(--select-dropdown-background-color);
-    }
-
-    .select2-result-label {
-      padding: var(--spacing-1) var(--spacing-2);
-
-      em {
-        text-decoration: underline;
-      }
-    }
-
-    ul.select2-result-sub > li .select2-result-label {
-      padding-left: var(--spacing-4);
-    }
-  }
-
-  &.select2-drop-active {
-    border-radius: var(--border-radius_medium);
-    border: 1px solid var(--select-dropdown-border-color);
-  }
-
-  .select2-more-results,
-  .select2-ajax-error {
-    padding: var(--spacing-2);
-    margin-bottom: 0;
-    background: var(--notice-error-background-color);
-    color: var(--notice-error-text-color);
-  }
-}
-
 #filter_bar {
-  select,
-  .select2-container {
+  select {
     width: 100%;
   }
 }
@@ -340,15 +59,3 @@ select {
     margin-right: var(--spacing-2);
   }
 }
-
-// overriding important of select2 default style for retina screens
-@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
-  only screen and (min-resolution: 2dppx) {
-  #alchemy {
-    .select2-search input,
-    .select2-container .select2-choice abbr,
-    .select2-container .select2-choice .select2-arrow b {
-      background-image: none !important;
-    }
-  }
-}

data/app/stylesheets/alchemy/admin/sitemap.scss

@@ -71,7 +71,7 @@ alchemy-sitemap {
 }
 
 #sitemap {
-  padding: 0 0 104px 0;
+  padding: 0 0 var(--spacing-4) 0;
 
   .page-icon {
     display: inline-flex;
@@ -102,6 +102,7 @@ alchemy-sitemap {
 
   li {
     padding-left: 0;
+    list-style: none;
 
     li {
       padding-left: var(--sitemap-line-height);

data/app/stylesheets/alchemy/admin/tables.scss

@@ -10,6 +10,12 @@ table {
   &.list .tools {
     background-color: transparent;
     padding: var(--spacing-2);
+
+    .button_to {
+      display: inline-block;
+      margin: 0;
+      padding: 0;
+    }
   }
 }
 
@@ -93,7 +99,7 @@ tr.odd td,
 }
 
 .list tr .tools {
-  width: 40px;
+  width: 1%; // keep it small and let the content decide the width
 
   &.long {
     width: 60px;

data/app/stylesheets/alchemy/admin/tags-autocomplete.scss

@@ -0,0 +1,17 @@
+/* Compiled standalone as well, so pages that do not load the admin stylesheet
+ * can link it for the <alchemy-tags-autocomplete> component.
+ */
+@use "tom-select";
+
+.autocomplete_tag_list {
+  // Prefix each Tom Select tag pill with the tag glyph. The base pill styling
+  // in `_tom-select.scss` lays the item out as an inline flex row, so the icon
+  // slots in before the label as `[icon] [label] [remove]`.
+  .ts-control > .item::before {
+    content: "";
+    flex: 0 0 1rem;
+    width: 1rem;
+    height: 1rem;
+    background: var(--tag-background-image) no-repeat center / contain;
+  }
+}

data/app/stylesheets/alchemy/admin/tags.scss

@@ -121,16 +121,3 @@
     }
   }
 }
-
-.autocomplete_tag_list {
-  .select2-container.select2-container-multi {
-    .select2-search-choice {
-      padding: var(--spacing-1) 22px;
-      background-image: var(--tag-background-image);
-      background-repeat: no-repeat;
-      background-position: var(--spacing-1);
-      background-color: var(--tag-background-color);
-      background-size: 1rem;
-    }
-  }
-}

data/app/stylesheets/alchemy/admin/toolbar.scss

@@ -1,14 +1,21 @@
 @use "../extends";
 @use "../variables" as vars;
 
-#toolbar {
-  @extend %gradiated-toolbar;
+.toolbar {
+  display: flex;
   align-items: center;
   gap: var(--spacing-2);
   margin-right: 0px;
   position: relative;
+  background: var(--toolbar-bg-color);
+  padding: var(--toolbar-padding);
+  height: var(--toolbar-height);
+  border-bottom: var(--toolbar-border-bottom);
 
   .toolbar_button {
+    --button-height: var(--icon-button-height);
+    --button-margin: 0;
+
     form {
       margin: 0;
       display: inline-flex;
@@ -87,10 +94,6 @@
   }
 }
 
-#overlay_toolbar {
-  @extend %gradiated-toolbar;
-}
-
 .button_group {
   position: relative;
   display: inline-block;

data/app/stylesheets/alchemy/admin/upload.scss

@@ -41,6 +41,16 @@
   }
 }
 
+// #main_content scrolls, so the absolute drop indicator (pinned to the top of
+// the scrollable content) scrolls out of view. Pin it to the visible viewport
+// area instead, inset past the top and main menu.
+#main_content.dragover::after {
+  position: fixed;
+  inset: var(--top-menu-height) 0 0 var(--main-menu-width);
+  width: auto;
+  height: auto;
+}
+
 alchemy-upload-progress {
   --border-radius: var(--border-radius_medium);
   --pogress_value-width: calc(232px - var(--spacing-2));
@@ -55,9 +65,13 @@ alchemy-upload-progress {
     );
   height: auto;
   left: 0;
+  max-height: 100%;
   opacity: 0;
+  // Only scroll vertically; setting overflow-y alone forces overflow-x to auto,
+  // which shows a spurious horizontal scrollbar for the grid's sub-pixel overflow.
+  overflow: hidden auto;
   padding: var(--spacing-4);
-  position: fixed;
+  position: absolute;
   transition: var(--transition-duration) ease-in-out;
   width: 100%;
   z-index: 150;
@@ -161,6 +175,52 @@ alchemy-upload-progress {
   }
 }
 
+// Inside the scrolling, menu-padded #main_content (a z-index:0 stacking context
+// below the fixed main menu) an absolutely positioned progress hides behind the
+// menu and scrolls away. Pin it to the viewport, inset past the main menu.
+#main_content > alchemy-upload-progress {
+  position: fixed;
+  left: var(--main-menu-width);
+  right: 0;
+  width: auto;
+}
+
+// Mimic the picture archive grid: each upload is a thumbnail-shaped card.
+alchemy-upload-progress[layout="card"] {
+  .single-uploads {
+    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
+  }
+
+  alchemy-file-upload {
+    flex-direction: column;
+    align-items: stretch;
+    text-align: center;
+
+    img {
+      height: 120px;
+      width: 100%;
+    }
+
+    .description {
+      align-self: stretch;
+    }
+
+    button {
+      position: absolute;
+      top: var(--spacing-1);
+      right: var(--spacing-1);
+      margin-left: 0;
+    }
+  }
+}
+
+// Default: each upload is a stacked row, fitting resource table views.
+alchemy-upload-progress[layout="row"] {
+  .single-uploads {
+    grid-template-columns: 1fr;
+  }
+}
+
 .successful {
   --file-upload_progress-indicator-color: var(
     --file-upload_progress-indicator-color-successful