[4.x] Blueprints

package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.2.5",
-    "@shopify/draggable": "^1.0.0-beta.8",
+    "@shopify/draggable": "^1.0.0-beta.12",
     "@simonwep/pickr": "^1.7.4",
     "@tiptap/core": "^2.0.0-beta.217",
     "@tiptap/extension-blockquote": "^2.0.0-beta.217",

resources/css/components/blueprints.css

@@ -3,7 +3,7 @@
    ========================================================================== */
 
 .blueprint-section {
-    @apply p-2 min-h-40 outline-none;
+    @apply p-2 min-h-40 outline-none w-full;
 
     &.draggable-source--is-dragging {
         opacity: 0.5;
@@ -37,12 +37,6 @@
     }
 }
 
-/*  Use specific selector because we don't want it to happen */
-/*  when used inside  a grid field configuratormajig. */
-.blueprint-section .blueprint-section-field-actions > div {
-    @apply w-1/2;
-}
-
 .blueprint-section-import {
     &:before {
         content: '';
@@ -69,7 +63,7 @@
 }
 
 .blueprint-add-section-button {
-    @apply relative w-full border border-gray-500 border-dashed rounded flex justify-center items-center text-gray-700;
+    @apply relative w-full border border-gray-500 border-dashed rounded-lg flex justify-center items-center text-gray-700;
 
     &:hover {
         @apply border-gray text-gray-950;
@@ -88,5 +82,3 @@
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
 }
-
-

resources/css/components/configure.css

@@ -2,7 +2,7 @@
    CONFIGURE COMPONENT: A variation of the publish component
    ========================================================================== */
 
-   .configure-section {
+   .configure-tab {
        .publish-fields .form-group:not(:last-child) {
            @apply border-b;
        }

resources/css/components/fieldtypes/bard.css

@@ -193,6 +193,10 @@
     }
 }
 
+.set-picker .popover .popover-content {
+    min-width: 320px !important;
+}
+
 
 /* Fullscreen mode
    ========================================================================== */

resources/css/components/fieldtypes/replicator.css

@@ -57,7 +57,7 @@
 }
 
 .replicator-set-picker-between {
-    @apply absolute top-0 -mt-8 w-full text-center;
+    @apply absolute top-0 -mt-8 w-full;
 }
 
 /*  Extra contrast when full width */

resources/css/components/modal.css

@@ -2,6 +2,10 @@
    MODALS
    ========================================================================== */
 
+.v--modal {
+    @apply rounded-lg !important;
+}
+
 .v--modal-overlay {
     z-index: 10000 !important;
     background: hsla(210, 20%, 10%, .15) !important;

resources/css/components/preview.css

@@ -25,21 +25,11 @@
     z-index: 1;
 }
 
-.live-preview .publish-tabs {
-    @apply bg-gray-300 ml-0 pl-0;
-    .tab-button {
-        border-radius: 0;
-        height: 100%;
-        min-width: 100px;
-        border: none;
-    }
-}
-
 .live-preview .tabs-container {
     @apply bg-gray-300;
 }
 
-.live-preview .publish-section-actions-footer {
+.live-preview .publish-tab-actions-footer {
     display: none;
 }
 
@@ -96,18 +86,18 @@
 /*  We only want the animation to happen when its on the regular publish page. */
 /*  When portal-ed into live preview, it won't be inside .workspace */
 .workspace {
-    .live-preview-sections-drop-enter-active,
-    .live-preview-sections-drop-leave-active {
+    .live-preview-tabs-drop-enter-active,
+    .live-preview-tabs-drop-leave-active {
         transition: all 0.2s;
     }
-    .live-preview-sections-drop-enter-active {
+    .live-preview-tabs-drop-enter-active {
         transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275)
     }
-    .live-preview-sections-drop-leave-active {
+    .live-preview-tabs-drop-leave-active {
         transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
     }
-    .live-preview-sections-drop-enter,
-    .live-preview-sections-drop-leave-to {
+    .live-preview-tabs-drop-enter,
+    .live-preview-tabs-drop-leave-to {
         transform: translateY(100px);
         opacity: 0;
     }
@@ -122,7 +112,7 @@
     @apply p-6 bg-gray-300;
 }
 
-/*  remove shadow of sections when its narrow enough to be no longer be displayed as sections. */
-.live-preview-fields-narrow .publish-section {
+/*  remove shadow of tabs when its narrow enough to be no longer be displayed as tabs. */
+.live-preview-fields-narrow .publish-tab {
     @apply shadow-none
 }

resources/css/components/publish.css

@@ -76,12 +76,16 @@ code.parent-url {
     @apply flex items-center;
 }
 
+.publish-section-header {
+    @apply px-5 pt-4 pb-3 border-b border-gray-400 bg-gray-100 rounded-t-lg;
+}
+
 .publish-sidebar {
     @apply shrink-0;
     margin-left: 20px;
     width: 300px;
 
-    .publish-section-actions {
+    .publish-tab-actions {
         @apply border-b;
     }
 
@@ -90,7 +94,7 @@ code.parent-url {
     }
 }
 
-.publish-section-actions-footer {
+.publish-tab-actions-footer {
     @apply mt-6;
 }
 
@@ -99,7 +103,3 @@ code.parent-url {
     top: 0;
     z-index: 1000;
 }
-
-.publish-section:not(:empty) {
-    @apply shadow bg-white rounded-md w-full;
-}

resources/css/components/settings.css

@@ -0,0 +1,37 @@
+.config-field {
+    @apply md:flex border-b border-gray-400 w-full;
+    @apply p-3 @sm:p-4 m-0;
+
+    .field-inner {
+        @apply w-full md:w-1/2 md:pr-8;
+    }
+
+    .field-inner + div {
+        @apply w-full md:w-1/2;
+    }
+
+    .help-block {
+        @apply mb-0;
+    }
+
+    .help-block p:last-child {
+        @apply mb-0 !important;
+    }
+}
+
+.card .publish-fields .config-field:last-child {
+    @apply border-b-0;
+}
+
+.config-field.full-width-setting {
+    @apply md:flex-col;
+    .field-inner {
+        @apply w-full;
+    }
+    .field-inner + div {
+        @apply w-full;
+    }
+    .help-block p:last-child {
+        @apply mb-4 !important;
+    }
+}

resources/css/components/tabs.css

@@ -2,13 +2,8 @@
    TABS
    ========================================================================== */
 
-
 .tabs-container {
-    @apply relative;
-
-    &.offset-for-sidebar {
-        width: calc(100% - 320px);
-    }
+    @apply w-full border-b text-md relative flex;
 
    .fade-left, .fade-right {
         @apply absolute w-4 inset-y-0 from-gray-300 pointer-events-none z-10;
@@ -23,49 +18,29 @@
     }
 }
 
-.tabs {
-    @apply flex items-end overflow-hidden px-2 -ml-2;
-    height: 48px;
+.card .tabs-container .fade-left, .card .tabs-container .fade-right {
+    @apply from-white;
+}
 
+.tabs {
+    @apply flex space-x-2 overflow-hidden relative w-full max-w-full;
     &-scrolled {
         @apply pl-0 ml-0;
     }
+}
 
-    .tab-button {
-        @apply whitespace-nowrap bg-gray-100 py-1 px-4 shrink-0 leading-tight text-xs w-auto relative flex items-center justify-center rounded-t-md shadow border-b border-gray-300 select-none;
-        height: 94%;
-        min-height: 94%;
-    }
-
-    .tab-button:hover {
-        @apply bg-white;
-    }
-    .tab-button:active {
-        @apply bg-white text-blue;
-    }
-
-    .tab-button:focus {
-        @apply bg-white text-blue border-b-0 ring-1 ring-inset;
-    }
-
-    .tab-button.active {
-        @apply bg-white text-blue border-t-2 border-blue relative h-full min-h-full border-b-0 outline-none;
-        z-index: 1;
+.tab-button {
+    @apply flex items-center px-2 py-2 text-gray-700 select-none border-b-2 border-transparent whitespace-nowrap shrink-0;
+    &:hover {
+        @apply text-gray-800;
     }
-
-    .tab-button:focus {
-        @apply border-t;
+    &:focus-visible {
+        @apply ring-inset ring-2 ring-blue-500 outline-none rounded-t;
     }
-
-    .tab-button.ghost {
-        @apply bg-transparent relative h-full min-h-full shadow-none border-none text-gray-500 px-6;
-        min-width: 0;
-        &:hover {
-            @apply text-blue;
-        }
+    &.active {
+        @apply text-blue-500 border-blue-500;
     }
-
-    .tab-button.has-error {
+    &.has-error {
         @apply text-red-500;
 
         &.active {
@@ -75,20 +50,9 @@
 }
 
 
-@screen md {
-    .tabs .tab-button {
-        min-width: 120px;
-    }
-}
-
-
 /* Responsive Wangjangling
   ========================================================================== */
 
-@screen md {
-    .tabs .tab-button { @apply text-base; }
-}
-
 .pill-tab {
     @apply text-gray-700 flex items-center focus:outline-none px-2 py-1 rounded;
 

resources/css/cp.css

@@ -40,6 +40,7 @@
 @import "components/progress";
 @import "components/revisions";
 @import "components/roles";
+@import "components/settings";
 @import "components/shortcuts";
 @import "components/sortable";
 @import "components/stacks";

resources/css/elements/forms.css

@@ -162,6 +162,9 @@ input.input-text-minimal:read-only,
 
     .option {
         @apply mr-4 mb-3;
+        &:first-child {
+            @apply mt-3;
+        }
     }
 }
 

resources/js/bootstrap/components.js

@@ -9,7 +9,8 @@ import Fields from '../components/publish/Fields.vue';
 import FieldsContainer from '../components/publish/FieldsContainer.vue'; // deprecated
 import Field from '../components/publish/Field.vue';
 import FieldMeta from '../components/publish/FieldMeta.vue';
-import ConfigureSections from '../components/configure/Sections.vue';
+import ConfigureTabs from '../components/configure/Tabs.vue';
+import PublishTabs from '../components/publish/Tabs.vue';
 import PublishSections from '../components/publish/Sections.vue';
 import PublishValidationErrors from '../components/publish/ValidationErrors.vue';
 import FormGroup from '../components/publish/FormGroup.vue';
@@ -76,7 +77,8 @@ Vue.component('publish-fields', Fields);
 Vue.component('publish-fields-container', FieldsContainer);
 Vue.component('publish-field', Field);
 Vue.component('publish-field-meta', FieldMeta);
-Vue.component('configure-sections', ConfigureSections);
+Vue.component('configure-tabs', ConfigureTabs);
+Vue.component('publish-tabs', PublishTabs);
 Vue.component('publish-sections', PublishSections);
 Vue.component('publish-validation-errors', PublishValidationErrors);
 Vue.component('form-group', FormGroup);

resources/js/components/DropdownList.vue

@@ -26,6 +26,11 @@ export default {
             type: Boolean,
             default: false
         }
+    },
+    computed: {
+        strategy() {
+            return this.scroll ? 'fixed' : 'absolute';
+        }
     }
 
 }