pageflow 17.1.0 → 17.2.0

data/app/assets/javascripts/pageflow/editor/vendor.js

@@ -3,7 +3,6 @@
 //= require i18n/translations
 
 //= require wysihtml-toolbar
-//= require jquery.minicolors
 
 //= require cocktail
 //= require backbone.marionette

data/app/assets/javascripts/pageflow/ui.js

@@ -1,5 +1,4 @@
 //= require wysihtml-toolbar
-//= require jquery.minicolors
 
 //= require i18n
 //= require i18n/translations

data/app/assets/stylesheets/pageflow/admin/entry_comments_indicator.scss

@@ -0,0 +1,45 @@
+$pageflow-entry-comments-indicator-color: #8a5a00 !default;
+
+$pageflow-entry-comments-indicator-background-color: #fdf1dc !default;
+
+$pageflow-entry-comments-indicator-dot-color: #ff7400 !default;
+
+$pageflow-entry-comments-indicator-icon-directory: "pageflow/admin/icons" !default;
+
+.entry_comments_indicator {
+  $dir: $pageflow-entry-comments-indicator-icon-directory;
+
+  position: relative;
+  display: inline-block;
+  margin-left: 8px;
+  padding: 1px 6px 1px 22px;
+  vertical-align: middle;
+  border-radius: 10px;
+  background: $pageflow-entry-comments-indicator-background-color
+              image-url("#{$dir}/comment.svg") no-repeat 5px center / 13px 13px;
+  color: $pageflow-entry-comments-indicator-color;
+  font-size: 0.7rem;
+  line-height: 1.6;
+
+  // The tooltip claims both pseudo elements of the indicator, so the
+  // dot has to be an element of its own.
+  //
+  // Straddles the corner like the unread dot inside the editor, so both
+  // read as the same signal.
+  .unread_dot {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: $pageflow-entry-comments-indicator-dot-color;
+  }
+
+  // The bubble is placed by its static position, which on an inline
+  // element sits at the far end of the content and thus away from the
+  // arrow anchored to the left.
+  &::after {
+    left: 0;
+  }
+}

data/app/assets/stylesheets/pageflow/admin/permalink_input.scss

