Skip to content

Commit be9faef

Browse files
diddid
authored
feat(ui/ux): from the list of sections allow to insert after/before any section (#164)
* feat(ui/ux): allow users to insert a new section from the list of sections pane * feat: display a big button to add a new section * feat(ux): open the section content editing pane right after adding a new section
1 parent 4a7f487 commit be9faef

File tree

11 files changed

+100
-44
lines changed

11 files changed

+100
-44
lines changed

‎app/frontend/editor/components/kit/icon-button.vue

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
<template>
22
<button
3-
class="px-1.5 py-1.5 rounded-full bg-gray-600 bg-opacity-0 hover:text-gray-900 text-gray-800 focus:outline-none hover:bg-opacity-10 transition-colors duration-200"
3+
class="h-7 w-7 flex items-center justify-center rounded-full focus:outline-none transition-colors duration-200"
4+
:class="{
5+
'bg-gray-600 text-gray-200 hover:bg-gray-900 hover:text-gray-100': dark,
6+
'bg-gray-600 bg-opacity-0 hover:text-gray-900 text-gray-800 hover:bg-opacity-10': !dark
7+
}"
48
v-on="$listeners"
59
v-bind="$attrs"
610
>
@@ -14,6 +18,7 @@ export default {
1418
inheritAttrs: false,
1519
props: {
1620
iconName: { type: String, required: true },
21+
dark: { type: Boolean, default: false },
1722
},
1823
}
1924
</script>

‎app/frontend/editor/components/section-list/add-button.vue

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div
3+
class="absolute left-0 w-full h-7 group bg-red-500/0 z-10"
4+
:class="{
5+
'-top-5': isTop,
6+
'-bottom-5': !isTop
7+
}"
8+
>
9+
<!-- <div class="relative hidden group-hover:block h-0.5 w-full bg-gray-600 top-[calc(theme('spacing[7]')/2+theme('spacing[0.5]')/-2)]"></div> -->
10+
11+
<div class="absolute top-0 left-0 w-full justify-center flex opacity-0 group-hover:opacity-100 transition-opacity duration-200">
12+
<uikit-icon-button
13+
iconName="ri-add-line"
14+
dark
15+
class="border-4 border-white w-10 h-10"
16+
@click="addSection"
17+
/>
18+
</div>
19+
</div>
20+
</template>
21+
22+
<script>
23+
export default {
24+
name: 'SectionListAddButton',
25+
props: {
26+
insertAt: { type: String, required: false },
27+
},
28+
computed: {
29+
isTop() {
30+
return this.insertAt === 'top'
31+
},
32+
},
33+
methods: {
34+
addSection() {
35+
this.$router.push({ name: 'addSectionAfter', params: { sectionId: this.insertAt } })
36+
},
37+
},
38+
}
39+
</script>

‎app/frontend/editor/components/section-list/index.vue

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,31 @@
11
<template>
2-
<div>
3-
<div v-if="isListEmpty" class="text-center mt-8">
4-
<span class="text-gray-800">{{ $t('sections.listPane.empty') }}</span>
2+
<div class="flex flex-col h-full">
3+
<div class="relative flex-auto h-0 overflow-y-auto py-6">
4+
<div v-if="isListEmpty" class="text-center mt-8">
5+
<span class="text-gray-800">{{ $t('sections.listPane.empty') }}</span>
6+
</div>
7+
<draggable :list="list" @end="onSortEnd" v-bind="dragOptions" v-else>
8+
<transition-group type="transition" name="flip-list">
9+
<list-item
10+
v-for="(section, index) in list"
11+
:key="section.id"
12+
:section="section"
13+
:index="index"
14+
@on-dropdown-toggle="onDropdownToggle"
15+
class="mb-3"
16+
/>
17+
</transition-group>
18+
</draggable>
19+
</div>
20+
<div class="mt-auto relative">
21+
<button
22+
class="big-submit-button bg-editor-primary"
23+
@click="addSection"
24+
>
25+
<uikit-icon name="ri-add-line" size="1.5rem" />
26+
<span class="ml-3">{{ $t('sections.listPane.addButton') }}</span>
27+
</button>
528
</div>
6-
<draggable :list="list" @end="onSortEnd" v-bind="dragOptions" v-else>
7-
<transition-group type="transition" name="flip-list">
8-
<list-item
9-
v-for="(section, index) in list"
10-
:key="section.id"
11-
:section="section"
12-
:index="index"
13-
@on-dropdown-toggle="onDropdownToggle"
14-
class="mb-3"
15-
/>
16-
</transition-group>
17-
</draggable>
1829
</div>
1930
</template>
2031

