diff --git a/resources/css/components/blueprints.css b/resources/css/components/blueprints.css index 8a0667f5497..367f998efb1 100644 --- a/resources/css/components/blueprints.css +++ b/resources/css/components/blueprints.css @@ -2,14 +2,14 @@ BLUEPRINTS ========================================================================== */ -.blueprint-section { +.blueprint-tab { @apply p-2 min-h-40 outline-none; &.draggable-source--is-dragging { opacity: 0.5; } - &.draggable-mirror .blueprint-section-card { + &.draggable-mirror .blueprint-tab-card { @apply shadow-lg; } } @@ -20,10 +20,10 @@ background: rgba(0, 0, 0, 0.01) url('../../svg/drag-dots.svg') 50% 50% no-repeat; } -.blueprint-section-field { +.blueprint-tab-field { @apply relative mb-2 px-1 z-10 outline-none; - .blueprint-section-field-inner { + .blueprint-tab-field-inner { @apply relative border rounded bg-gray-200 shadow-sm flex outline-none z-10; } @@ -38,11 +38,11 @@ /* 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 { +.blueprint-tab .blueprint-tab-field-actions > div { @apply w-1/2; } -.blueprint-section-import { +.blueprint-tab-import { &:before { content: ''; @apply border rounded absolute bg-gray-200 shadow-sm; @@ -52,14 +52,14 @@ /* These are applied here rather than the utility classes so they don't override */ /* the inline widths defined by the draggable library. */ -.blueprint-section-field-w-1\/4 { @apply w-1/4 }; -.blueprint-section-field-w-1\/3 { @apply w-1/3 }; -.blueprint-section-field-w-1\/2 { @apply w-1/2 }; -.blueprint-section-field-w-2\/3 { @apply w-2/3 }; -.blueprint-section-field-w-3\/4 { @apply w-3/4 }; -.blueprint-section-field-w-full { @apply w-full }; - -.blueprint-add-section-container { +.blueprint-tab-field-w-1\/4 { @apply w-1/4 }; +.blueprint-tab-field-w-1\/3 { @apply w-1/3 }; +.blueprint-tab-field-w-1\/2 { @apply w-1/2 }; +.blueprint-tab-field-w-2\/3 { @apply w-2/3 }; +.blueprint-tab-field-w-3\/4 { @apply w-3/4 }; +.blueprint-tab-field-w-full { @apply w-full }; + +.blueprint-add-tab-container { @apply p-2 flex min-h-40; .draggable-container--is-dragging & { @@ -67,18 +67,18 @@ } } -.blueprint-add-section-button { +.blueprint-add-tab-button { @apply relative w-full border border-gray-500 border-dashed rounded flex justify-center items-center text-gray-700; &:hover { @apply border-gray text-gray-950; } - .blueprint-section-draggable-zone { + .blueprint-tab-draggable-zone { @apply absolute inset-0 p-4; } - .blueprint-section-field { + .blueprint-tab-field { @apply bg-white; } } diff --git a/resources/css/components/configure.css b/resources/css/components/configure.css index e4ead17eafe..9cdbb920d3a 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/preview.css b/resources/css/components/preview.css index bd2e6920efc..aa4ecd1613c 100644 --- a/resources/css/components/preview.css +++ b/resources/css/components/preview.css @@ -39,7 +39,7 @@ @apply bg-gray-300; } -.live-preview .publish-section-actions-footer { +.live-preview .publish-tab-actions-footer { display: none; } @@ -95,18 +95,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; } @@ -121,7 +121,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 3c8d4e93ae4..52912c183b4 100644 --- a/resources/css/components/publish.css +++ b/resources/css/components/publish.css @@ -81,7 +81,7 @@ code.parent-url { margin-left: 20px; width: 300px; - .publish-section-actions { + .publish-tab-actions { @apply border-b; } @@ -90,7 +90,7 @@ code.parent-url { } } -.publish-section-actions-footer { +.publish-tab-actions-footer { @apply mt-6; } @@ -100,6 +100,6 @@ code.parent-url { z-index: 1000; } -.publish-section:not(:empty) { +.publish-tab:not(:empty) { @apply shadow bg-white rounded-md w-full; } diff --git a/resources/js/bootstrap/components.js b/resources/js/bootstrap/components.js index e79349bcdec..470be73ed7d 100644 --- a/resources/js/bootstrap/components.js +++ b/resources/js/bootstrap/components.js @@ -10,8 +10,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 PublishSections from '../components/publish/Sections.vue'; +import ConfigureTabs from '../components/configure/Tabs.vue'; +import PublishTabs from '../components/publish/Tabs.vue'; import PublishValidationErrors from '../components/publish/ValidationErrors.vue'; import FormGroup from '../components/publish/FormGroup.vue'; import LivePreview from '../components/live-preview/LivePreview.vue'; @@ -77,8 +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('publish-sections', PublishSections); +Vue.component('configure-tabs', ConfigureTabs); +Vue.component('publish-tabs', PublishTabs); Vue.component('publish-validation-errors', PublishValidationErrors); Vue.component('form-group', FormGroup); diff --git a/resources/js/components/asset-containers/CreateForm.vue b/resources/js/components/asset-containers/CreateForm.vue index 6cce292344b..cd6e77e029b 100644 --- a/resources/js/components/asset-containers/CreateForm.vue +++ b/resources/js/components/asset-containers/CreateForm.vue @@ -23,7 +23,7 @@ - + diff --git a/resources/js/components/asset-containers/EditForm.vue b/resources/js/components/asset-containers/EditForm.vue index c1a6b8498c5..edc659ab3bf 100644 --- a/resources/js/components/asset-containers/EditForm.vue +++ b/resources/js/components/asset-containers/EditForm.vue @@ -12,7 +12,7 @@ @updated="values = $event" >
- +
-
-

{{ __('Tab Sections') }}

-

{{ __('messages.tab_sections_instructions') }}

-
- +
+

{{ __('Tabs') }}

+

{{ __('messages.tabs_instructions') }}

+
+
-
@@ -48,26 +48,26 @@ diff --git a/resources/js/components/blueprints/Section.vue b/resources/js/components/blueprints/Tab.vue similarity index 76% rename from resources/js/components/blueprints/Section.vue rename to resources/js/components/blueprints/Tab.vue index 4580a9b930a..f8068b32d8c 100644 --- a/resources/js/components/blueprints/Section.vue +++ b/resources/js/components/blueprints/Tab.vue @@ -1,21 +1,21 @@ - +
+ + diff --git a/resources/js/components/fieldtypes/grid/FieldsFieldtype.vue b/resources/js/components/fieldtypes/grid/FieldsFieldtype.vue index 1f1220517b6..9a2dc6edc15 100644 --- a/resources/js/components/fieldtypes/grid/FieldsFieldtype.vue +++ b/resources/js/components/fieldtypes/grid/FieldsFieldtype.vue @@ -64,8 +64,8 @@ export default { }, makeSortable() { - new Sortable(this.$el.querySelector('.blueprint-section-draggable-zone'), { - draggable: '.blueprint-section-field', + new Sortable(this.$el.querySelector('.blueprint-tab-draggable-zone'), { + draggable: '.blueprint-tab-field', handle: '.blueprint-drag-handle', mirror: { constrainDimensions: true }, plugins: [Plugins.SwapAnimation] diff --git a/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue b/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue index e75b6f3e5f7..7929e635f20 100644 --- a/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue +++ b/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue @@ -2,13 +2,13 @@
-
@@ -16,26 +16,26 @@