Skip to content

Commit daf0eff

Browse files
RyanBirtch-aotRyanBirtch-aot
committed
Progress for css sticky
1 parent 01d0832 commit daf0eff

3 files changed

Lines changed: 175 additions & 198 deletions

File tree

‎app/frontend/src/components/designer/FloatButton.vue‎

Lines changed: 116 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,6 @@ const properties = defineProps({
5353
const emit = defineEmits(['redo', 'save', 'undo']);
5454
5555
const isAtTopOfPage = ref(true);
56-
const isCollapsed = ref(false);
5756
5857
// We need to handle scroll through an event listener because computed values do not update on a scroll event
5958
window.addEventListener('scroll', onEventScroll);
@@ -78,22 +77,6 @@ const SCROLL_TEXT = computed(() => {
7877
return t('trans.floatButton.bottom');
7978
});
8079
81-
// This is the icon for the button that lets you collapse the actions
82-
const COLLAPSE_ICON = computed(() => {
83-
if (!isCollapsed.value) {
84-
return 'mdi:mdi-close';
85-
}
86-
return 'mdi:mdi-menu';
87-
});
88-
89-
// This is the text for the button that lets you collapse the actions
90-
const COLLAPSE_TEXT = computed(() => {
91-
if (!isCollapsed.value) {
92-
return t('trans.floatButton.collapse');
93-
}
94-
return t('trans.floatButton.actions');
95-
});
96-
9780
// This is the text for the button that lets you save
9881
const SAVE_TEXT = computed(() => {
9982
if (properties.savedStatus === 'Saved') {
@@ -116,10 +99,6 @@ function onEventScroll() {
11699
isAtTopOfPage.value = window.scrollY === 0 ? true : false;
117100
}
118101
119-
function onClickCollapse() {
120-
isCollapsed.value = !isCollapsed.value;
121-
}
122-
123102
function onClickSave() {
124103
emit('save');
125104
}
@@ -151,11 +130,7 @@ function goToPreview() {
151130
}
152131
153132
defineExpose({
154-
COLLAPSE_ICON,
155-
COLLAPSE_TEXT,
156133
isAtTopOfPage,
157-
isCollapsed,
158-
onClickCollapse,
159134
onClickSave,
160135
onClickScroll,
161136
onEventScroll,
@@ -166,146 +141,139 @@ defineExpose({
166141
</script>
167142

168143
<template>
169-
<div class="d-flex flex-column float-button">
170-
<div v-if="!isCollapsed">
171-
<div class="fab d-flex flex-column" data-cy="saveButton">
172-
<span :lang="locale">{{ SAVE_TEXT }}</span>
173-
<v-btn
174-
:disabled="!properties.canSave && properties.isFormSaved"
175-
class="ma-2"
176-
density="compact"
177-
icon
178-
@click="onClickSave"
179-
>
180-
<v-icon
181-
v-if="!properties.isSaving"
182-
icon="mdi:mdi-content-save"
183-
></v-icon>
184-
<v-progress-circular v-else indeterminate></v-progress-circular>
185-
</v-btn>
186-
</div>
144+
<v-toolbar class="sticky-toolbar" color="white" density="comfortable" flat>
145+
<!-- Scroll Button -->
146+
<div class="d-flex flex-column align-center mx-2">
147+
<span :lang="locale">{{ SCROLL_TEXT }}</span>
148+
<v-btn density="compact" icon @click="onClickScroll">
149+
<v-icon :icon="SCROLL_ICON"></v-icon>
150+
</v-btn>
151+
</div>
152+
153+
<v-spacer></v-spacer>
154+
155+
<!-- Save Button -->
156+
<div class="d-flex flex-column align-center mx-2" data-cy="saveButton">
157+
<span :lang="locale">{{ SAVE_TEXT }}</span>
158+
<v-btn
159+
:disabled="!properties.canSave && properties.isFormSaved"
160+
density="compact"
161+
icon
162+
@click="onClickSave"
163+
>
164+
<v-icon v-if="!properties.isSaving" icon="mdi:mdi-content-save" />
165+
<v-progress-circular v-else indeterminate size="20" />
166+
</v-btn>
167+
</div>
168+
169+
<!-- Preview Button -->
170+
<div
171+
class="d-flex flex-column align-center mx-2"
172+
:class="{ 'disabled-router': !canPreview }"
173+
data-cy="previewRouterLink"
174+
@click="handlePreviewClick"
175+
>
176+
<span :lang="locale">{{ $t('trans.floatButton.preview') }}</span>
177+
<v-btn :disabled="!canPreview" density="compact" icon>
178+
<v-icon icon="mdi:mdi-eye" />
179+
</v-btn>
180+
</div>
181+
182+
<!-- Undo Button -->
183+
<div class="d-flex flex-column align-center mx-2" data-cy="undoButton">
184+
<span :lang="locale">{{ $t('trans.floatButton.undo') }}</span>
185+
<v-btn
186+
:disabled="!properties.undoEnabled"
187+
density="compact"
188+
icon
189+
@click="$emit('undo')"
190+
>
191+
<v-icon icon="mdi:mdi-undo" />
192+
</v-btn>
193+
</div>
194+
195+
<!-- Redo Button -->
196+
<div class="d-flex flex-column align-center mx-2" data-cy="redoButton">
197+
<span :lang="locale">{{ $t('trans.floatButton.redo') }}</span>
198+
<v-btn
199+
:disabled="!properties.redoEnabled"
200+
density="compact"
201+
icon
202+
@click="$emit('redo')"
203+
>
204+
<v-icon icon="mdi:mdi-redo" />
205+
</v-btn>
206+
</div>
207+
208+
<!-- Manage Button (Router-link) -->
209+
<router-link
210+
v-slot="{ navigate }"
211+
:to="{
212+
name: 'FormManage',
213+
query: { f: properties.formId, fd: false, d: properties.draftId },
214+
}"
215+
custom
216+
>
187217
<div
188-
class="fab d-flex flex-column"
189-
:class="{ 'disabled-router': !canPreview }"
190-
data-cy="previewRouterLink"
191-
@click="handlePreviewClick"
218+
class="d-flex flex-column align-center mx-2"
219+
:class="{ 'disabled-router': !isManageEnabled }"
220+
data-cy="settingsRouterLink"
192221
>
193-
<span :lang="locale">{{ $t('trans.floatButton.preview') }}</span>
194-
<v-btn :disabled="!canPreview" class="ma-2" density="compact" icon>
195-
<v-icon icon="mdi:mdi-eye"></v-icon>
196-
</v-btn>
197-
</div>
198-
<div class="fab d-flex flex-column" data-cy="undoButton">
199-
<span :lang="locale">{{ $t('trans.floatButton.undo') }}</span>
222+
<span :lang="locale">{{ $t('trans.floatButton.manage') }}</span>
200223
<v-btn
201-
:disabled="!properties.undoEnabled"
202-
class="ma-2"
224+
:disabled="!isManageEnabled"
203225
density="compact"
204226
icon
205-
@click="$emit('undo')"
227+
class="inverted-colour"
228+
@click="navigate"
206229
>
207-
<v-icon icon="mdi:mdi-undo"></v-icon>
230+
<v-icon icon="mdi:mdi-cog" />
208231
</v-btn>
209232
</div>
210-
<div class="fab d-flex flex-column" data-cy="redoButton">
211-
<span :lang="locale">{{ $t('trans.floatButton.redo') }}</span>
233+
</router-link>
234+
235+
<!-- Publish Button (Router-link) -->
236+
<router-link
237+
v-slot="{ navigate }"
238+
:to="{
239+
name: 'PublishForm',
240+
query: { f: properties.formId, fd: true, d: properties.draftId },
241+
}"
242+
custom
243+
>
244+
<div
245+
class="d-flex flex-column align-center mx-2"
246+
:class="{ 'disabled-router': !isPublishEnabled }"
247+
data-cy="publishRouterLink"
248+
role="link"
249+
>
250+
<span :lang="locale">{{ $t('trans.floatButton.publish') }}</span>
212251
<v-btn
213-
:disabled="!properties.redoEnabled"
214-
class="ma-2"
252+
:disabled="!isPublishEnabled"
215253
density="compact"
216254
icon
217-
@click="$emit('redo')"
255+
class="inverted-colour"
256+
@click="navigate"
218257
>
219-
<v-icon icon="mdi:mdi-redo"></v-icon>
258+
<v-icon icon="mdi:mdi-file-upload" />
220259
</v-btn>
221260
</div>
222-
<router-link
223-
v-slot="{ navigate }"
224-
:to="{
225-
name: 'FormManage',
226-
query: { f: properties.formId, fd: false, d: properties.draftId },
227-
}"
228-
custom
229-
>
230-
<div
231-
class="fab d-flex flex-column"
232-
:class="{ 'disabled-router': !isManageEnabled }"
233-
data-cy="settingsRouterLink"
234-
>
235-
<span :lang="locale">{{ $t('trans.floatButton.manage') }}</span>
236-
<v-btn
237-
:disabled="!isManageEnabled"
238-
class="ma-2 inverted-colour"
239-
density="compact"
240-
icon
241-
@click="navigate"
242-
>
243-
<v-icon icon="mdi:mdi-cog"></v-icon>
244-
</v-btn>
245-
</div>
246-
</router-link>
247-
<router-link
248-
v-slot="{ navigate }"
249-
:to="{
250-
name: 'PublishForm',
251-
query: { f: properties.formId, fd: true, d: properties.draftId },
252-
}"
253-
custom
254-
>
255-
<div
256-
class="fab d-flex flex-column"
257-
:class="{ 'disabled-router': !isPublishEnabled }"
258-
data-cy="publishRouterLink"
259-
role="link"
260-
>
261-
<span :lang="locale">{{ $t('trans.floatButton.publish') }}</span>
262-
<v-btn
263-
:disabled="!isPublishEnabled"
264-
class="ma-2 inverted-colour"
265-
density="compact"
266-
icon
267-
@click="navigate"
268-
>
269-
<v-icon icon="mdi:mdi-file-upload"></v-icon>
270-
</v-btn>
271-
</div>
272-
</router-link>
273-
</div>
274-
<div class="fab d-flex flex-column">
275-
<span :lang="locale">{{ COLLAPSE_TEXT }}</span>
276-
<v-btn
277-
class="ma-2 inverted-colour"
278-
density="compact"
279-
icon
280-
@click="onClickCollapse"
281-
>
282-
<v-icon :icon="COLLAPSE_ICON"></v-icon>
283-
</v-btn>
284-
</div>
285-
<div class="fab d-flex flex-column">
286-
<span :lang="locale">{{ SCROLL_TEXT }}</span>
287-
<v-btn class="ma-2" density="compact" icon @click="onClickScroll">
288-
<v-icon :icon="SCROLL_ICON"></v-icon>
289-
</v-btn>
290-
</div>
291-
</div>
261+
</router-link>
262+
</v-toolbar>
292263
</template>
293264

294265
<style lang="scss">
295-
.float-button {
296-
min-width: 80px;
297-
padding-right: 20px;
298-
padding-bottom: 40px;
299-
}
300-
301-
.fab {
302-
justify-content: center;
303-
align-items: center;
304-
align-content: center;
305-
font-size: 12px;
306-
font-style: normal;
307-
font-weight: normal;
308-
font-family: BCSans !important;
266+
.sticky-toolbar {
267+
position: sticky;
268+
top: 0;
269+
z-index: 100;
270+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
271+
background-color: white;
272+
273+
.disabled-router {
274+
opacity: 0.5;
275+
pointer-events: none;
276+
}
309277
310278
.v-btn {
311279
margin-top: 2px !important;

0 commit comments

Comments
 (0)