apostrophe 4.7.0 → 4.8.0

package/modules/@apostrophecms/schema/ui/apos/scss/AposInputArray.scss

@@ -27,20 +27,15 @@
   }
 }
 
-.apos-is-dragging {
-  opacity: 0.5;
-  background: var(--a-base-4);
-}
-
 .apos-input-array-inline-empty {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin-bottom: $spacing-base;
   padding: $spacing-triple 0;
   border: 1px solid var(--a-base-9);
   color: var(--a-base-8);
+  border-radius: var(--a-border-radius);
 }
 
 .apos-input-array-inline-empty-label {
@@ -56,61 +51,11 @@
 
   & {
     position: relative;
-    left: -35px;
-    min-width: calc(100% + 35px);
-    width: max-content;
+    width: 100%;
     margin: 0 0 $spacing-base;
     border-collapse: collapse;
   }
 
-  th {
-    height: 40px;
-    padding-right: $spacing-base;
-    padding-left: $spacing-base;
-    border: 1px solid var(--a-base-9);
-    text-align: left;
-    background-color: var(--a-base-10);
-  }
-
-  .apos-table-cell--hidden {
-    padding-left: 5px;
-    border: none;
-    cursor: pointer;
-    background-color: transparent;
-  }
-
-  td, :deep(td) {
-    padding: $spacing-base;
-    border: 1px solid var(--a-base-9);
-    vertical-align: middle;
-    text-align: center;
-    transition: background-color 300ms ease;
-    background-color: var(--a-background-primary);
-  }
-
-  td.apos-input-array-inline-item-controls { /* stylelint-disable-line selector-no-qualifying-type */
-    width: 15px;
-    min-width: 15px;
-    border: none;
-    background-color: transparent;
-  }
-
-  tr.apos-is-dragging, :deep(tr.apos-is-dragging) { /* stylelint-disable-line selector-no-qualifying-type */
-    td, &:hover td {
-      background: var(--a-base-4);
-    }
-  }
-
-  tr:hover, :deep(tr:hover) {
-    td {
-      background-color: var(--a-base-10);
-    }
-
-    td.apos-input-array-inline-item-controls { /* stylelint-disable-line selector-no-qualifying-type */
-      background-color: transparent;
-    }
-  }
-
   :deep(.apos-field__info) {
     padding-top: 0;
   }
@@ -119,10 +64,6 @@
     display: none;
   }
 
-  :deep(.apos-input-wrapper) {
-    padding: 0 4px;
-  }
-
   :deep(.apos-input--select) {
     min-width: 130px;
   }
@@ -167,63 +108,302 @@
   }
 }
 