@@ -18,6 +18,7 @@ $pageflow-permalink-input-directory-background-position: null !default;
 .pageflow_permalink.input {
   .permalink {
     display: inline-flex;
+    flex-wrap: wrap;
     border: 1px solid $pageflow-permalink-input-border-color;
     border-radius: $pageflow-permalink-input-border-radius;
     background-color: $pageflow-permalink-input-background-color;
@@ -38,6 +39,12 @@ $pageflow-permalink-input-directory-background-position: null !default;
     background-color: $pageflow-permalink-input-base-url-background-color;
     color: $pageflow-permalink-input-base-url-color;
     flex: 1;
+    white-space: nowrap;
+  }
+
+  .permalink_inputs {
+    display: inline-flex;
+    flex: 10;
   }
 
   select,
@@ -61,7 +68,7 @@ $pageflow-permalink-input-directory-background-position: null !default;
 
   input {
     padding-left: 0;
-    flex: 2;
+    flex: 1;
   }
 
   &.no_directories {

data/app/assets/stylesheets/pageflow/admin.scss

@@ -25,6 +25,7 @@ $pageflow-hint-color: #666 !default;
 @import "pageflow/admin/embed_code";
 @import "pageflow/admin/embedded_index_table";
 @import "pageflow/admin/entries";
+@import "pageflow/admin/entry_comments_indicator";
 @import "pageflow/admin/features";
 @import "pageflow/admin/filters";
 @import "pageflow/admin/forms";

data/app/assets/stylesheets/pageflow/animations/spin.scss

@@ -0,0 +1,9 @@
+@include keyframes(spin) {
+  from {
+    @include transform(rotate(0deg));
+  }
+
+  to {
+    @include transform(rotate(360deg));
+  }
+}

data/app/assets/stylesheets/pageflow/animations.scss

@@ -4,3 +4,4 @@
 @import "animations/navigation_bar";
 @import "animations/scroll";
 @import "animations/loading";
+@import "animations/spin";

data/app/assets/stylesheets/pageflow/editor/background_positioning.scss

@@ -43,7 +43,6 @@
 
     .image {
       outline: solid 1px var(--ui-on-surface-color-light);
-      background-size: cover;
     }
 
     .label {
@@ -58,15 +57,32 @@
     position: relative;
     height: 100%;
 
-    img {
+    // Shrinks to the size of whatever renders the file, so the sliders
+    // line up with its edges.
+    .file {
+      --positioning-max-width: 600px;
+      --positioning-max-height: 300px;
+
+      display: inline-block;
       outline: solid 1px var(--ui-on-surface-color-light);
-      display: block;
-      max-height: 300px;
-      max-width: 600px;
+      line-height: 0;
       cursor: crosshair;
     }
   }
 
+  &-image-contain {
+    display: block;
+    max-width: var(--positioning-max-width, 100%);
+    max-height: var(--positioning-max-height, none);
+  }
+
+  &-image-cover {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
   .slider {
     position: absolute;
     border: none;

data/app/assets/stylesheets/pageflow/editor/base.scss

@@ -59,6 +59,7 @@
   @import "./composables";
   @import "./list";
   @import "./drop_down_button";
+  @import "./edit_configuration_view";
 
   @import "./outline";
   @import "./sortable";
@@ -71,18 +72,25 @@
   @import "./confirm_encoding";
   @import "./files_gallery";
   @import "./filtered_files";
+  @import "./file_type_pills";
+  @import "./folder_breadcrumb";
+  @import "./file_folders";
   @import "./list_search_field";
   @import "./file_meta_data";
+  @import "./file_meta_data_overlay";
+  @import "./file_references";
+  @import "./file_preview";
+  @import "./file_stage_icons";
   @import "./file_stages";
   @import "./file_thumbnails";
   @import "./file_settings_dialog";
+  @import "./move_to_folder_dialog";
   @import "./info_box";
   @import "./text_tracks";
   @import "./static_thumbnails";
   @import "./notifications";
   @import "./publish_entry";
   @import "./other_entry_item";
-  @import "./select_button";
   @import "./quotas";
   @import "./back_button_decorator";
   @import "./widgets";

data/app/assets/stylesheets/pageflow/editor/drop_down_button.scss

@@ -12,9 +12,16 @@
 
   > button.ellipsis_icon {
     @include fa-ellipsis-v-icon;
+  }
+
+  > button.ellipsis_icon.has_icon_only {
     width: var(--drop-down-button-width, 31px);
   }
 
+  > button.ellipsis_icon.has_icon_and_text::before {
+    margin-right: 9px;
+  }
+
   > button.borderless {
     --ui-button-border-color: transparent;
     --ui-button-hover-border-color: transparent;
@@ -102,6 +109,11 @@
     padding-top: 1px;
   }
 
+  &.is_destructive a:hover {
+    background-color: var(--ui-error-color);
+    color: var(--ui-on-error-color);
+  }
+
   &.has_radio,
   &.has_check_box {
     a {
@@ -148,7 +160,7 @@
     }
   }
 
-  ul {
+  &:not(:last-child) ul {
     border-bottom: solid 1px var(--ui-on-surface-color-lighter);
     padding-bottom: 1px;
     margin-bottom: 1px;

data/app/assets/stylesheets/pageflow/editor/edit_configuration_view.scss

@@ -0,0 +1,5 @@
+.edit_configuration_view {
+  .actions_drop_down_button {
+    float: right;
+  }
+}

data/app/assets/stylesheets/pageflow/editor/file_folders.scss

@@ -0,0 +1,127 @@
+.file_folders {
+  &-pictogram {
+    @include background-icon-center(var(--ui-primary-color-light), 28px);
+    @include folder-icon;
+
+    flex-shrink: 0;
+    width: space(14);
+    height: space(14);
+    margin: space(1) 0 space(1) space(1);
+    border-radius: rounded(sm);
+    background-color: var(--ui-on-surface-color-lightest);
+  }
+
+  // Unlike the two lines of a file row, name and file count are stacked
+  // right next to each other, so that the row keeps its height.
+  &-info {
+    display: flex;
+    flex: 1;
+    align-items: flex-start;
+    justify-content: space-between;
+    min-width: 0;
+  }
+
+  &-button {
+    flex: 1;
+    align-self: center;
+    min-width: 0;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    color: inherit;
+    cursor: pointer;
+    text-align: left;
+
+    // Navigating into the folder is the only action of the row, so the
+    // whole row becomes the target of the button.
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+  }
+
+  // Takes the place of the button while items are being checked, so that
+  // clicking the row checks the folder just like it checks a file.
+  // Undoes the weight, spacing and positioning which labels of form
+  // fields have. Staying static keeps the row the containing block of the
+  // stretched hit area below.
+  &-label {
+    display: block;
+    position: static;
+    flex: 1;
+    align-self: center;
+    min-width: 0;
+    margin-bottom: 0;
+    font-weight: normal;
+    cursor: pointer;
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+
+    .file_folders-title {
+      gap: space(2);
+    }
+  }
+
+  // Stays above the stretched hit area of the label, so that clicking the
+  // box itself still toggles it.
+  &-check_box {
+    position: relative;
+    z-index: 1;
+    flex-shrink: 0;
+    cursor: pointer;
+  }
+
+  &-title {
+    display: flex;
+    align-items: center;
+    gap: space(1);
+    margin-bottom: space(1);
+  }
+
+  &-name {
+    @include label;
+  }
+
+  &-chevron {
+    @include right-open-icon;
+
+    flex-shrink: 0;
+    color: var(--ui-primary-color-light);
+  }
+
+  &-file_count {
+    display: block;
+    color: var(--ui-on-surface-color-light);
+  }
+
+  // Lines up with the buttons of file rows. The button stretches over
+  // the whole row, so the menu has to stay above it.
+  &-actions {
+    --drop-down-button-width: 32px;
+
+    position: relative;
+    z-index: 1;
+    display: flex;
+    padding: space(0.5) space(0.5) 0 0;
+  }
+
+  // Takes the place of the name, so that the row keeps its height while
+  // the name is being entered.
+  &-input {
+    box-sizing: border-box;
+    flex: 1;
+    align-self: center;
+    margin-right: space(2);
+  }
+}

data/app/assets/stylesheets/pageflow/editor/file_meta_data.scss

@@ -1,5 +1,4 @@
 .file_meta_data {
-  margin-left: -65px;
   white-space: normal;
 
   table {

data/app/assets/stylesheets/pageflow/editor/file_meta_data_overlay.scss

@@ -0,0 +1,45 @@
+.file_meta_data_overlay {
+  display: none;
+  position: absolute;
+  z-index: 6;
+  width: space(64);
+  border: solid 1px var(--ui-on-surface-color-lighter);
+  border-radius: rounded(md);
+  background-color: var(--ui-surface-color);
+  box-shadow: var(--ui-box-shadow);
+
+  &.is_open {
+    display: block;
+  }
+
+  // Never taller than the space floating-ui found next to the row.
+  // Painted after the arrow, whose inner half would otherwise cover the
+  // scroll bar.
+  &-content {
+    position: relative;
+    max-height: var(--available-height, 100vh);
+    overflow-y: auto;
+    padding: space(2);
+  }
+
+  &-preview {
+    display: block;
+    margin-bottom: space(2);
+    border-radius: rounded();
+    overflow: hidden;
+    background-color: var(--ui-on-surface-color-lightest);
+  }
+
+  // Rotating a square leaves the two edges facing the thumbnail
+  // visible, so the arrow continues the border of the overlay.
+  &-arrow {
+    @include transform(rotate(45deg));
+
+    position: absolute;
+    width: space(2);
+    height: space(2);
+    border-top: solid 1px var(--ui-on-surface-color-lighter);
+    border-right: solid 1px var(--ui-on-surface-color-lighter);
+    background-color: var(--ui-surface-color);
+  }
+}

data/app/assets/stylesheets/pageflow/editor/file_preview.scss

@@ -0,0 +1,138 @@
+.file_preview {
+  display: block;
+  position: relative;
+
+  .is_hidden {
+    display: none;
+  }
+
+  // Scaled down to whatever height the overlay has left rather than
+  // being cropped.
+  img,
+  video {
+    display: block;
+    width: 100%;
+    max-width: var(--preview-width, 100%);
+    height: auto;
+    max-height: var(--preview-max-height, none);
+    margin: 0 auto;
+    object-fit: contain;
+  }
+
+  video {
+    cursor: pointer;
+  }
+
+  &-audio {
+    display: flex;
+    align-items: center;
+    gap: space(2);
+    padding: space(2);
+    color: var(--ui-primary-color);
+  }
+
+  &-play_toggle {
+    display: flex;
+    align-items: center;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    color: inherit;
+    cursor: pointer;
+  }
+
+  &-play,
+  &-pause {
+    display: block;
+    width: space(6);
+    height: space(6);
+  }
+
+  // Styling the parts of a range input consistently across browsers is
+  // more trouble than it is worth. The bar below paints track and
+  // progress instead, while the input above only handles interaction.
+  &-progress {
+    position: relative;
+    flex: 1;
+    height: space(2);
+    border-radius: rounded(full);
+    background-color: var(--ui-on-surface-color-lightest);
+
+    &:focus-within {
+      box-shadow: 0 0 0 2px var(--ui-button-focus-ring-color);
+    }
+
+    // Taller than the bar to be easier to hit.
+    input {
+      position: absolute;
+      top: space(-1.5);
+      left: 0;
+      width: 100%;
+      height: space(5);
+      border-radius: inherit;
+      background-color: transparent;
+      cursor: pointer;
+      appearance: none;
+      -webkit-appearance: none;
+
+      // The bar itself indicates focus, tightly around its own height.
+      &:focus {
+        outline: none;
+      }
+    }
+
+    // A thumb of its own would only offset how clicks map to positions.
+    input::-webkit-slider-thumb {
+      width: 0;
+      -webkit-appearance: none;
+    }
+
+    input::-moz-range-thumb {
+      width: 0;
+      border: 0;
+    }
+
+    input::-moz-range-track,
+    input::-moz-range-progress {
+      background-color: transparent;
+    }
+
+    div {
+      width: var(--progress, 0%);
+      height: 100%;
+      border-radius: inherit;
+      background-color: currentColor;
+    }
+  }
+
+  &-controls {
+    position: absolute;
+    right: space(2);
+    bottom: space(2);
+    left: space(2);
+    display: flex;
+    align-items: center;
+    gap: space(2);
+    color: var(--ui-on-primary-color);
+
+    // Legible on top of both bright and dark videos.
+    .file_preview-progress {
+      background-color: var(--ui-backdrop-color);
+    }
+  }
+
+  &-mute_toggle {
+    padding: space(1.5);
+    border: none;
+    border-radius: rounded(full);
+    background-color: var(--ui-backdrop-color);
+    color: var(--ui-on-primary-color);
+    cursor: pointer;
+
+    svg {
+      display: block;
+      width: space(4);
+      height: space(4);
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/editor/file_references.scss

@@ -0,0 +1,68 @@
+.file_references {
+  &-separator {
+    display: flex;
+    align-items: center;
+    gap: space(2);
+    padding: space(4) 0 space(2);
+
+    &::before,
+    &::after {
+      content: "";
+      flex: 1;
+      border-bottom: solid 1px var(--ui-on-surface-color-lightest);
+    }
+  }
+
+  &-header {
+    margin: 0;
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+
+  &-item {
+    display: flex;
+    align-items: center;
+    gap: space(2);
+    width: 100%;
+    margin-bottom: space(1);
+    padding: space(1);
+    border: solid 1px var(--ui-on-surface-color-lightest);
+    border-radius: rounded();
+    background: transparent;
+    text-align: left;
+    cursor: pointer;
+
+    &:hover {
+      border-color: var(--ui-primary-color-light);
+    }
+  }
+
+  &-pictogram {
+    flex: none;
+    width: 16px;
+    height: 16px;
+    background-color: var(--ui-primary-color-light);
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+  }
+
+  &-lines {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  &-label,
+  &-detail {
+    overflow: hidden;
+    font-size: 0.75rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &-label {
+    font-weight: 500;
+    color: var(--ui-on-surface-color-light);
+  }
+}

data/app/assets/stylesheets/pageflow/editor/file_settings_dialog.scss

@@ -3,7 +3,7 @@
     min-width: 500px;
     min-height: 400px;
     max-width: 800px;
-    max-height: 600px;
+    max-height: 790px;
   }
 
   .edit_file {

data/app/assets/stylesheets/pageflow/editor/file_stage_icons.scss

@@ -0,0 +1,17 @@
+.file_stage_icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+
+  &-spinner {
+    @include animation(spin 1s linear infinite);
+  }
+
+  &-spinner,
+  &-alert,
+  &-bell {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}