Skip to content

[4.x] Blueprints: Rename sections to tabs#7533

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jasonvarga merged 10 commits into from
Mar 2, 2023
Merged

[4.x] Blueprints: Rename sections to tabs #7533

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9261252
Rename all references to (Blueprint) Sections to Tabs
jackmcdade Feb 13, 2023
e8e16d8
Fix some tests
jackmcdade Feb 13, 2023
22d667a
And fix these tests too
jackmcdade Feb 13, 2023
433fa4b
And these too
jackmcdade Feb 13, 2023
1b08076
Fix test
jackmcdade Feb 13, 2023
4ee85d4
undo whitespace changes
jasonvarga Feb 13, 2023
b8b9542
Merge branch 'master' into rename-sections-to-tabs
jasonvarga Feb 28, 2023
355383c
missed
jasonvarga Feb 28, 2023
a6af264
should have been kept plural
jasonvarga Feb 28, 2023
d15f255
more
jasonvarga Feb 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions resources/css/components/blueprints.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
}
}
Expand All@@ -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;
}

Expand All@@ -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;
Expand All@@ -52,33 +52,33 @@

/* 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 & {
display: none;
}
}

.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;
}
}
Expand Down
2 changes: 1 addition & 1 deletion resources/css/components/configure.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
}
Expand Down
18 changes: 9 additions & 9 deletions resources/css/components/preview.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -39,7 +39,7 @@
@apply bg-gray-300;
}

.live-preview .publish-section-actions-footer {
.live-preview .publish-tab-actions-footer {
display: none;
}

Expand DownExpand Up@@ -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;
}
Expand All@@ -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
}
6 changes: 3 additions & 3 deletions resources/css/components/publish.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -81,7 +81,7 @@ code.parent-url {
margin-left: 20px;
width: 300px;

.publish-section-actions {
.publish-tab-actions {
@apply border-b;
}

Expand All@@ -90,7 +90,7 @@ code.parent-url {
}
}

.publish-section-actions-footer {
.publish-tab-actions-footer {
@apply mt-6;
}

Expand All@@ -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;
}
8 changes: 4 additions & 4 deletions resources/js/bootstrap/components.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
Expand DownExpand Up@@ -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);

Expand Down
2 changes: 1 addition & 1 deletion resources/js/components/asset-containers/CreateForm.vue
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -23,7 +23,7 @@
<button type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
</div>

<configure-sections @updated="setFieldValue" :enable-sidebar="false"/>
<configure-tabs @updated="setFieldValue" :enable-sidebar="false"/>
</div>
</publish-container>

Expand Down
2 changes: 1 addition & 1 deletion resources/js/components/asset-containers/EditForm.vue
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,7 @@
@updated="values = $event"
>
<div slot-scope="{ setFieldValue }">
<configure-sections @updated="setFieldValue" :enable-sidebar="false"/>
<configure-tabs @updated="setFieldValue" :enable-sidebar="false"/>
<div class="py-4 border-t flex justify-between">
<a :href="url" class="btn" v-text="__('Cancel') "/>
<button type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
Expand Down
4 changes: 2 additions & 2 deletions resources/js/components/assets/Editor/Editor.vue
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -307,8 +307,8 @@ export default {
this.actions = data.actions;

this.fieldset = data.blueprint;
this.fields = _.chain(this.fieldset.sections)
.map(section => section.fields)
this.fields = _.chain(this.fieldset.tabs)
.map(tab => tab.fields)
.flatten(true)
.value();

Expand Down
34 changes: 17 additions & 17 deletions resources/js/components/blueprints/Builder.vue
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -29,45 +29,45 @@
</div>
</div>

<div class="content mt-10 mb-4" v-if="useSections">
<h2>{{ __('Tab Sections') }}</h2>
<p class="max-w-lg">{{ __('messages.tab_sections_instructions') }}</p>
<div v-if="errors.sections">
<small class="help-block text-red" v-for="(error, i) in errors.sections" :key="i" v-text="error" />
<div class="content mt-10 mb-4" v-if="useTabs">
<h2>{{ __('Tabs') }}</h2>
<p class="max-w-lg">{{ __('messages.tabs_instructions') }}</p>
<div v-if="errors.tabs">
<small class="help-block text-red" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
</div>
</div>

<sections
:single-section="!useSections"
:initial-sections="blueprint.sections"
@updated="sectionsUpdated"
<tabs
:single-tab="!useTabs"
:initial-tabs="blueprint.tabs"
@updated="tabsUpdated"
/>

</div>

</template>

<script>
import Sections from './Sections.vue';
import Tabs from './Tabs.vue';

export default {

components: {
Sections,
Tabs,
},

props: {
action: String,
initialBlueprint: Object,
showTitle: Boolean,
useSections: { type: Boolean, default: true },
useTabs: { type: Boolean, default: true },
isFormBlueprint: { type: Boolean, default: false },
},

data() {
return {
blueprint: this.initializeBlueprint(),
sections: [],
tabs: [],
errors: {}
}
},
Expand All@@ -85,8 +85,8 @@ export default {

watch: {

sections(sections) {
this.blueprint.sections = sections;
tabs(tabs) {
this.blueprint.tabs = tabs;
},

blueprint: {
Expand All@@ -108,8 +108,8 @@ export default {
return blueprint;
},

sectionsUpdated(sections) {
this.sections = sections;
tabsUpdated(tabs) {
this.tabs = tabs;
},

save() {
Expand Down
2 changes: 1 addition & 1 deletion resources/js/components/blueprints/Field.vue
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -11,7 +11,7 @@ export default {
default: true
},
isEditing: Boolean,
isSectionExpanded: Boolean
isTabExpanded: Boolean
}

}
Expand Down
8 changes: 4 additions & 4 deletions resources/js/components/blueprints/Fields.vue
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,7 +2,7 @@

<div class="flex flex-col text-sm">

<div class="blueprint-section-draggable-zone -mx-1"
<div class="blueprint-tab-draggable-zone -mx-1"
:class="{ 'flex flex-wrap flex-1': fields.length }"
>
<slot name="empty-state" v-if="!fields.length" />
Expand All@@ -13,7 +13,7 @@
:key="field._id"
:field="field"
:is-editing="editingField === field._id"
:is-section-expanded="isSectionExpanded"
:is-tab-expanded="isTabExpanded"
:suggestable-condition-fields="suggestableConditionFields"
:can-define-localizable="canDefineLocalizable"
@edit="$emit('field-editing', field._id)"
Expand All@@ -23,7 +23,7 @@
/>
</div>

<div class="blueprint-section-field-actions flex mt-2 -mx-1">
<div class="blueprint-tab-field-actions flex mt-2 -mx-1">
<div class="px-1">
<link-fields
:exclude-fieldset="excludeFieldset"
Expand DownExpand Up@@ -88,7 +88,7 @@ export default {
props: {
fields: Array,
editingField: {},
isSectionExpanded: Boolean,
isTabExpanded: Boolean,
suggestableConditionFields: Array,
excludeFieldset: String,
},
Expand Down
4 changes: 2 additions & 2 deletions resources/js/components/blueprints/ImportField.vue
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
<template>

<div class="blueprint-section-field blueprint-section-import blueprint-section-field-w-full">
<div class="blueprint-section-field-inner">
<div class="blueprint-tab-field blueprint-tab-import blueprint-tab-field-w-full">
<div class="blueprint-tab-field-inner">
<div class="blueprint-drag-handle w-4 border-r"></div>
<div class="flex flex-1 items-center justify-between">
<div class="flex items-center flex-1 pr-4 py-2 pl-2">
Expand Down
6 changes: 3 additions & 3 deletions resources/js/components/blueprints/RegularField.vue
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
<template>

<div class="blueprint-section-field" :class="widthClass">
<div class="blueprint-section-field-inner">
<div class="blueprint-tab-field" :class="widthClass">
<div class="blueprint-tab-field-inner">
<div class="blueprint-drag-handle w-4 border-r"></div>
<div class="flex flex-1 items-center justify-between">
<div class="flex items-center flex-1 pr-4 py-2 pl-2">
Expand DownExpand Up@@ -111,7 +111,7 @@ export default {
},

widthClass() {
if (! this.isSectionExpanded) return 'w-full';
if (! this.isTabExpanded) return 'w-full';

return `${tailwind_width_class(this.width)}`;
},
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
[4.x] Blueprints: Rename sections to tabs by jackmcdade · Pull Request #7533 · statamic/cms · GitHub
Skip to content
[4.x] Blueprints: Rename sections to tabs#7533

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jasonvarga
merged 10 commits into

from

Mar 2, 2023
 Merged


[4.x] Blueprints: Rename sections to tabs
#7533
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
9261252

Rename all references to (Blueprint) Sections to Tabs


jackmcdade Feb 13, 2023
e8e16d8

Fix some tests


jackmcdade Feb 13, 2023
22d667a

And fix these tests too


jackmcdade Feb 13, 2023
433fa4b

And these too


jackmcdade Feb 13, 2023
1b08076

Fix test


jackmcdade Feb 13, 2023
4ee85d4

undo whitespace changes


jasonvarga Feb 13, 2023
b8b9542

Merge branch 'master' into rename-sections-to-tabs


jasonvarga Feb 28, 2023
355383c

missed


jasonvarga Feb 28, 2023
a6af264

should have been kept plural


jasonvarga Feb 28, 2023
d15f255

more


jasonvarga Feb 28, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


34 changes: 17 additions & 17 deletions
resources/css/components/blueprints.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
 }
}
Expand All@@ -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;
 }

Expand All@@ -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;
Expand All@@ -52,33 +52,33 @@

/* 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 & {
 display: none;
 }
}

.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;
 }
}
Expand Down

2 changes: 1 addition & 1 deletion
resources/css/components/configure.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
 }
Expand Down

18 changes: 9 additions & 9 deletions
resources/css/components/preview.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -39,7 +39,7 @@
 @apply bg-gray-300;
}

.live-preview .publish-section-actions-footer {
.live-preview .publish-tab-actions-footer {
 display: none;
}

Expand DownExpand Up@@ -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;
 }
Expand All@@ -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
}

6 changes: 3 additions & 3 deletions
resources/css/components/publish.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -81,7 +81,7 @@ code.parent-url {
 margin-left: 20px;
 width: 300px;

 .publish-section-actions {
 .publish-tab-actions {
 @apply border-b;
 }

Expand All@@ -90,7 +90,7 @@ code.parent-url {
 }
}

.publish-section-actions-footer {
.publish-tab-actions-footer {
 @apply mt-6;
}

Expand All@@ -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;
}

8 changes: 4 additions & 4 deletions
resources/js/bootstrap/components.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
Expand DownExpand Up@@ -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);

Expand Down

2 changes: 1 addition & 1 deletion
resources/js/components/asset-containers/CreateForm.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -23,7 +23,7 @@
 <button type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
 </div>

 <configure-sections @updated="setFieldValue" :enable-sidebar="false"/>
 <configure-tabs @updated="setFieldValue" :enable-sidebar="false"/>
 </div>
 </publish-container>

Expand Down

2 changes: 1 addition & 1 deletion
resources/js/components/asset-containers/EditForm.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,7 @@
 @updated="values = $event"
 >
 <div slot-scope="{ setFieldValue }">
 <configure-sections @updated="setFieldValue" :enable-sidebar="false"/>
 <configure-tabs @updated="setFieldValue" :enable-sidebar="false"/>
 <div class="py-4 border-t flex justify-between">
 <a :href="url" class="btn" v-text="__('Cancel') "/>
 <button type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
Expand Down

4 changes: 2 additions & 2 deletions
resources/js/components/assets/Editor/Editor.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -307,8 +307,8 @@ export default {
 this.actions = data.actions;

 this.fieldset = data.blueprint;
 this.fields = _.chain(this.fieldset.sections)
 .map(section => section.fields)
 this.fields = _.chain(this.fieldset.tabs)
 .map(tab => tab.fields)
 .flatten(true)
 .value();

Expand Down

34 changes: 17 additions & 17 deletions
resources/js/components/blueprints/Builder.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -29,45 +29,45 @@
 </div>
 </div>

 <div class="content mt-10 mb-4" v-if="useSections">
 <h2>{{ __('Tab Sections') }}</h2>
 <p class="max-w-lg">{{ __('messages.tab_sections_instructions') }}</p>
 <div v-if="errors.sections">
 <small class="help-block text-red" v-for="(error, i) in errors.sections" :key="i" v-text="error" />
 <div class="content mt-10 mb-4" v-if="useTabs">
 <h2>{{ __('Tabs') }}</h2>
 <p class="max-w-lg">{{ __('messages.tabs_instructions') }}</p>
 <div v-if="errors.tabs">
 <small class="help-block text-red" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
 </div>
 </div>

 <sections
 :single-section="!useSections"
 :initial-sections="blueprint.sections"
 @updated="sectionsUpdated"
 <tabs
 :single-tab="!useTabs"
 :initial-tabs="blueprint.tabs"
 @updated="tabsUpdated"
 />

 </div>

</template>

<script>
import Sections from './Sections.vue';
import Tabs from './Tabs.vue';

export default {

 components: {
Sections,
Tabs,
 },

 props: {
 action: String,
 initialBlueprint: Object,
 showTitle: Boolean,
useSections: { type: Boolean, default: true },
useTabs: { type: Boolean, default: true },
 isFormBlueprint: { type: Boolean, default: false },
 },

 data() {
 return {
 blueprint: this.initializeBlueprint(),
sections: [],
tabs: [],
 errors: {}
 }
 },
Expand All@@ -85,8 +85,8 @@ export default {

 watch: {

sections(sections) {
 this.blueprint.sections = sections;
tabs(tabs) {
 this.blueprint.tabs = tabs;
 },

 blueprint: {
Expand All@@ -108,8 +108,8 @@ export default {
 return blueprint;
 },

sectionsUpdated(sections) {
 this.sections = sections;
tabsUpdated(tabs) {
 this.tabs = tabs;
 },

 save() {
Expand Down

2 changes: 1 addition & 1 deletion
resources/js/components/blueprints/Field.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,7 +11,7 @@ export default {
 default: true
 },
 isEditing: Boolean,
isSectionExpanded: Boolean
isTabExpanded: Boolean
 }

}
Expand Down

8 changes: 4 additions & 4 deletions
resources/js/components/blueprints/Fields.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,7 +2,7 @@

 <div class="flex flex-col text-sm">

 <div class="blueprint-section-draggable-zone -mx-1"
 <div class="blueprint-tab-draggable-zone -mx-1"
 :class="{ 'flex flex-wrap flex-1': fields.length }"
 >
 <slot name="empty-state" v-if="!fields.length" />
Expand All@@ -13,7 +13,7 @@
 :key="field._id"
 :field="field"
 :is-editing="editingField === field._id"
 :is-section-expanded="isSectionExpanded"
 :is-tab-expanded="isTabExpanded"
 :suggestable-condition-fields="suggestableConditionFields"
 :can-define-localizable="canDefineLocalizable"
 @edit="$emit('field-editing', field._id)"
Expand All@@ -23,7 +23,7 @@
 />
 </div>

 <div class="blueprint-section-field-actions flex mt-2 -mx-1">
 <div class="blueprint-tab-field-actions flex mt-2 -mx-1">
 <div class="px-1">
 <link-fields
 :exclude-fieldset="excludeFieldset"
Expand DownExpand Up@@ -88,7 +88,7 @@ export default {
 props: {
 fields: Array,
 editingField: {},
isSectionExpanded: Boolean,
isTabExpanded: Boolean,
 suggestableConditionFields: Array,
 excludeFieldset: String,
 },
Expand Down

4 changes: 2 additions & 2 deletions
resources/js/components/blueprints/ImportField.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
<template>

 <div class="blueprint-section-field blueprint-section-import blueprint-section-field-w-full">
 <div class="blueprint-section-field-inner">
 <div class="blueprint-tab-field blueprint-tab-import blueprint-tab-field-w-full">
 <div class="blueprint-tab-field-inner">
 <div class="blueprint-drag-handle w-4 border-r"></div>
 <div class="flex flex-1 items-center justify-between">
 <div class="flex items-center flex-1 pr-4 py-2 pl-2">
Expand Down

6 changes: 3 additions & 3 deletions
resources/js/components/blueprints/RegularField.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
<template>

 <div class="blueprint-section-field" :class="widthClass">
 <div class="blueprint-section-field-inner">
 <div class="blueprint-tab-field" :class="widthClass">
 <div class="blueprint-tab-field-inner">
 <div class="blueprint-drag-handle w-4 border-r"></div>
 <div class="flex flex-1 items-center justify-between">
 <div class="flex items-center flex-1 pr-4 py-2 pl-2">
Expand DownExpand Up@@ -111,7 +111,7 @@ export default {
 },

 widthClass() {
 if (! this.isSectionExpanded) return 'w-full';
 if (! this.isTabExpanded) return 'w-full';

 return `${tailwind_width_class(this.width)}`;
 },
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[4.x] Blueprints: Rename sections to tabs by jackmcdade · Pull Request #7533 · statamic/cms · GitHub
Skip to content
[4.x] Blueprints: Rename sections to tabs#7533

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jasonvarga
merged 10 commits into

from

Mar 2, 2023
 Merged


[4.x] Blueprints: Rename sections to tabs
#7533
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
9261252

Rename all references to (Blueprint) Sections to Tabs


jackmcdade Feb 13, 2023
e8e16d8

Fix some tests


jackmcdade Feb 13, 2023
22d667a

And fix these tests too


jackmcdade Feb 13, 2023
433fa4b

And these too


jackmcdade Feb 13, 2023
1b08076

Fix test


jackmcdade Feb 13, 2023
4ee85d4

undo whitespace changes


jasonvarga Feb 13, 2023
b8b9542

Merge branch 'master' into rename-sections-to-tabs


jasonvarga Feb 28, 2023
355383c

missed


jasonvarga Feb 28, 2023
a6af264

should have been kept plural


jasonvarga Feb 28, 2023
d15f255

more


jasonvarga Feb 28, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


34 changes: 17 additions & 17 deletions
resources/css/components/blueprints.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
 }
}
Expand All@@ -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;
 }

Expand All@@ -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;
Expand All@@ -52,33 +52,33 @@

/* 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 & {
 display: none;
 }
}

.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;
 }
}
Expand Down

2 changes: 1 addition & 1 deletion
resources/css/components/configure.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
 }
Expand Down

18 changes: 9 additions & 9 deletions
resources/css/components/preview.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -39,7 +39,7 @@
 @apply bg-gray-300;
}

.live-preview .publish-section-actions-footer {
.live-preview .publish-tab-actions-footer {
 display: none;
}

Expand DownExpand Up@@ -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;
 }
Expand All@@ -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
}

6 changes: 3 additions & 3 deletions
resources/css/components/publish.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -81,7 +81,7 @@ code.parent-url {
 margin-left: 20px;
 width: 300px;

 .publish-section-actions {
 .publish-tab-actions {
 @apply border-b;
 }

Expand All@@ -90,7 +90,7 @@ code.parent-url {
 }
}

.publish-section-actions-footer {
.publish-tab-actions-footer {
 @apply mt-6;
}

Expand All@@ -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;
}

8 changes: 4 additions & 4 deletions
resources/js/bootstrap/components.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
Expand DownExpand Up@@ -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);

Expand Down

2 changes: 1 addition & 1 deletion
resources/js/components/asset-containers/CreateForm.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -23,7 +23,7 @@
 <button type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
 </div>

 <configure-sections @updated="setFieldValue" :enable-sidebar="false"/>
 <configure-tabs @updated="setFieldValue" :enable-sidebar="false"/>
 </div>
 </publish-container>

Expand Down

2 changes: 1 addition & 1 deletion
resources/js/components/asset-containers/EditForm.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,7 @@
 @updated="values = $event"
 >
 <div slot-scope="{ setFieldValue }">
 <configure-sections @updated="setFieldValue" :enable-sidebar="false"/>
 <configure-tabs @updated="setFieldValue" :enable-sidebar="false"/>
 <div class="py-4 border-t flex justify-between">
 <a :href="url" class="btn" v-text="__('Cancel') "/>
 <button type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
Expand Down

4 changes: 2 additions & 2 deletions
resources/js/components/assets/Editor/Editor.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -307,8 +307,8 @@ export default {
 this.actions = data.actions;

 this.fieldset = data.blueprint;
 this.fields = _.chain(this.fieldset.sections)
 .map(section => section.fields)
 this.fields = _.chain(this.fieldset.tabs)
 .map(tab => tab.fields)
 .flatten(true)
 .value();

Expand Down

34 changes: 17 additions & 17 deletions
resources/js/components/blueprints/Builder.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -29,45 +29,45 @@
 </div>
 </div>

 <div class="content mt-10 mb-4" v-if="useSections">
 <h2>{{ __('Tab Sections') }}</h2>
 <p class="max-w-lg">{{ __('messages.tab_sections_instructions') }}</p>
 <div v-if="errors.sections">
 <small class="help-block text-red" v-for="(error, i) in errors.sections" :key="i" v-text="error" />
 <div class="content mt-10 mb-4" v-if="useTabs">
 <h2>{{ __('Tabs') }}</h2>
 <p class="max-w-lg">{{ __('messages.tabs_instructions') }}</p>
 <div v-if="errors.tabs">
 <small class="help-block text-red" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
 </div>
 </div>

 <sections
 :single-section="!useSections"
 :initial-sections="blueprint.sections"
 @updated="sectionsUpdated"
 <tabs
 :single-tab="!useTabs"
 :initial-tabs="blueprint.tabs"
 @updated="tabsUpdated"
 />

 </div>

</template>

<script>
import Sections from './Sections.vue';
import Tabs from './Tabs.vue';

export default {

 components: {
Sections,
Tabs,
 },

 props: {
 action: String,
 initialBlueprint: Object,
 showTitle: Boolean,
useSections: { type: Boolean, default: true },
useTabs: { type: Boolean, default: true },
 isFormBlueprint: { type: Boolean, default: false },
 },

 data() {
 return {
 blueprint: this.initializeBlueprint(),
sections: [],
tabs: [],
 errors: {}
 }
 },
Expand All@@ -85,8 +85,8 @@ export default {

 watch: {

sections(sections) {
 this.blueprint.sections = sections;
tabs(tabs) {
 this.blueprint.tabs = tabs;
 },

 blueprint: {
Expand All@@ -108,8 +108,8 @@ export default {
 return blueprint;
 },

sectionsUpdated(sections) {
 this.sections = sections;
tabsUpdated(tabs) {
 this.tabs = tabs;
 },

 save() {
Expand Down

2 changes: 1 addition & 1 deletion
resources/js/components/blueprints/Field.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,7 +11,7 @@ export default {
 default: true
 },
 isEditing: Boolean,
isSectionExpanded: Boolean
isTabExpanded: Boolean
 }

}
Expand Down

8 changes: 4 additions & 4 deletions
resources/js/components/blueprints/Fields.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,7 +2,7 @@

 <div class="flex flex-col text-sm">

 <div class="blueprint-section-draggable-zone -mx-1"
 <div class="blueprint-tab-draggable-zone -mx-1"
 :class="{ 'flex flex-wrap flex-1': fields.length }"
 >
 <slot name="empty-state" v-if="!fields.length" />
Expand All@@ -13,7 +13,7 @@
 :key="field._id"
 :field="field"
 :is-editing="editingField === field._id"
 :is-section-expanded="isSectionExpanded"
 :is-tab-expanded="isTabExpanded"
 :suggestable-condition-fields="suggestableConditionFields"
 :can-define-localizable="canDefineLocalizable"
 @edit="$emit('field-editing', field._id)"
Expand All@@ -23,7 +23,7 @@
 />
 </div>

 <div class="blueprint-section-field-actions flex mt-2 -mx-1">
 <div class="blueprint-tab-field-actions flex mt-2 -mx-1">
 <div class="px-1">
 <link-fields
 :exclude-fieldset="excludeFieldset"
Expand DownExpand Up@@ -88,7 +88,7 @@ export default {
 props: {
 fields: Array,
 editingField: {},
isSectionExpanded: Boolean,
isTabExpanded: Boolean,
 suggestableConditionFields: Array,
 excludeFieldset: String,
 },
Expand Down

4 changes: 2 additions & 2 deletions
resources/js/components/blueprints/ImportField.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
<template>

 <div class="blueprint-section-field blueprint-section-import blueprint-section-field-w-full">
 <div class="blueprint-section-field-inner">
 <div class="blueprint-tab-field blueprint-tab-import blueprint-tab-field-w-full">
 <div class="blueprint-tab-field-inner">
 <div class="blueprint-drag-handle w-4 border-r"></div>
 <div class="flex flex-1 items-center justify-between">
 <div class="flex items-center flex-1 pr-4 py-2 pl-2">
Expand Down

6 changes: 3 additions & 3 deletions
resources/js/components/blueprints/RegularField.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
<template>

 <div class="blueprint-section-field" :class="widthClass">
 <div class="blueprint-section-field-inner">
 <div class="blueprint-tab-field" :class="widthClass">
 <div class="blueprint-tab-field-inner">
 <div class="blueprint-drag-handle w-4 border-r"></div>
 <div class="flex flex-1 items-center justify-between">
 <div class="flex items-center flex-1 pr-4 py-2 pl-2">
Expand DownExpand Up@@ -111,7 +111,7 @@ export default {
 },

 widthClass() {
 if (! this.isSectionExpanded) return 'w-full';
 if (! this.isTabExpanded) return 'w-full';

 return `${tailwind_width_class(this.width)}`;
 },
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[4.x] Blueprints: Rename sections to tabs by jackmcdade · Pull Request #7533 · statamic/cms · GitHub
Skip to content
[4.x] Blueprints: Rename sections to tabs#7533

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jasonvarga
merged 10 commits into

from

Mar 2, 2023
 Merged


[4.x] Blueprints: Rename sections to tabs
#7533
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
9261252

Rename all references to (Blueprint) Sections to Tabs


jackmcdade Feb 13, 2023
e8e16d8

Fix some tests


jackmcdade Feb 13, 2023
22d667a

And fix these tests too


jackmcdade Feb 13, 2023
433fa4b

And these too


jackmcdade Feb 13, 2023
1b08076

Fix test


jackmcdade Feb 13, 2023
4ee85d4

undo whitespace changes


jasonvarga Feb 13, 2023
b8b9542

Merge branch 'master' into rename-sections-to-tabs


jasonvarga Feb 28, 2023
355383c

missed


jasonvarga Feb 28, 2023
a6af264

should have been kept plural


jasonvarga Feb 28, 2023
d15f255

more


jasonvarga Feb 28, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


34 changes: 17 additions & 17 deletions
resources/css/components/blueprints.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
 }
}
Expand All@@ -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;
 }

Expand All@@ -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;
Expand All@@ -52,33 +52,33 @@

/* 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 & {
 display: none;
 }
}

.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;
 }
}
Expand Down

2 changes: 1 addition & 1 deletion
resources/css/components/configure.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
 }
Expand Down

18 changes: 9 additions & 9 deletions
resources/css/components/preview.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -39,7 +39,7 @@
 @apply bg-gray-300;
}

.live-preview .publish-section-actions-footer {
.live-preview .publish-tab-actions-footer {
 display: none;
}

Expand DownExpand Up@@ -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;
 }
Expand All@@ -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
}

6 changes: 3 additions & 3 deletions
resources/css/components/publish.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -81,7 +81,7 @@ code.parent-url {
 margin-left: 20px;
 width: 300px;

 .publish-section-actions {
 .publish-tab-actions {
 @apply border-b;
 }

Expand All@@ -90,7 +90,7 @@ code.parent-url {
 }
}

.publish-section-actions-footer {
.publish-tab-actions-footer {
 @apply mt-6;
}

Expand All@@ -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;
}

8 changes: 4 additions & 4 deletions
resources/js/bootstrap/components.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
Expand DownExpand Up@@ -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);

Expand Down

2 changes: 1 addition & 1 deletion
resources/js/components/asset-containers/CreateForm.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -23,7 +23,7 @@
 <button type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
 </div>

 <configure-sections @updated="setFieldValue" :enable-sidebar="false"/>
 <configure-tabs @updated="setFieldValue" :enable-sidebar="false"/>
 </div>
 </publish-container>

Expand Down

2 changes: 1 addition & 1 deletion
resources/js/components/asset-containers/EditForm.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,7 @@
 @updated="values = $event"
 >
 <div slot-scope="{ setFieldValue }">
 <configure-sections @updated="setFieldValue" :enable-sidebar="false"/>
 <configure-tabs @updated="setFieldValue" :enable-sidebar="false"/>
 <div class="py-4 border-t flex justify-between">
 <a :href="url" class="btn" v-text="__('Cancel') "/>
 <button type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
Expand Down

4 changes: 2 additions & 2 deletions
resources/js/components/assets/Editor/Editor.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -307,8 +307,8 @@ export default {
 this.actions = data.actions;

 this.fieldset = data.blueprint;
 this.fields = _.chain(this.fieldset.sections)
 .map(section => section.fields)
 this.fields = _.chain(this.fieldset.tabs)
 .map(tab => tab.fields)
 .flatten(true)
 .value();

Expand Down

34 changes: 17 additions & 17 deletions
resources/js/components/blueprints/Builder.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -29,45 +29,45 @@
 </div>
 </div>

 <div class="content mt-10 mb-4" v-if="useSections">
 <h2>{{ __('Tab Sections') }}</h2>
 <p class="max-w-lg">{{ __('messages.tab_sections_instructions') }}</p>
 <div v-if="errors.sections">
 <small class="help-block text-red" v-for="(error, i) in errors.sections" :key="i" v-text="error" />
 <div class="content mt-10 mb-4" v-if="useTabs">
 <h2>{{ __('Tabs') }}</h2>
 <p class="max-w-lg">{{ __('messages.tabs_instructions') }}</p>
 <div v-if="errors.tabs">
 <small class="help-block text-red" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
 </div>
 </div>

 <sections
 :single-section="!useSections"
 :initial-sections="blueprint.sections"
 @updated="sectionsUpdated"
 <tabs
 :single-tab="!useTabs"
 :initial-tabs="blueprint.tabs"
 @updated="tabsUpdated"
 />

 </div>

</template>

<script>
import Sections from './Sections.vue';
import Tabs from './Tabs.vue';

export default {

 components: {
Sections,
Tabs,
 },

 props: {
 action: String,
 initialBlueprint: Object,
 showTitle: Boolean,
useSections: { type: Boolean, default: true },
useTabs: { type: Boolean, default: true },
 isFormBlueprint: { type: Boolean, default: false },
 },

 data() {
 return {
 blueprint: this.initializeBlueprint(),
sections: [],
tabs: [],
 errors: {}
 }
 },
Expand All@@ -85,8 +85,8 @@ export default {

 watch: {

sections(sections) {
 this.blueprint.sections = sections;
tabs(tabs) {
 this.blueprint.tabs = tabs;
 },

 blueprint: {
Expand All@@ -108,8 +108,8 @@ export default {
 return blueprint;
 },

sectionsUpdated(sections) {
 this.sections = sections;
tabsUpdated(tabs) {
 this.tabs = tabs;
 },

 save() {
Expand Down

2 changes: 1 addition & 1 deletion
resources/js/components/blueprints/Field.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,7 +11,7 @@ export default {
 default: true
 },
 isEditing: Boolean,
isSectionExpanded: Boolean
isTabExpanded: Boolean
 }

}
Expand Down

8 changes: 4 additions & 4 deletions
resources/js/components/blueprints/Fields.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,7 +2,7 @@

 <div class="flex flex-col text-sm">

 <div class="blueprint-section-draggable-zone -mx-1"
 <div class="blueprint-tab-draggable-zone -mx-1"
 :class="{ 'flex flex-wrap flex-1': fields.length }"
 >
 <slot name="empty-state" v-if="!fields.length" />
Expand All@@ -13,7 +13,7 @@
 :key="field._id"
 :field="field"
 :is-editing="editingField === field._id"
 :is-section-expanded="isSectionExpanded"
 :is-tab-expanded="isTabExpanded"
 :suggestable-condition-fields="suggestableConditionFields"
 :can-define-localizable="canDefineLocalizable"
 @edit="$emit('field-editing', field._id)"
Expand All@@ -23,7 +23,7 @@
 />
 </div>

 <div class="blueprint-section-field-actions flex mt-2 -mx-1">
 <div class="blueprint-tab-field-actions flex mt-2 -mx-1">
 <div class="px-1">
 <link-fields
 :exclude-fieldset="excludeFieldset"
Expand DownExpand Up@@ -88,7 +88,7 @@ export default {
 props: {
 fields: Array,
 editingField: {},
isSectionExpanded: Boolean,
isTabExpanded: Boolean,
 suggestableConditionFields: Array,
 excludeFieldset: String,
 },
Expand Down

4 changes: 2 additions & 2 deletions
resources/js/components/blueprints/ImportField.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
<template>

 <div class="blueprint-section-field blueprint-section-import blueprint-section-field-w-full">
 <div class="blueprint-section-field-inner">
 <div class="blueprint-tab-field blueprint-tab-import blueprint-tab-field-w-full">
 <div class="blueprint-tab-field-inner">
 <div class="blueprint-drag-handle w-4 border-r"></div>
 <div class="flex flex-1 items-center justify-between">
 <div class="flex items-center flex-1 pr-4 py-2 pl-2">
Expand Down

6 changes: 3 additions & 3 deletions
resources/js/components/blueprints/RegularField.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
<template>

 <div class="blueprint-section-field" :class="widthClass">
 <div class="blueprint-section-field-inner">
 <div class="blueprint-tab-field" :class="widthClass">
 <div class="blueprint-tab-field-inner">
 <div class="blueprint-drag-handle w-4 border-r"></div>
 <div class="flex flex-1 items-center justify-between">
 <div class="flex items-center flex-1 pr-4 py-2 pl-2">
Expand DownExpand Up@@ -111,7 +111,7 @@ export default {
 },

 widthClass() {
 if (! this.isSectionExpanded) return 'w-full';
 if (! this.isTabExpanded) return 'w-full';

 return `${tailwind_width_class(this.width)}`;
 },
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
[4.x] Blueprints: Rename sections to tabs by jackmcdade · Pull Request #7533 · statamic/cms · GitHub
Skip to content
[4.x] Blueprints: Rename sections to tabs#7533

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jasonvarga
merged 10 commits into

from

Mar 2, 2023
 Merged


[4.x] Blueprints: Rename sections to tabs
#7533
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
9261252

Rename all references to (Blueprint) Sections to Tabs


jackmcdade Feb 13, 2023
e8e16d8

Fix some tests


jackmcdade Feb 13, 2023
22d667a

And fix these tests too


jackmcdade Feb 13, 2023
433fa4b

And these too


jackmcdade Feb 13, 2023
1b08076

Fix test


jackmcdade Feb 13, 2023
4ee85d4

undo whitespace changes


jasonvarga Feb 13, 2023
b8b9542

Merge branch 'master' into rename-sections-to-tabs


jasonvarga Feb 28, 2023
355383c

missed


jasonvarga Feb 28, 2023
a6af264

should have been kept plural


jasonvarga Feb 28, 2023
d15f255

more


jasonvarga Feb 28, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


34 changes: 17 additions & 17 deletions
resources/css/components/blueprints.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
 }
}
Expand All@@ -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;
 }

Expand All@@ -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;
Expand All@@ -52,33 +52,33 @@

/* 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 & {
 display: none;
 }
}

.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;
 }
}
Expand Down

2 changes: 1 addition & 1 deletion
resources/css/components/configure.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
 }
Expand Down

18 changes: 9 additions & 9 deletions
resources/css/components/preview.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -39,7 +39,7 @@
 @apply bg-gray-300;
}

.live-preview .publish-section-actions-footer {
.live-preview .publish-tab-actions-footer {
 display: none;
}

Expand DownExpand Up@@ -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;
 }
Expand All@@ -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
}

6 changes: 3 additions & 3 deletions
resources/css/components/publish.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -81,7 +81,7 @@ code.parent-url {
 margin-left: 20px;
 width: 300px;

 .publish-section-actions {
 .publish-tab-actions {
 @apply border-b;
 }

Expand All@@ -90,7 +90,7 @@ code.parent-url {
 }
}

.publish-section-actions-footer {
.publish-tab-actions-footer {
 @apply mt-6;
}

Expand All@@ -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;
}

8 changes: 4 additions & 4 deletions
resources/js/bootstrap/components.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
Expand DownExpand Up@@ -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);

Expand Down

2 changes: 1 addition & 1 deletion
resources/js/components/asset-containers/CreateForm.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -23,7 +23,7 @@
 <button type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
 </div>

 <configure-sections @updated="setFieldValue" :enable-sidebar="false"/>
 <configure-tabs @updated="setFieldValue" :enable-sidebar="false"/>
 </div>
 </publish-container>

Expand Down

2 changes: 1 addition & 1 deletion
resources/js/components/asset-containers/EditForm.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,7 @@
 @updated="values = $event"
 >
 <div slot-scope="{ setFieldValue }">
 <configure-sections @updated="setFieldValue" :enable-sidebar="false"/>
 <configure-tabs @updated="setFieldValue" :enable-sidebar="false"/>
 <div class="py-4 border-t flex justify-between">
 <a :href="url" class="btn" v-text="__('Cancel') "/>
 <button type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
Expand Down

4 changes: 2 additions & 2 deletions
resources/js/components/assets/Editor/Editor.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -307,8 +307,8 @@ export default {
 this.actions = data.actions;

 this.fieldset = data.blueprint;
 this.fields = _.chain(this.fieldset.sections)
 .map(section => section.fields)
 this.fields = _.chain(this.fieldset.tabs)
 .map(tab => tab.fields)
 .flatten(true)
 .value();

Expand Down

34 changes: 17 additions & 17 deletions
resources/js/components/blueprints/Builder.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -29,45 +29,45 @@
 </div>
 </div>

 <div class="content mt-10 mb-4" v-if="useSections">
 <h2>{{ __('Tab Sections') }}</h2>
 <p class="max-w-lg">{{ __('messages.tab_sections_instructions') }}</p>
 <div v-if="errors.sections">
 <small class="help-block text-red" v-for="(error, i) in errors.sections" :key="i" v-text="error" />
 <div class="content mt-10 mb-4" v-if="useTabs">
 <h2>{{ __('Tabs') }}</h2>
 <p class="max-w-lg">{{ __('messages.tabs_instructions') }}</p>
 <div v-if="errors.tabs">
 <small class="help-block text-red" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
 </div>
 </div>

 <sections
 :single-section="!useSections"
 :initial-sections="blueprint.sections"
 @updated="sectionsUpdated"
 <tabs
 :single-tab="!useTabs"
 :initial-tabs="blueprint.tabs"
 @updated="tabsUpdated"
 />

 </div>

</template>

<script>
import Sections from './Sections.vue';
import Tabs from './Tabs.vue';

export default {

 components: {
Sections,
Tabs,
 },

 props: {
 action: String,
 initialBlueprint: Object,
 showTitle: Boolean,
useSections: { type: Boolean, default: true },
useTabs: { type: Boolean, default: true },
 isFormBlueprint: { type: Boolean, default: false },
 },

 data() {
 return {
 blueprint: this.initializeBlueprint(),
sections: [],
tabs: [],
 errors: {}
 }
 },
Expand All@@ -85,8 +85,8 @@ export default {

 watch: {

sections(sections) {
 this.blueprint.sections = sections;
tabs(tabs) {
 this.blueprint.tabs = tabs;
 },

 blueprint: {
Expand All@@ -108,8 +108,8 @@ export default {
 return blueprint;
 },

sectionsUpdated(sections) {
 this.sections = sections;
tabsUpdated(tabs) {
 this.tabs = tabs;
 },

 save() {
Expand Down

2 changes: 1 addition & 1 deletion
resources/js/components/blueprints/Field.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,7 +11,7 @@ export default {
 default: true
 },
 isEditing: Boolean,
isSectionExpanded: Boolean
isTabExpanded: Boolean
 }

}
Expand Down

8 changes: 4 additions & 4 deletions
resources/js/components/blueprints/Fields.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,7 +2,7 @@

 <div class="flex flex-col text-sm">

 <div class="blueprint-section-draggable-zone -mx-1"
 <div class="blueprint-tab-draggable-zone -mx-1"
 :class="{ 'flex flex-wrap flex-1': fields.length }"
 >
 <slot name="empty-state" v-if="!fields.length" />
Expand All@@ -13,7 +13,7 @@
 :key="field._id"
 :field="field"
 :is-editing="editingField === field._id"
 :is-section-expanded="isSectionExpanded"
 :is-tab-expanded="isTabExpanded"
 :suggestable-condition-fields="suggestableConditionFields"
 :can-define-localizable="canDefineLocalizable"
 @edit="$emit('field-editing', field._id)"
Expand All@@ -23,7 +23,7 @@
 />
 </div>

 <div class="blueprint-section-field-actions flex mt-2 -mx-1">
 <div class="blueprint-tab-field-actions flex mt-2 -mx-1">
 <div class="px-1">
 <link-fields
 :exclude-fieldset="excludeFieldset"
Expand DownExpand Up@@ -88,7 +88,7 @@ export default {
 props: {
 fields: Array,
 editingField: {},
isSectionExpanded: Boolean,
isTabExpanded: Boolean,
 suggestableConditionFields: Array,
 excludeFieldset: String,
 },
Expand Down

4 changes: 2 additions & 2 deletions
resources/js/components/blueprints/ImportField.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
<template>

 <div class="blueprint-section-field blueprint-section-import blueprint-section-field-w-full">
 <div class="blueprint-section-field-inner">
 <div class="blueprint-tab-field blueprint-tab-import blueprint-tab-field-w-full">
 <div class="blueprint-tab-field-inner">
 <div class="blueprint-drag-handle w-4 border-r"></div>
 <div class="flex flex-1 items-center justify-between">
 <div class="flex items-center flex-1 pr-4 py-2 pl-2">
Expand Down

6 changes: 3 additions & 3 deletions
resources/js/components/blueprints/RegularField.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
<template>

 <div class="blueprint-section-field" :class="widthClass">
 <div class="blueprint-section-field-inner">
 <div class="blueprint-tab-field" :class="widthClass">
 <div class="blueprint-tab-field-inner">
 <div class="blueprint-drag-handle w-4 border-r"></div>
 <div class="flex flex-1 items-center justify-between">
 <div class="flex items-center flex-1 pr-4 py-2 pl-2">
Expand DownExpand Up@@ -111,7 +111,7 @@ export default {
 },

 widthClass() {
 if (! this.isSectionExpanded) return 'w-full';
 if (! this.isTabExpanded) return 'w-full';

 return `${tailwind_width_class(this.width)}`;
 },
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[4.x] Blueprints: Rename sections to tabs by jackmcdade · Pull Request #7533 · statamic/cms · GitHub
Skip to content
[4.x] Blueprints: Rename sections to tabs#7533

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jasonvarga
merged 10 commits into

from

Mar 2, 2023
 Merged


[4.x] Blueprints: Rename sections to tabs
#7533
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
9261252

Rename all references to (Blueprint) Sections to Tabs


jackmcdade Feb 13, 2023
e8e16d8

Fix some tests


jackmcdade Feb 13, 2023
22d667a

And fix these tests too


jackmcdade Feb 13, 2023
433fa4b

And these too


jackmcdade Feb 13, 2023
1b08076

Fix test


jackmcdade Feb 13, 2023
4ee85d4

undo whitespace changes


jasonvarga Feb 13, 2023
b8b9542

Merge branch 'master' into rename-sections-to-tabs


jasonvarga Feb 28, 2023
355383c

missed


jasonvarga Feb 28, 2023
a6af264

should have been kept plural


jasonvarga Feb 28, 2023
d15f255

more


jasonvarga Feb 28, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


34 changes: 17 additions & 17 deletions
resources/css/components/blueprints.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
 }
}
Expand All@@ -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;
 }

Expand All@@ -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;
Expand All@@ -52,33 +52,33 @@

/* 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 & {
 display: none;
 }
}

.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;
 }
}
Expand Down

2 changes: 1 addition & 1 deletion
resources/css/components/configure.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
 }
Expand Down

18 changes: 9 additions & 9 deletions
resources/css/components/preview.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -39,7 +39,7 @@
 @apply bg-gray-300;
}

.live-preview .publish-section-actions-footer {
.live-preview .publish-tab-actions-footer {
 display: none;
}

Expand DownExpand Up@@ -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;
 }
Expand All@@ -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
}

6 changes: 3 additions & 3 deletions
resources/css/components/publish.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -81,7 +81,7 @@ code.parent-url {
 margin-left: 20px;
 width: 300px;

 .publish-section-actions {
 .publish-tab-actions {
 @apply border-b;
 }

Expand All@@ -90,7 +90,7 @@ code.parent-url {
 }
}

.publish-section-actions-footer {
.publish-tab-actions-footer {
 @apply mt-6;
}

Expand All@@ -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;
}

8 changes: 4 additions & 4 deletions
resources/js/bootstrap/components.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
Expand DownExpand Up@@ -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);

Expand Down

2 changes: 1 addition & 1 deletion
resources/js/components/asset-containers/CreateForm.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -23,7 +23,7 @@
 <button type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
 </div>

 <configure-sections @updated="setFieldValue" :enable-sidebar="false"/>
 <configure-tabs @updated="setFieldValue" :enable-sidebar="false"/>
 </div>
 </publish-container>

Expand Down

2 changes: 1 addition & 1 deletion
resources/js/components/asset-containers/EditForm.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,7 @@
 @updated="values = $event"
 >
 <div slot-scope="{ setFieldValue }">
 <configure-sections @updated="setFieldValue" :enable-sidebar="false"/>
 <configure-tabs @updated="setFieldValue" :enable-sidebar="false"/>
 <div class="py-4 border-t flex justify-between">
 <a :href="url" class="btn" v-text="__('Cancel') "/>
 <button type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
Expand Down

4 changes: 2 additions & 2 deletions
resources/js/components/assets/Editor/Editor.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -307,8 +307,8 @@ export default {
 this.actions = data.actions;

 this.fieldset = data.blueprint;
 this.fields = _.chain(this.fieldset.sections)
 .map(section => section.fields)
 this.fields = _.chain(this.fieldset.tabs)
 .map(tab => tab.fields)
 .flatten(true)
 .value();

Expand Down

34 changes: 17 additions & 17 deletions
resources/js/components/blueprints/Builder.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -29,45 +29,45 @@
 </div>
 </div>

 <div class="content mt-10 mb-4" v-if="useSections">
 <h2>{{ __('Tab Sections') }}</h2>
 <p class="max-w-lg">{{ __('messages.tab_sections_instructions') }}</p>
 <div v-if="errors.sections">
 <small class="help-block text-red" v-for="(error, i) in errors.sections" :key="i" v-text="error" />
 <div class="content mt-10 mb-4" v-if="useTabs">
 <h2>{{ __('Tabs') }}</h2>
 <p class="max-w-lg">{{ __('messages.tabs_instructions') }}</p>
 <div v-if="errors.tabs">
 <small class="help-block text-red" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
 </div>
 </div>

 <sections
 :single-section="!useSections"
 :initial-sections="blueprint.sections"
 @updated="sectionsUpdated"
 <tabs
 :single-tab="!useTabs"
 :initial-tabs="blueprint.tabs"
 @updated="tabsUpdated"
 />

 </div>

</template>

<script>
import Sections from './Sections.vue';
import Tabs from './Tabs.vue';

export default {

 components: {
Sections,
Tabs,
 },

 props: {
 action: String,
 initialBlueprint: Object,
 showTitle: Boolean,
useSections: { type: Boolean, default: true },
useTabs: { type: Boolean, default: true },
 isFormBlueprint: { type: Boolean, default: false },
 },

 data() {
 return {
 blueprint: this.initializeBlueprint(),
sections: [],
tabs: [],
 errors: {}
 }
 },
Expand All@@ -85,8 +85,8 @@ export default {

 watch: {

sections(sections) {
 this.blueprint.sections = sections;
tabs(tabs) {
 this.blueprint.tabs = tabs;
 },

 blueprint: {
Expand All@@ -108,8 +108,8 @@ export default {
 return blueprint;
 },

sectionsUpdated(sections) {
 this.sections = sections;
tabsUpdated(tabs) {
 this.tabs = tabs;
 },

 save() {
Expand Down

2 changes: 1 addition & 1 deletion
resources/js/components/blueprints/Field.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,7 +11,7 @@ export default {
 default: true
 },
 isEditing: Boolean,
isSectionExpanded: Boolean
isTabExpanded: Boolean
 }

}
Expand Down

8 changes: 4 additions & 4 deletions
resources/js/components/blueprints/Fields.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,7 +2,7 @@

 <div class="flex flex-col text-sm">

 <div class="blueprint-section-draggable-zone -mx-1"
 <div class="blueprint-tab-draggable-zone -mx-1"
 :class="{ 'flex flex-wrap flex-1': fields.length }"
 >
 <slot name="empty-state" v-if="!fields.length" />
Expand All@@ -13,7 +13,7 @@
 :key="field._id"
 :field="field"
 :is-editing="editingField === field._id"
 :is-section-expanded="isSectionExpanded"
 :is-tab-expanded="isTabExpanded"
 :suggestable-condition-fields="suggestableConditionFields"
 :can-define-localizable="canDefineLocalizable"
 @edit="$emit('field-editing', field._id)"
Expand All@@ -23,7 +23,7 @@
 />
 </div>

 <div class="blueprint-section-field-actions flex mt-2 -mx-1">
 <div class="blueprint-tab-field-actions flex mt-2 -mx-1">
 <div class="px-1">
 <link-fields
 :exclude-fieldset="excludeFieldset"
Expand DownExpand Up@@ -88,7 +88,7 @@ export default {
 props: {
 fields: Array,
 editingField: {},
isSectionExpanded: Boolean,
isTabExpanded: Boolean,
 suggestableConditionFields: Array,
 excludeFieldset: String,
 },
Expand Down

4 changes: 2 additions & 2 deletions
resources/js/components/blueprints/ImportField.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
<template>

 <div class="blueprint-section-field blueprint-section-import blueprint-section-field-w-full">
 <div class="blueprint-section-field-inner">
 <div class="blueprint-tab-field blueprint-tab-import blueprint-tab-field-w-full">
 <div class="blueprint-tab-field-inner">
 <div class="blueprint-drag-handle w-4 border-r"></div>
 <div class="flex flex-1 items-center justify-between">
 <div class="flex items-center flex-1 pr-4 py-2 pl-2">
Expand Down

6 changes: 3 additions & 3 deletions
resources/js/components/blueprints/RegularField.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
<template>

 <div class="blueprint-section-field" :class="widthClass">
 <div class="blueprint-section-field-inner">
 <div class="blueprint-tab-field" :class="widthClass">
 <div class="blueprint-tab-field-inner">
 <div class="blueprint-drag-handle w-4 border-r"></div>
 <div class="flex flex-1 items-center justify-between">
 <div class="flex items-center flex-1 pr-4 py-2 pl-2">
Expand DownExpand Up@@ -111,7 +111,7 @@ export default {
 },

 widthClass() {
 if (! this.isSectionExpanded) return 'w-full';
 if (! this.isTabExpanded) return 'w-full';

 return `${tailwind_width_class(this.width)}`;
 },
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
})();
[4.x] Blueprints: Rename sections to tabs by jackmcdade · Pull Request #7533 · statamic/cms · GitHub
Skip to content
[4.x] Blueprints: Rename sections to tabs#7533

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

jasonvarga
merged 10 commits into

from

Mar 2, 2023
 Merged


[4.x] Blueprints: Rename sections to tabs
#7533
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
9261252

Rename all references to (Blueprint) Sections to Tabs


jackmcdade Feb 13, 2023
e8e16d8

Fix some tests


jackmcdade Feb 13, 2023
22d667a

And fix these tests too


jackmcdade Feb 13, 2023
433fa4b

And these too


jackmcdade Feb 13, 2023
1b08076

Fix test


jackmcdade Feb 13, 2023
4ee85d4

undo whitespace changes


jasonvarga Feb 13, 2023
b8b9542

Merge branch 'master' into rename-sections-to-tabs


jasonvarga Feb 28, 2023
355383c

missed


jasonvarga Feb 28, 2023
a6af264

should have been kept plural


jasonvarga Feb 28, 2023
d15f255

more


jasonvarga Feb 28, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


34 changes: 17 additions & 17 deletions
resources/css/components/blueprints.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
 }
}
Expand All@@ -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;
 }

Expand All@@ -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;
Expand All@@ -52,33 +52,33 @@

/* 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 & {
 display: none;
 }
}

.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;
 }
}
Expand Down

2 changes: 1 addition & 1 deletion
resources/css/components/configure.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
 }
Expand Down

18 changes: 9 additions & 9 deletions
resources/css/components/preview.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -39,7 +39,7 @@
 @apply bg-gray-300;
}

.live-preview .publish-section-actions-footer {
.live-preview .publish-tab-actions-footer {
 display: none;
}

Expand DownExpand Up@@ -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;
 }
Expand All@@ -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
}

6 changes: 3 additions & 3 deletions
resources/css/components/publish.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -81,7 +81,7 @@ code.parent-url {
 margin-left: 20px;
 width: 300px;

 .publish-section-actions {
 .publish-tab-actions {
 @apply border-b;
 }

Expand All@@ -90,7 +90,7 @@ code.parent-url {
 }
}

.publish-section-actions-footer {
.publish-tab-actions-footer {
 @apply mt-6;
}

Expand All@@ -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;
}

8 changes: 4 additions & 4 deletions
resources/js/bootstrap/components.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
Expand DownExpand Up@@ -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);

Expand Down

2 changes: 1 addition & 1 deletion
resources/js/components/asset-containers/CreateForm.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -23,7 +23,7 @@
 <button type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
 </div>

 <configure-sections @updated="setFieldValue" :enable-sidebar="false"/>
 <configure-tabs @updated="setFieldValue" :enable-sidebar="false"/>
 </div>
 </publish-container>

Expand Down

2 changes: 1 addition & 1 deletion
resources/js/components/asset-containers/EditForm.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,7 @@
 @updated="values = $event"
 >
 <div slot-scope="{ setFieldValue }">
 <configure-sections @updated="setFieldValue" :enable-sidebar="false"/>
 <configure-tabs @updated="setFieldValue" :enable-sidebar="false"/>
 <div class="py-4 border-t flex justify-between">
 <a :href="url" class="btn" v-text="__('Cancel') "/>
 <button type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
Expand Down

4 changes: 2 additions & 2 deletions
resources/js/components/assets/Editor/Editor.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -307,8 +307,8 @@ export default {
 this.actions = data.actions;

 this.fieldset = data.blueprint;
 this.fields = _.chain(this.fieldset.sections)
 .map(section => section.fields)
 this.fields = _.chain(this.fieldset.tabs)
 .map(tab => tab.fields)
 .flatten(true)
 .value();

Expand Down

34 changes: 17 additions & 17 deletions
resources/js/components/blueprints/Builder.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -29,45 +29,45 @@
 </div>
 </div>

 <div class="content mt-10 mb-4" v-if="useSections">
 <h2>{{ __('Tab Sections') }}</h2>
 <p class="max-w-lg">{{ __('messages.tab_sections_instructions') }}</p>
 <div v-if="errors.sections">
 <small class="help-block text-red" v-for="(error, i) in errors.sections" :key="i" v-text="error" />
 <div class="content mt-10 mb-4" v-if="useTabs">
 <h2>{{ __('Tabs') }}</h2>
 <p class="max-w-lg">{{ __('messages.tabs_instructions') }}</p>
 <div v-if="errors.tabs">
 <small class="help-block text-red" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
 </div>
 </div>

 <sections
 :single-section="!useSections"
 :initial-sections="blueprint.sections"
 @updated="sectionsUpdated"
 <tabs
 :single-tab="!useTabs"
 :initial-tabs="blueprint.tabs"
 @updated="tabsUpdated"
 />

 </div>

</template>

<script>
import Sections from './Sections.vue';
import Tabs from './Tabs.vue';

export default {

 components: {
Sections,
Tabs,
 },

 props: {
 action: String,
 initialBlueprint: Object,
 showTitle: Boolean,
useSections: { type: Boolean, default: true },
useTabs: { type: Boolean, default: true },
 isFormBlueprint: { type: Boolean, default: false },
 },

 data() {
 return {
 blueprint: this.initializeBlueprint(),
sections: [],
tabs: [],
 errors: {}
 }
 },
Expand All@@ -85,8 +85,8 @@ export default {

 watch: {

sections(sections) {
 this.blueprint.sections = sections;
tabs(tabs) {
 this.blueprint.tabs = tabs;
 },

 blueprint: {
Expand All@@ -108,8 +108,8 @@ export default {
 return blueprint;
 },

sectionsUpdated(sections) {
 this.sections = sections;
tabsUpdated(tabs) {
 this.tabs = tabs;
 },

 save() {
Expand Down

2 changes: 1 addition & 1 deletion
resources/js/components/blueprints/Field.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,7 +11,7 @@ export default {
 default: true
 },
 isEditing: Boolean,
isSectionExpanded: Boolean
isTabExpanded: Boolean
 }

}
Expand Down

8 changes: 4 additions & 4 deletions
resources/js/components/blueprints/Fields.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,7 +2,7 @@

 <div class="flex flex-col text-sm">

 <div class="blueprint-section-draggable-zone -mx-1"
 <div class="blueprint-tab-draggable-zone -mx-1"
 :class="{ 'flex flex-wrap flex-1': fields.length }"
 >
 <slot name="empty-state" v-if="!fields.length" />
Expand All@@ -13,7 +13,7 @@
 :key="field._id"
 :field="field"
 :is-editing="editingField === field._id"
 :is-section-expanded="isSectionExpanded"
 :is-tab-expanded="isTabExpanded"
 :suggestable-condition-fields="suggestableConditionFields"
 :can-define-localizable="canDefineLocalizable"
 @edit="$emit('field-editing', field._id)"
Expand All@@ -23,7 +23,7 @@
 />
 </div>

 <div class="blueprint-section-field-actions flex mt-2 -mx-1">
 <div class="blueprint-tab-field-actions flex mt-2 -mx-1">
 <div class="px-1">
 <link-fields
 :exclude-fieldset="excludeFieldset"
Expand DownExpand Up@@ -88,7 +88,7 @@ export default {
 props: {
 fields: Array,
 editingField: {},
isSectionExpanded: Boolean,
isTabExpanded: Boolean,
 suggestableConditionFields: Array,
 excludeFieldset: String,
 },
Expand Down

4 changes: 2 additions & 2 deletions
resources/js/components/blueprints/ImportField.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
<template>

 <div class="blueprint-section-field blueprint-section-import blueprint-section-field-w-full">
 <div class="blueprint-section-field-inner">
 <div class="blueprint-tab-field blueprint-tab-import blueprint-tab-field-w-full">
 <div class="blueprint-tab-field-inner">
 <div class="blueprint-drag-handle w-4 border-r"></div>
 <div class="flex flex-1 items-center justify-between">
 <div class="flex items-center flex-1 pr-4 py-2 pl-2">
Expand Down

6 changes: 3 additions & 3 deletions
resources/js/components/blueprints/RegularField.vue

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
<template>

 <div class="blueprint-section-field" :class="widthClass">
 <div class="blueprint-section-field-inner">
 <div class="blueprint-tab-field" :class="widthClass">
 <div class="blueprint-tab-field-inner">
 <div class="blueprint-drag-handle w-4 border-r"></div>
 <div class="flex flex-1 items-center justify-between">
 <div class="flex items-center flex-1 pr-4 py-2 pl-2">
Expand DownExpand Up@@ -111,7 +111,7 @@ export default {
 },

 widthClass() {
 if (! this.isSectionExpanded) return 'w-full';
 if (! this.isTabExpanded) return 'w-full';

 return `${tailwind_width_class(this.width)}`;
 },
Expand Down
Loading