diff --git a/package-lock.json b/package-lock.json index 13863fbb69..ceaa8992f7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,7 +7,7 @@ "name": "statamic", "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", @@ -4003,9 +4003,9 @@ } }, "node_modules/@shopify/draggable": { - "version": "1.0.0-beta.8", - "resolved": "https://registry.npmjs.org/@shopify/draggable/-/draggable-1.0.0-beta.8.tgz", - "integrity": "sha512-9IeBPQM93Ad4qFKUopwuTClzoST/1OId4MaSd/8FB5ScCL2tl25UaOGNR8E2hjiL7xK4LN5+I1Ews6amS7YAiA==" + "version": "1.0.0-beta.12", + "resolved": "https://registry.npmjs.org/@shopify/draggable/-/draggable-1.0.0-beta.12.tgz", + "integrity": "sha512-Un/Dn61sv2er9yjDXLGWMauCOWBb0BMbm0yzmmrD+oUX2/x50yhNJASTsCRdndUCpWlqYfZH8jEfaOgTPsKc/g==" }, "node_modules/@simonwep/pickr": { "version": "1.8.2", diff --git a/package.json b/package.json index b1a75ea525..6c7fa7f1b1 100644 --- a/package.json +++ b/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", diff --git a/resources/css/components/blueprints.css b/resources/css/components/blueprints.css index 6ebf873a31..d9f8d9e156 100644 --- a/resources/css/components/blueprints.css +++ b/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)); } - - diff --git a/resources/css/components/configure.css b/resources/css/components/configure.css index e4ead17eaf..9cdbb920d3 100644 --- a/resources/css/components/configure.css +++ b/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; } diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css index 921960eaaf..ab505559d0 100644 --- a/resources/css/components/fieldtypes/bard.css +++ b/resources/css/components/fieldtypes/bard.css @@ -193,6 +193,10 @@ } } +.set-picker .popover .popover-content { + min-width: 320px !important; +} + /* Fullscreen mode ========================================================================== */ diff --git a/resources/css/components/fieldtypes/replicator.css b/resources/css/components/fieldtypes/replicator.css index 216310d53b..302c02e112 100644 --- a/resources/css/components/fieldtypes/replicator.css +++ b/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 */ diff --git a/resources/css/components/modal.css b/resources/css/components/modal.css index c7dcf491ec..c15e2d5611 100644 --- a/resources/css/components/modal.css +++ b/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; diff --git a/resources/css/components/preview.css b/resources/css/components/preview.css index bc4338b1eb..e76a0ee559 100644 --- a/resources/css/components/preview.css +++ b/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 } diff --git a/resources/css/components/publish.css b/resources/css/components/publish.css index bec4122e48..845cb277be 100644 --- a/resources/css/components/publish.css +++ b/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; -} diff --git a/resources/css/components/settings.css b/resources/css/components/settings.css new file mode 100644 index 0000000000..0c5b8d5e56 --- /dev/null +++ b/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; + } +} diff --git a/resources/css/components/tabs.css b/resources/css/components/tabs.css index ceec3c6189..d7c87c9043 100644 --- a/resources/css/components/tabs.css +++ b/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; diff --git a/resources/css/cp.css b/resources/css/cp.css index 62a594ca5d..7b4fa46f36 100644 --- a/resources/css/cp.css +++ b/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"; diff --git a/resources/css/elements/forms.css b/resources/css/elements/forms.css index 97842f7b3f..5854a87909 100644 --- a/resources/css/elements/forms.css +++ b/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; + } } } diff --git a/resources/js/bootstrap/components.js b/resources/js/bootstrap/components.js index a4e5286d42..8c9f4799d7 100644 --- a/resources/js/bootstrap/components.js +++ b/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); diff --git a/resources/js/components/DropdownList.vue b/resources/js/components/DropdownList.vue index 7c1dde5802..099d212a63 100644 --- a/resources/js/components/DropdownList.vue +++ b/resources/js/components/DropdownList.vue @@ -26,6 +26,11 @@ export default { type: Boolean, default: false } + }, + computed: { + strategy() { + return this.scroll ? 'fixed' : 'absolute'; + } } } diff --git a/resources/js/components/Popover.vue b/resources/js/components/Popover.vue index c20e7e8dcc..f83e02faa4 100644 --- a/resources/js/components/Popover.vue +++ b/resources/js/components/Popover.vue @@ -1,5 +1,5 @@ diff --git a/resources/js/components/blueprints/TabContent.vue b/resources/js/components/blueprints/TabContent.vue new file mode 100644 index 0000000000..ab35b1c5b4 --- /dev/null +++ b/resources/js/components/blueprints/TabContent.vue @@ -0,0 +1,57 @@ + + + diff --git a/resources/js/components/blueprints/SectionSettings.vue b/resources/js/components/blueprints/TabSettings.vue similarity index 86% rename from resources/js/components/blueprints/SectionSettings.vue rename to resources/js/components/blueprints/TabSettings.vue index e95a510c79..e01bfe7060 100644 --- a/resources/js/components/blueprints/SectionSettings.vue +++ b/resources/js/components/blueprints/TabSettings.vue @@ -3,7 +3,7 @@
- Section + {{ __('Tabs') }}
@@ -13,9 +13,9 @@
-
+
@@ -39,12 +39,12 @@ export default { components: { PublishField }, props: { - section: Object + tab: Object }, computed: { fields() { - return this.section.fields.map(field => { + return this.tab.fields.map(field => { const config = field.config || {}; return { diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue new file mode 100644 index 0000000000..8844f4bd77 --- /dev/null +++ b/resources/js/components/blueprints/Tabs.vue @@ -0,0 +1,287 @@ + + + diff --git a/resources/js/components/collections/EditForm.vue b/resources/js/components/collections/EditForm.vue index ffe570f232..fe231fc7ce 100644 --- a/resources/js/components/collections/EditForm.vue +++ b/resources/js/components/collections/EditForm.vue @@ -19,7 +19,7 @@
- diff --git a/resources/js/components/configure/Sections.vue b/resources/js/components/configure/Tabs.vue similarity index 65% rename from resources/js/components/configure/Sections.vue rename to resources/js/components/configure/Tabs.vue index 5819ba0117..55e9bf5d13 100644 --- a/resources/js/components/configure/Sections.vue +++ b/resources/js/components/configure/Tabs.vue @@ -1,14 +1,14 @@ @@ -40,7 +40,7 @@ export default { const state = this.$store.state.publish[this.storeName]; return { - active: state.blueprint.sections[0].handle, + active: state.blueprint.tabs[0].handle, containerWidth: null } }, @@ -51,18 +51,18 @@ export default { return this.$store.state.publish[this.storeName]; }, - sections() { - return this.state.blueprint.sections; + tabs() { + return this.state.blueprint.tabs; }, - mainSections() { - if (! this.shouldShowSidebar) return this.sections; + mainTabs() { + if (! this.shouldShowSidebar) return this.tabs; if (this.active === "sidebar") { - this.active = this.state.blueprint.sections[0].handle + this.active = this.state.blueprint.tabs[0].handle } - return _.filter(this.sections, section => section.handle != 'sidebar'); + return _.filter(this.tabs, tab => tab.handle != 'sidebar'); }, actionsPortal() { diff --git a/resources/js/components/data-list/Action.vue b/resources/js/components/data-list/Action.vue index 08db46cf4a..dbc286cff0 100644 --- a/resources/js/components/data-list/Action.vue +++ b/resources/js/components/data-list/Action.vue @@ -63,7 +63,7 @@ export default { data() { return { confirming: false, - fieldset: {sections:[{fields:this.action.fields}]}, + fieldset: {tabs:[{fields:this.action.fields}]}, values: this.action.values, } }, diff --git a/resources/js/components/data-list/ColumnPicker.vue b/resources/js/components/data-list/ColumnPicker.vue index a1ecc623fd..dd37ad9fc3 100644 --- a/resources/js/components/data-list/ColumnPicker.vue +++ b/resources/js/components/data-list/ColumnPicker.vue @@ -1,5 +1,5 @@