-.apos-input-array-inline-standard {
-  .apos-input-array-inline-collapse {
-    position: absolute;
-    top: $spacing-quadruple;
-    left: $spacing-base;
+.apos-input-array-inline-table-row {
+  border-right: 1px solid var(--a-base-9);
+  border-bottom: 1px solid var(--a-base-9);
+  border-left: 1px solid var(--a-base-9);
+
+  &:hover,
+  &:hover :deep(td) {
+    &, td {
+      background-color: var(--a-base-10);
+    }
   }
 
-  :deep(.apos-schema) {
-    position: relative;
-    display: grid;
-    grid-template-columns: 35px auto 35px;
-    gap: 5px;
-    width: 100%;
-    padding-bottom: $spacing-base;
-    border-bottom: 1px solid var(--a-base-9);
-    transition: background-color 300ms ease;
+  &:focus, &:focus-visible {
+    outline: 1px solid var(--a-primary-transparent-50);
+  }
+
+  &.apos-is-ghost,
+  :deep(.apos-is-ghost) {
+    opacity: 0;
+  }
+
+  &.apos-is-dragging,
+  :deep(.apos-is-dragging) {
+    // stylelint-disable declaration-no-important
+    opacity: 1 !important; // Opacity applied inline by drag library
+    // stylelint-enable declaration-no-important
+    display: flex;
+    align-items: center;
+    outline: 2px solid var(--a-primary-transparent-50);
+
+    .apos-input-array-inline-table-cell--controls,
+    .apos-input-array-inline-table-cell--controls--menu {
+      flex: 0;
+      width: auto;
+      background-color: var(--a-background-primary);
+    }
+  }
+}
+
+.apos-input-array-inline-table-row--engaged {
+  &, &:focus, &:focus-visible {
+    outline: 2px solid var(--a-primary-transparent-50);
+  }
+}
+
+.apos-input-array-inline-table-cell-drag-handle {
+  &:focus, &:focus-visible {
+    outline: 1px solid var(--a-primary-transparent-50);
+  }
+}
+
+.apos-input-array-inline-table-cell,
+.apos-input-array-inline-table-row :deep(td),
+:deep(.apos-input-array-inline-table-cell) {
+  padding: $spacing-base;
+  border: 1px solid var(--a-base-9);
+  vertical-align: middle;
+  text-align: center;
+  transition: background-color 300ms ease;
+  background-color: var(--a-background-primary);
+
+  &:focus {
+    border: 1px solid var(--a-primary-transparent-50);
+  }
+
+  &.apos-input-array-inline-table-cell--controls {
+    width: 20px;
+    padding: 0 $spacing-base;
+  }
+
+  &.apos-input-array-inline-table-cell--controls--menu {
+    :deep(.apos-context-menu) {
+      width: 30px;
+    }
+  }
+}
+
+.apos-input-array-inline-table-header-cell {
+  @include type-base;
+
+  & {
+    height: 40px;
+    padding-right: $spacing-base;
+    padding-left: $spacing-base;
+    text-align: left;
+    background-color: var(--a-base-9);
+  }
+}
+
+.apos-input-array-inline-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 $spacing-half;
+  transition: all 0.3 var(--a-transition-timing-bounce);
+
+  &:hover {
+    cursor: grab;
+  }
+
+  &:active,
+  &:hover:active {
+    cursor: grabbing;
+  }
+
+  :deep(.apos-button) {
+    // stylelint-disable scale-unlimited/declaration-strict-value
+    color: currentcolor;
+
+    &:focus {
+      color: currentcolor;
+      background-color: transparent;
+    }
 
     &:hover {
+      outline: 1px solid var(--a-base-6);
+    }
+  }
+
+  :deep(.apos-button--subtle.apos-is-active) {
+    color: currentcolor;
+    outline: 1px solid var(--a-base-7);
+  }
+  // stylelint-enable scale-unlimited/declaration-strict-value
+}
+
+.apos-input-array-inline-header-ui {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.apos-input-array-inline-header-ui-element {
+  &.apos-indicator,
+  :deep(.apos-button),
+  :deep(.apos-button--icon-only.apos-button--small) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+  }
+}
+
+.apos-input-array-inline-body {
+  overflow: hidden;
+  max-height: 999px;
+  padding: $spacing-base 0;
+  transition: all 400ms ease;
+
+  &.collapse-enter-from,
+  &.collapse-leave-to {
+    max-height: 0;
+  }
+
+  &.collapse-enter-active,
+  &.collapse-leave-active {
+    transition: max-height 400ms ease;
+  }
+}
+
+.apos-input-array-inline-label {
+  @include type-large;
+
+  & {
+    margin: 0;
+    padding-top: $spacing-base;
+    padding-bottom: $spacing-base;
+    // stylelint-disable scale-unlimited/declaration-strict-value
+    color: currentcolor;
+    // stylelint-enable scale-unlimited/declaration-strict-value
+    text-align: left;
+    transition: background-color 400ms ease;
+  }
+}
+
+.apos-input-array-inline-all-controls {
+  display: flex;
+  gap: $spacing-double;
+
+  :deep(.apos-button) {
+    color: var(--a-primary);
+
+    &:hover, &:hover * {
+      color: var(--a-primary);
+      text-decoration: underline;
+    }
+  }
+}
+
+.apos-input-array-inline-standard {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-base;
+
+  .apos-input-array-inline-item {
+    @include apos-transition();
+
+    & {
+      overflow: hidden;
+      padding: 0;
+      border: 1px solid var(--a-base-9);
+      outline: 1px solid transparent;
       background-color: var(--a-base-10);
+      border-radius: var(--a-border-radius);
     }
 
-    .apos-field.apos-field--small,
-    .apos-field.apos-field--micro,
-    .apos-field.apos-field--margin-micro {
-      margin-bottom: 0;
+    &.apos-is-dragging {
+      // stylelint-disable declaration-no-important
+      opacity: 0 !important; // Opacity applied inline by drag library
+      // stylelint-enable declaration-no-important
     }
 
-    & > div {
-      grid-column: 2;
+    &.apos-is-ghost {
+      border-color: var(--a-primary-transparent-50);
+      box-shadow: var(--a-box-shadow)
     }
 
-    &.apos-input-array-inline-item--active {
-      background-color: var(--a-base-10);
-      border-bottom: 1px solid var(--a-base-6);
+    &--open .apos-input-array-inline-header {
+      background: var(--a-base-8);
     }
 
-    &.apos-input-array-inline-item--active > div {
-      display: block;
+    &:focus {
+      outline: 1px solid var(--a-primary-transparent-50);
+      box-shadow: var(--a-box-shadow);
     }
 
-    .apos-input-array-inline-label,
-    .apos-input-array-inline-item-controls,
-    .apos-input-array-inline-item-controls--remove {
-      display: block;
+    &--engaged,
+    &--engaged:focus,
+    &.apos-is-ghost {
+      outline: 2px solid var(--a-primary-transparent-50);
+    }
+
+    &--engaged > .apos-input-array-inline-header,
+    &--engaged:focus > .apos-input-array-inline-header,
+    &.apos-is-ghost > .apos-input-array-inline-header {
+      border-color: var(--a-primary-transparent-50);
+      color: var(--a-text-inverted);
+      background: var(--a-primary-transparent-90);
+    }
+
+    &--drag-disabled .apos-input-array-inline-header-ui--left {
+      padding-left: $spacing-base;
+    }
+
+    :deep(.apos-input-array-inline-empty) {
+      border-color: var(--a-base-7);
+      background-color: var(--a-background-primary);
+    }
+
+    :deep(.apos-input-array-inline-empty .apos-input-array-inline-empty-label) {
+      color: var(--a-text-primary);
+    }
+
+    :deep(.apos-input-array-inline-empty .material-design-icon__svg) {
+      fill: var(--a-base-7);
+    }
+
+    // stylelint-disable max-nesting-depth
+    .apos-input-array-inline-item {
+      border-color: var(--a-base-8);
+      background-color: var(--a-background-primary);
+
+      &--engaged,
+      &--engaged .apos-input-array-inline-label,
+      &--engaged > .apos-input-array-inline-header {
+        color: var(--a-text-primary);
+      }
+
+      .apos-input-array-inline-header {
+        background-color: var(--a-base-8);
+      }
+    }
+    // stylelint-enable max-nesting-depth
+  }
+
+  :deep(.apos-schema) {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-double;
+    margin: 0 $spacing-double;
+    transition: background-color 300ms ease;
+
+    .apos-field,
+    .apos-field.apos-field--small,
+    .apos-field.apos-field--micro,
+    .apos-field.apos-field--margin-micro {
+      margin-bottom: 0;
     }
 
-    .apos-input-array-inline-label {
-      @include type-label;
+    &.apos-input-array-inline-table-row--active {
+      background-color: var(--a-base-10);
     }
 
-    .apos-input-array-inline-label {
-      margin: 0;
-      padding-top: $spacing-base;
-      padding-bottom: $spacing-base;
-      text-align: left;
-      transition: background-color 300ms ease;
-      grid-column: 2;
+    &.apos-input-array-inline-table-row > div {
+      display: block;
     }
 
     .apos-input-array-inline-label:hover {
@@ -232,13 +412,16 @@
 
     .apos-input-array-inline-item-controls {
       padding: $spacing-base;
-      grid-column: 1;
-      grid-row: 1;
     }
+  }
+}
 
-    .apos-input-array-inline-item-controls--remove {
-      grid-column: 3;
-      grid-row: 1;
-    }
+.apos-input-array-inline-add-button {
+  margin-top: $spacing-base;
+}
+
+.apos-input-array-inline-array--is-dragging {
+  :deep(*::selection) {
+    background-color: transparent;
   }
 }

package/modules/@apostrophecms/template/views/outerLayoutBase.html

@@ -29,6 +29,7 @@
         <div id="apos-notification"></div>
       {% endif %}
     {% endblock %}
+    <div data-apos-context-label></div>
     <div data-apos-refreshable>
       {% block beforeMain %}{% endblock %}
       {% block mainAnchor %}<a name="main"></a>{% endblock %}

package/modules/@apostrophecms/ui/ui/apos/components/AposButton.vue

@@ -14,7 +14,7 @@
       class="apos-button"
       :class="modifierClass"
       :tabindex="tabindex"
-      :disabled="isDisabled"
+      :disabled="isDisabled ? isDisabled : null"
       :type="buttonType"
       :role="role"
       :style="{color: textColor}"
@@ -673,6 +673,7 @@ export default {
     &:hover:not([disabled]),
     &:focus:not([disabled]) {
       transform: none;
+      box-shadow: none;
     }
   }
 

package/modules/@apostrophecms/ui/ui/apos/components/AposContextMenu.vue

@@ -268,6 +268,7 @@ async function setDropdownPosition() {
 
 function handleKeyboard(event) {
   if (event.key === 'Escape') {
+    event.stopImmediatePropagation();
     hide();
   }
 }
@@ -332,11 +333,13 @@ function handleKeyboard(event) {
 .apos-context-menu__items {
   @include apos-list-reset();
 
-  display: inline-block;
-  list-style-type: none;
-  width: max-content;
-  margin: none;
-  margin-block: 0;
-  padding: 10px 0;
+  & {
+    display: inline-block;
+    list-style-type: none;
+    width: max-content;
+    margin: none;
+    margin-block: 0;
+    padding: 10px 0;
+  }
 }
 </style>

package/modules/@apostrophecms/ui/ui/apos/components/AposContextMenuDialog.vue

@@ -138,12 +138,14 @@ function emitSetArrow(arrowEl) {
 .apos-context-menu__items {
   @include apos-list-reset();
 
-  display: inline-block;
-  list-style-type: none;
-  width: max-content;
-  margin: none;
-  margin-block: 0;
-  padding: 10px 0;
+  & {
+    display: inline-block;
+    list-style-type: none;
+    width: max-content;
+    margin: none;
+    margin-block: 0;
+    padding: 10px 0;
+  }
 }
 
 .apos-context-menu__dialog :deep(.apos-schema .apos-field) {

package/modules/@apostrophecms/ui/ui/apos/components/AposContextMenuItem.vue

@@ -9,7 +9,7 @@
       :data-apos-test-selected="selected"
       :data-apos-test-danger="danger"
       :data-apos-test-disabled="disabled"
-      @click="click"
+      v-on="disabled ? {} : { click: click }"
     >
       {{ $t(label) }}
     </button>
@@ -38,12 +38,12 @@ export default {
       return this.menuItem.modifiers?.includes('danger');
     },
     disabled() {
-      return this.menuItem.modifiers?.includes('disabled');
+      return !!this.menuItem.modifiers?.includes('disabled');
     },
     modifiers() {
       const classes = [];
       if (this.menuItem.modifiers) {
-        this.menuItem.modifiers.forEach(modifier => {
+        this.menuItem.modifiers.forEach((modifier) => {
           classes.push(`apos-context-menu__button--${modifier}`);
         });
       }
@@ -69,69 +69,70 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .apos-context-menu__item {
-    display: flex;
+.apos-context-menu__item {
+  display: flex;
+}
+
+.apos-context-menu__button {
+  @include type-base;
+
+  & {
+    display: inline-block;
+    flex-grow: 1;
+    width: 100%;
+    padding: 10px 20px;
+    border: none;
+    color: var(--a-base-1);
+    text-align: left;
+    background-color: var(--a-background-primary);
   }
 
-  .apos-context-menu__button {
-    @include type-base;
+  &:hover {
+    cursor: pointer;
+    color: var(--a-text-primary);
+  }
 
-    & {
-      display: inline-block;
-      flex-grow: 1;
-      width: 100%;
-      padding: 10px 20px;
-      border: none;
-      color: var(--a-base-1);
-      text-align: left;
-      background-color: var(--a-background-primary);
-    }
+  &:focus {
+    outline: none;
+    color: var(--a-text-primary);
+  }
 
-    &:hover {
-      cursor: pointer;
-      color: var(--a-text-primary);
-    }
+  &:active {
+    color: var(--a-base-1);
+  }
+
+  &--danger {
+    color: var(--a-danger);
 
-    &:focus {
-      outline: none;
-      color: var(--a-text-primary);
+    &:hover {
+      color: var(--a-danger-button-hover);
     }
 
+    &:focus,
     &:active {
-      color: var(--a-base-1);
+      color: var(--a-danger-button-active);
     }
+  }
 
-    &--danger {
-      color: var(--a-danger);
-
-      &:hover {
-        color: var(--a-danger-button-hover);
-      }
-
-      &:focus, &:active {
-        color: var(--a-danger-button-active);
-      }
-    }
+  &--primary {
+    color: var(--a-primary);
 
-    &--primary {
+    &:hover,
+    &:focus,
+    &:active {
       color: var(--a-primary);
-
-      &:hover,
-      &:focus,
-      &:active {
-        color: var(--a-primary);
-      }
     }
+  }
 
-    &--disabled {
-      color: var(--a-base-5);
+  &--disabled {
+    color: var(--a-base-5);
 
-      &:hover,
-      &:focus,
-      &:active {
-        cursor: not-allowed;
-        color: var(--a-base-5);
-      }
+    &:hover,
+    &:focus,
+    &:active {
+      cursor: not-allowed;
+      color: var(--a-base-5);
     }
   }
+}
 </style>