@@ -47,6 +58,9 @@ export default {
4758
},
4859
methods: {
4960
...mapActions(['moveSection']),
61+
addSection() {
62+
this.$router.push({ name: 'addSection' })
63+
},
5064
onSortEnd(event) {
5165
this.moveSection({
5266
from: event.oldIndex,

‎app/frontend/editor/components/section-list/list-item.vue

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
11
<template>
22
<div
3-
class="bg-gray-100 rounded-md pr-2 flex items-center text-gray-800"
3+
class="bg-gray-100 rounded-md pr-2 flex items-center text-gray-800 relative"
44
>
5+
<add-button insertAt="top" v-if="isFirst" />
6+
<add-button :insertAt="section.id" />
7+
58
<div class="flex flex-col cursor-move px-2 py-3">
69
<uikit-icon name="ri-draggable" />
710
</div>
11+
812
<router-link
913
:to="{ name: 'editSection', params: { sectionId: section.id } }"
10-
class="flex flex-col overflow-hidden py-3 pr-2 leading-0.5"
14+
class="flex flex-col overflow-hidden py-3 pr-2 leading-0.5 flex-1"
1115
>
1216
<span :class="{ 'text-gray-500 text-xs': label }">{{ name | truncate(40) }}</span>
1317
<span class="text-gray-800 truncate" v-if="label">{{ label | truncate(100) }}</span>
1418
</router-link>
19+
1520
<uikit-confirmation-button
1621
@confirm="removeSection(section.id)"
1722
v-on="$listeners"
@@ -24,11 +29,14 @@
2429

2530
<script>
2631
import { mapActions } from 'vuex'
32+
import AddButton from './add-button.vue'
2733
2834
export default {
2935
name: 'SectionListItem',
36+
components: { AddButton },
3037
props: {
3138
section: { type: Object, required: true },
39+
index: { type: Number, required: true },
3240
},
3341
computed: {
3442
name() {
@@ -41,6 +49,9 @@ export default {
4149
label() {
4250
return this.section.label
4351
},
52+
isFirst() {
53+
return this.index === 0
54+
},
4455
},
4556
methods: {
4657
...mapActions(['removeSection']),

‎app/frontend/editor/components/sidebar-nav/index.vue

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,7 @@
1414
iconName="ri-file-copy-line"
1515
:tooltipMessage="$t('sidebarNav.listPagesTooltip')"
1616
/>
17-
</li>
18-
<li>
19-
<sidebar-nav-link
20-
:routerLinkName="'addSection'"
21-
:active="isAddSectionPaneActive"
22-
iconName="add-box-line"
23-
:tooltipMessage="$t('sidebarNav.addNewSectionTooltip')"
24-
/>
25-
</li>
17+
</li>
2618
<li>
2719
<sidebar-nav-link
2820
:routerLinkName="'listSections'"

‎app/frontend/editor/components/theme-section-list/list-item.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,8 @@ export default {
6565
this.addSection({
6666
sectionDefinition: this.section,
6767
insertAt: this.insertAfter,
68-
}).then(() => {
69-
this.$router.push({ name: 'editPage' })
68+
}).then(section => {
69+
this.$router.push({ name: 'editSection', params: { sectionId: section.id } })
7070
})
7171
},
7272
imageLoaded() {

‎app/frontend/editor/locales/editor.ar.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,7 @@
2323
},
2424
"sidebarNav": {
2525
"listPagesTooltip": "إدارة صفحات موقعك",
26-
"addNewSectionTooltip": "إضافة قسم جديد في أسفل الصفحة",
2726
"managePageSectionsTooltip": "إعادة ترتيب / حذف أقسام الصفحة",
28-
"editPageSettingsTooltip": "تعديل إعدادات الصفحة",
2927
"editStyleTooltip": "تغيير نمط موقعك",
3028
"openImageLibraryTooltip": "فتح معرض الصور",
3129
"leaveEditorTooltip": "العودة إلى التطبيق الرئيسي"
@@ -101,7 +99,8 @@
10199
},
102100
"listPane": {
103101
"title": "تنظيم الأقسام",
104-
"empty": "لا توجد أقسام."
102+
"empty": "لا توجد أقسام.",
103+
"addButton": "إضافة قسم جديد"
105104
}
106105
},
107106
"sectionPane": {

‎app/frontend/editor/locales/editor.en.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,7 @@
2323
},
2424
"sidebarNav": {
2525
"listPagesTooltip": "Manage the pages of your site",
26-
"addNewSectionTooltip": "Add a new section at the bottom of the page",
2726
"managePageSectionsTooltip": "Re-order / delete the sections of the page",
28-
"editPageSettingsTooltip": "Edit the page settings",
2927
"editStyleTooltip": "Change the style of your site",
3028
"openImageLibraryTooltip": "Open the gallery of images",
3129
"leaveEditorTooltip": "Back to the main app"
@@ -101,7 +99,8 @@
10199
},
102100
"listPane": {
103101
"title": "Organize sections",
104-
"empty": "There are no sections."
102+
"empty": "There are no sections.",
103+
"addButton": "Add a new section"
105104
}
106105
},
107106
"sectionPane": {

‎app/frontend/editor/locales/editor.es.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,7 @@
2323
},
2424
"sidebarNav": {
2525
"listPagesTooltip": "Gestionar las páginas de tu sitio",
26-
"addNewSectionTooltip": "Añadir una nueva sección al final de la página",
2726
"managePageSectionsTooltip": "Reordenar / eliminar las secciones de la página",
28-
"editPageSettingsTooltip": "Editar la configuración de la página",
2927
"editStyleTooltip": "Cambiar el diseño de tu sitio",
3028
"openImageLibraryTooltip": "Abrir la galería de imágenes",
3129
"leaveEditorTooltip": "Volver a la aplicación principal"
@@ -101,7 +99,8 @@
10199
},
102100
"listPane": {
103101
"title": "Organizar secciones",
104-
"empty": "No hay secciones."
102+
"empty": "No hay secciones.",
103+
"addButton": "Añadir una nueva sección"
105104
}
106105
},
107106
"sectionPane": {

‎app/frontend/editor/locales/editor.fr.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,7 @@
2323
},
2424
"sidebarNav": {
2525
"listPagesTooltip": "Gérer les pages de votre site",
26-
"addNewSectionTooltip": "Ajouter une nouvelle section au bas de la page",
2726
"managePageSectionsTooltip": "Gérer les sections de la page",
28-
"editPageSettingsTooltip": "Modifier les paramètres de la page",
2927
"editStyleTooltip": "Modifier le style du site",
3028
"openImageLibraryTooltip": "Ouvrir la galerie d'images",
3129
"leaveEditorTooltip": "Retour vers l'application principale"
@@ -101,7 +99,8 @@
10199
},
102100
"listPane": {
103101
"title": "Organiser les sections",
104-
"empty": "Vous n'avez aucune section."
102+
"empty": "Vous n'avez aucune section.",
103+
"addButton": "Ajouter une nouvelle section"
105104
}
106105
},
107106
"sectionPane": {

0 commit comments

Comments
 (0)