Skip to content

Commit c54fe3d

Browse files
gordlingordlin
committed
Implement minor slide editor redesign, improve 'full slide' functionality
1 parent bc2f3c0 commit c54fe3d

14 files changed

+430
-256
lines changed

‎src/components/dynamic-editor.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="block">
2+
<div class="block mt-2">
33
<!-- left and right panel buttons for dynamic panels -->
44
<div class="flex">
55
<button

‎src/components/editor.vue

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@
154154
<!-- Save changes button -->
155155
<button
156156
@click="saveChanges"
157-
class="editor-button m-0 bg-black text-white hover:bg-gray-900"
157+
class="editor-button m-0 bg-black text-white hover:bg-gray-900 border border-black"
158158
:disabled="saving"
159159
>
160160
<span class="inline-block">{{
@@ -287,10 +287,10 @@
287287
></slide-toc>
288288
</div>
289289
<!-- Right side -->
290-
<div class="editor-area flex flex-col space-between w-full overflow-y-auto">
290+
<div class="w-full">
291291
<!-- Slide editor -->
292292
<slide-editor
293-
class="flex-1 w-full overflow-y-auto"
293+
class="editor-area w-full"
294294
ref="slide"
295295
:configFileStructure="configFileStructure"
296296
:currentSlide="currentSlide"
@@ -612,22 +612,22 @@ window.addEventListener('resize', () => {
612612
}
613613
614614
.editor-label {
615-
width: 10vw;
616-
text-align: right;
617-
margin-right: 15px;
618-
display: inline-block;
615+
font-weight: 600;
616+
text-align: left;
619617
}
620618
621619
.editor-h3 {
622620
font-size: larger;
623621
}
624622
625623
.editor-input {
626-
padding: 10px 10px;
627-
margin-top: 5px;
628-
border: 1px solid black;
629-
display: inline;
624+
padding: 7px 10px;
625+
margin-top: 3px;
626+
border: 1px solid #a1a1a1;
627+
//display: inline;
630628
border-radius: 5px;
629+
--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
630+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
631631
}
632632
633633
.editor-container .input-error {
@@ -636,13 +636,14 @@ window.addEventListener('resize', () => {
636636
}
637637
638638
.editor-button {
639+
border-radius: 3px;
639640
padding: 5px 12px;
640641
font-weight: 600;
641642
transition-duration: 0.2s;
642643
}
643644
644645
.editor-forms-button {
645-
padding: 11px 15px;
646+
padding: 8px 15px;
646647
border-radius: 5px;
647648
}
648649
@@ -651,8 +652,12 @@ window.addEventListener('resize', () => {
651652
color: black;
652653
}
653654
654-
.editor-button:focus {
655+
button:focus,
656+
.editor-button:focus,
657+
input:focus,
658+
select:focus {
655659
outline: 2px solid royalblue;
660+
z-index: 2;
656661
outline-offset: 2px;
657662
transition-duration: 0.075s;
658663
}
@@ -709,8 +714,8 @@ window.addEventListener('resize', () => {
709714
@media only screen and (min-width: 768px) {
710715
.editor-area {
711716
overflow-y: auto;
712-
height: calc(100vh - 63px);
713-
height: calc(calc(var(--vh, 1vh) * 100) - 63px);
717+
//height: calc(100vh - 80px);
718+
height: calc(calc(var(--vh, 1vh) * 100) - 100px);
714719
}
715720
}
716721
@@ -729,6 +734,7 @@ window.addEventListener('resize', () => {
729734
font-weight: 600;
730735
border: 1px solid black;
731736
transition: background-color 0.2s;
737+
border-radius: 3px;
732738
}
733739
734740
/* Main dropdown icon - required for positioning */

‎src/components/helpers/action-modal.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<vue-final-modal
33
:modalId="name"
4+
:clickToClose="false"
45
content-class="flex flex-col max-h-full overflow-y-auto max-w-xl mx-4 p-4 bg-white border rounded-lg space-y-2"
56
class="flex justify-center items-center"
67
>
@@ -65,6 +66,12 @@ button {
6566
color: black;
6667
}
6768
69+
.vfm__content button:focus {
70+
outline: 2px solid royalblue;
71+
outline-offset: 2px;
72+
transition-duration: 0.075s;
73+
}
74+
6875
.vfm__content button:disabled {
6976
border: 1px solid gray;
7077
color: gray;

‎src/components/helpers/image-preview.vue

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ export default class ImagePreviewV extends Vue {
3939
<style lang="scss" scoped>
4040
.image-item {
4141
width: 30%;
42-
4342
cursor: move; // fallback
4443
cursor: grab;
4544
cursor: -moz-grab;
@@ -61,4 +60,16 @@ export default class ImagePreviewV extends Vue {
6160
padding: 0 !important;
6261
}
6362
}
63+
64+
@media only screen and (max-width: 1500px) {
65+
.image-item {
66+
width: 41%;
67+
}
68+
}
69+
70+
@media only screen and (max-width: 900px) {
71+
.image-item {
72+
width: 90%;
73+
}
74+
}
6475
</style>

‎src/components/helpers/metadata-content.vue

Lines changed: 17 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
id="metaTitle"
1313
:value="metadata.title"
1414
@change="metadataChanged"
15-
class="metadata-input"
15+
class="metadata-input editor-input"
1616
/>
1717
<p class="metadata-subcaption">
1818
{{ $t('editor.metadataForm.caption.title') }}
@@ -79,7 +79,7 @@
7979
:value="metadata.introTitle"
8080
@change="metadataChanged"
8181
id="introTitle"
82-
class="metadata-input"
82+
class="metadata-input editor-input"
8383
/>
8484
<p class="metadata-subcaption">
8585
{{ $t('editor.metadataForm.caption.introTitle') }}
@@ -97,7 +97,7 @@
9797
id="introSubtitle"
9898
:value="metadata.introSubtitle"
9999
@change="metadataChanged"
100-
class="metadata-input"
100+
class="metadata-input editor-input"
101101
/>
102102
<p class="metadata-subcaption">
103103
{{ $t('editor.metadataForm.caption.introSubtitle') }}
@@ -117,20 +117,20 @@
117117
id="metaLogo"
118118
@change="$emit('logo-source-changed', $event)"
119119
:value="metadata.logoName"
120-
class="metadata-input w-full lg:w-1/2"
120+
class="metadata-input editor-input w-full lg:w-1/2"
121121
/>
122122
<!-- Upload button -->
123123
<button
124124
@click.stop="openFileSelector"
125-
class="metadata-button mb-0.5 bg-black border border-black text-white hover:bg-gray-800"
125+
class="editor-button py-1.5 bg-black border border-black text-white hover:bg-gray-800"
126126
>
127127
{{ $t('editor.browse') }}
128128
</button>
129129
<!-- Delete button -->
130130
<button
131131
v-if="metadata.logoName || metadata.logoPreview"
132132
@click.stop="removeLogo"
133-
class="metadata-button border mb-0.5 border-black"
133+
class="editor-button py-1.5 border border-black"
134134
>
135135
{{ $t('editor.remove') }}
136136
</button>
@@ -169,7 +169,7 @@
169169
id="logoAltText"
170170
:value="metadata.logoAltText"
171171
@change="metadataChanged"
172-
class="metadata-input"
172+
class="metadata-input editor-input"
173173
/>
174174
<p class="metadata-subcaption">
175175
{{ $t('editor.metadataForm.caption.logoAltText') }}
@@ -193,7 +193,7 @@
193193
id="contextLink"
194194
:value="metadata.contextLink"
195195
@change="metadataChanged"
196-
class="metadata-input"
196+
class="metadata-input editor-input"
197197
/>
198198
<p class="metadata-subcaption">
199199
{{ $t('editor.metadataForm.caption.contextLink') }}
@@ -211,7 +211,7 @@
211211
id="contextLabel"
212212
:value="metadata.contextLabel"
213213
@change="metadataChanged"
214-
class="metadata-input"
214+
class="metadata-input editor-input"
215215
/>
216216
<p class="metadata-subcaption">
217217
{{ $t('editor.metadataForm.caption.contextLabel') }}
@@ -224,7 +224,7 @@
224224
<label class="metadata-label" for="dateModified">{{ $t('editor.dateModified') }}</label>
225225
<div v-show="editing">
226226
<input
227-
class="metadata-input w-full md:w-1/3"
227+
class="metadata-input editor-input w-full md:w-1/3"
228228
type="date"
229229
name="dateModified"
230230
id="dateModified"
@@ -279,15 +279,17 @@ h2 {
279279
}
280280
281281
.metadata-input {
282-
padding: 8px 10px;
283-
border: 1px solid lightgray;
282+
//padding: 8px 10px;
283+
border: 1px solid lightgray !important;
284284
// outline: 1px solid lightgray;
285285
display: block;
286286
border-radius: 5px;
287287
margin-top: 0.15rem;
288288
margin-bottom: 0.25rem;
289289
max-width: 100%;
290290
width: 1200px;
291+
--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
292+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
291293
}
292294
293295
.metadata-subcaption {
@@ -298,36 +300,14 @@ h2 {
298300
.metadata-select {
299301
padding: 8px 10px;
300302
border: 1px solid lightgray;
303+
background-color: white;
301304
display: block;
302305
border-radius: 5px;
303306
margin-top: 0.15rem;
304307
margin-bottom: 0.25rem;
305308
max-width: 100%;
306309
width: 300px;
307-
}
308-
309-
.metadata-button {
310-
padding: 8px 15px;
311-
margin: 0;
312-
border-radius: 5px;
313-
font-weight: 600;
314-
transition-duration: 0.2s;
315-
}
316-
317-
.metadata-button:hover:enabled {
318-
background-color: #dbdbdb;
319-
color: black;
320-
}
321-
322-
.metadata-button:focus {
323-
outline: 2px solid royalblue;
324-
outline-offset: 2px;
325-
transition-duration: 0.075s;
326-
}
327-
328-
.metadata-button:disabled {
329-
border: 1px solid gray;
330-
color: gray;
331-
cursor: not-allowed;
310+
--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
311+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
332312
}
333313
</style>

‎src/components/helpers/multi-option-modal.vue

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<template>
2+
<vue-final-modal
3+
:modalId="name"
4+
:clickToClose="false"
5+
content-class="flex flex-col max-h-full overflow-y-auto max-w-xl mx-4 p-4 bg-white border rounded-lg space-y-2"
6+
class="flex justify-center items-center"
7+
>
8+
<div class="mx-5 my-2">
9+
<h2 v-if="title" slot="header" class="text-2xl font-bold mb-1">{{ title }}</h2>
10+
<p v-if="message">{{ message }}</p>
11+
<div class="w-full flex justify-end mt-3">
12+
<button
13+
v-for="option in options"
14+
class="editor-button bg-black text-white hover:bg-gray-800"
15+
@click="
16+
() => {
17+
option.action();
18+
this.$vfm.close(this.name);
19+
}
20+
"
21+
>
22+
{{ option.label }}
23+
</button>
24+
<button v-if="cancelAllowed" class="editor-button hover:bg-gray-800" @click="onCancel">
25+
{{ $t('editor.cancel') }}
26+
</button>
27+
<!-- <button class="editor-button bg-black text-white hover:bg-gray-800" @click="onOk">-->
28+
<!-- {{ $t('editor.slides.continue') }}-->
29+
<!-- </button>-->
30+
<!-- <button class="editor-button hover:bg-gray-800" @click="onCancel">-->
31+
<!-- {{ $t('editor.cancel') }}-->
32+
<!-- </button>-->
33+
</div>
34+
</div>
35+
</vue-final-modal>
36+
</template>
37+
38+
<script lang="ts">
39+
import { Options, Prop, Vue } from 'vue-property-decorator';
40+
import { VueFinalModal } from 'vue-final-modal';
41+
// import { Options } from 'vue-property-decorator';
42+
43+
interface modalOption {
44+
label: string;
45+
action: () => void;
46+
}
47+
48+
@Options({
49+
components: {
50+
'vue-final-modal': VueFinalModal
51+
}
52+
})
53+
export default class MetadataEditorV extends Vue {
54+
@Prop() name!: string;
55+
@Prop() title!: string;
56+
@Prop() message!: string | undefined;
57+
@Prop() options!: modalOption[];
58+
@Prop({ default: false }) cancelAllowed!: boolean;
59+
60+
onCancel(): void {
61+
this.$emit('Cancel');
62+
this.$vfm.close(this.name);
63+
}
64+
}
65+
</script>
66+
67+
<style scoped lang="css">
68+
h2 {
69+
line-height: 1.3;
70+
border-bottom: 0px;
71+
}
72+
73+
button {
74+
border-radius: 3px;
75+
padding: 5px 12px;
76+
margin: 0px 10px;
77+
font-weight: 600;
78+
transition-duration: 0.2s;
79+
}
80+
81+
.vfm__content button:hover:enabled {
82+
background-color: #dbdbdb;
83+
color: black;
84+
}
85+
86+
.vfm__content button:focus {
87+
outline: 2px solid royalblue;
88+
outline-offset: 2px;
89+
transition-duration: 0.075s;
90+
}
91+
92+
.vfm__content button:disabled {
93+
border: 1px solid gray;
94+
color: gray;
95+
cursor: not-allowed;
96+
}
97+
</style>

0 commit comments

Comments
 (0)