Skip to content

Commit ea8fb92

Browse files
graphierosgraphieros
committed
UserOptions - Add optional menu position
1 parent 3420294 commit ea8fb92

File tree

1 file changed

+55
-21
lines changed

1 file changed

+55
-21
lines changed

‎src/atoms/UserOptions.vue‎

Lines changed: 55 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,11 @@ const props = defineProps({
104104
},
105105
noOffset: {
106106
type: Boolean,
107-
default: false
107+
default: true
108+
},
109+
position: {
110+
type: String,
111+
default: 'right'
108112
}
109113
});
110114
@@ -231,11 +235,16 @@ const isInfo = ref({
231235
</script>
232236

233237
<template>
234-
<div v-click-outside="closeIfOpen" data-html2canvas-ignore class="vue-ui-user-options" :style="`z-index: ${zIndex}; height: 34px; position: ${isFullscreen ? 'fixed' : 'absolute'}; top: 0; right:${isFullscreen ? '12px': '0'}; padding: 4px; background:transparent;`">
235-
<div tabindex="0" :title="isOpen ? titles.close || '' : titles.open || ''" data-cy="user-options-summary" :style="`width:32px; position: absolute; top: 0; right: ${noOffset ? 0 : 4}px; padding: 0 0px; display: flex; align-items:center;justify-content:center;height: 36px; cursor:pointer; background:${backgroundColor}`" @click.stop="toggle" @keypress.enter="toggle">
236-
<BaseIcon :name="isOpen ? 'close' : 'menu'" stroke="#CCCCCC" :stroke-width="2" />
238+
<div
239+
v-click-outside="closeIfOpen"
240+
data-html2canvas-ignore
241+
class="vue-ui-user-options"
242+
:style="`z-index: ${zIndex}; height: 34px; position: ${isFullscreen ? 'fixed' : 'absolute'}; top: 0; ${position === 'right' ? `right:${isFullscreen ? '12px': '0'}` : `left:${isFullscreen ? '12px' : '0'}`}; padding: 4px; background:transparent;`">
243+
244+
<div tabindex="0" :title="isOpen ? titles.close || '' : titles.open || ''" data-cy="user-options-summary" :style="`width:32px; position: absolute; top: 0;${position === 'right' ? `right: ${noOffset ? 0 : 4}px` : `left: ${noOffset ? 0 : 4}px`}; padding: 0 0px; display: flex; align-items:center;justify-content:center;height: 36px; cursor:pointer; background:transparent`" @click.stop="toggle" @keypress.enter="toggle">
245+
<BaseIcon :name="isOpen ? 'close' : 'menu'" :stroke="color" :stroke-width="2" />
237246
</div>
238-
<div data-cy="user-options-drawer" :data-open="isOpen" :class="{'vue-ui-user-options-drawer': true}" :style="`background:${backgroundColor}; right:${noOffset ? 0 : 4}px`">
247+
<div data-cy="user-options-drawer" :data-open="isOpen" :class="{'vue-ui-user-options-drawer': true}" :style="`background:${backgroundColor}; ${position === 'right' ? `right: ${noOffset ? 0 : 4}px` : `left: ${noOffset ? 0 : 4}px`}`">
239248

240249
<button tabindex="0" v-if="hasTooltip" data-cy="user-options-tooltip" class="vue-ui-user-options-button" @click="toggleTooltip" @mouseenter="isInfo.tooltip = true" @mouseout="isInfo.tooltip = false">
241250
<template v-if="$slots.optionTooltip">
@@ -245,7 +254,7 @@ const isInfo = ref({
245254
<BaseIcon v-if="isItTooltip" name="tooltip" :stroke="color" style="pointer-events: none;"/>
246255
<BaseIcon v-else name="tooltipDisabled" :stroke="color" style="pointer-events: none"/>
247256
</template>
248-
<div v-if="isDesktop && titles.tooltip && !$slots.optionTooltip" :class="{'button-info' : true, 'button-info-visible': isInfo.tooltip }" :style="{ background: backgroundColor, color: color }">
257+
<div dir="auto" v-if="isDesktop && titles.tooltip && !$slots.optionTooltip" :class="{'button-info-left': position === 'left', 'button-info-right' : position === 'right', 'button-info-left-visible': position === 'left' && isInfo.tooltip, 'button-info-right-visible': position === 'right' && isInfo.tooltip }" :style="{ background: backgroundColor, color: color }">
249258
{{ titles.tooltip }}
250259
</div>
251260
</button>
@@ -258,7 +267,7 @@ const isInfo = ref({
258267
<BaseIcon v-if="isPrinting" name="spin" isSpin :stroke="color" style="pointer-events: none;" />
259268
<BaseIcon v-else name="pdf" :stroke="color" style="pointer-events: none;" />
260269
</template>
261-
<div v-if="isDesktop && titles.pdf && !$slots.optionPdf" :class="{'button-info' : true, 'button-info-visible': isInfo.pdf }" :style="{ background: backgroundColor, color: color }">
270+
<div dir="auto" v-if="isDesktop && titles.pdf && !$slots.optionPdf" :class="{'button-info-left': position === 'left', 'button-info-right' : position === 'right', 'button-info-right-visible': position === 'right' && isInfo.pdf, 'button-info-left-visible': position === 'left' && isInfo.pdf }" :style="{ background: backgroundColor, color: color }">
262271
{{ titles.pdf }}
263272
</div>
264273
</button>
@@ -270,7 +279,7 @@ const isInfo = ref({
270279
<template v-else>
271280
<BaseIcon name="excel" :stroke="color" style="pointer-events: none"/>
272281
</template>
273-
<div v-if="isDesktop && titles.csv && !$slots.optionCsv" :class="{'button-info' : true, 'button-info-visible': isInfo.csv }" :style="{ background: backgroundColor, color: color }">
282+
<div dir="auto" v-if="isDesktop && titles.csv && !$slots.optionCsv" :class="{'button-info-left': position === 'left', 'button-info-right' : position === 'right', 'button-info-right-visible': position === 'right' && isInfo.csv, 'button-info-left-visible': position === 'left' && isInfo.csv }" :style="{ background: backgroundColor, color: color }">
274283
{{ titles.csv }}
275284
</div>
276285
</button>
@@ -283,7 +292,7 @@ const isInfo = ref({
283292
<BaseIcon v-if="isImaging" name="spin" isSpin :stroke="color" style="pointer-events: none;" />
284293
<BaseIcon v-else name="image" :stroke="color" style="pointer-events: none;" />
285294
</template>
286-
<div v-if="isDesktop && titles.img && !$slots.optionImg" :class="{'button-info' : true, 'button-info-visible': isInfo.img }" :style="{ background: backgroundColor, color: color }">
295+
<div dir="auto" v-if="isDesktop && titles.img && !$slots.optionImg" :class="{'button-info-left': position === 'left', 'button-info-right' : position === 'right', 'button-info-right-visible': position === 'right' && isInfo.img, 'button-info-left-visible': position === 'left' && isInfo.img }" :style="{ background: backgroundColor, color: color }">
287296
{{ titles.img }}
288297
</div>
289298
</button>
@@ -295,7 +304,7 @@ const isInfo = ref({
295304
<template v-else>
296305
<BaseIcon :name="isTableOpen ? 'tableClose' : 'tableOpen'" :stroke="color" style="pointer-events: none;" />
297306
</template>
298-
<div v-if="isDesktop && titles.table && !$slots.optionTable" :class="{'button-info' : true, 'button-info-visible': isInfo.table }" :style="{ background: backgroundColor, color: color }">
307+
<div dir="auto" v-if="isDesktop && titles.table && !$slots.optionTable" :class="{'button-info-left': position === 'left', 'button-info-right' : position === 'right', 'button-info-right-visible': position === 'right' && isInfo.table, 'button-info-left-visible': position === 'left' && isInfo.table }" :style="{ background: backgroundColor, color: color }">
299308
{{ titles.table }}
300309
</div>
301310
</button>
@@ -307,7 +316,7 @@ const isInfo = ref({
307316
<template v-else>
308317
<BaseIcon :name="isLabel ? 'labelClose' : 'labelOpen'" :stroke="color" style="pointer-events: none;"/>
309318
</template>
310-
<div v-if="isDesktop && titles.labels && !$slots.optionLabels" :class="{'button-info' : true, 'button-info-visible': isInfo.labels }" :style="{ background: backgroundColor, color: color }">
319+
<div dir="auto" v-if="isDesktop && titles.labels && !$slots.optionLabels" :class="{'button-info-left': position === 'left', 'button-info-right' : position === 'right', 'button-info-right-visible': position === 'right' && isInfo.labels, 'button-info-left-visible': position === 'left' && isInfo.labels }" :style="{ background: backgroundColor, color: color }">
311320
{{ titles.labels }}
312321
</div>
313322
</button>
@@ -319,7 +328,7 @@ const isInfo = ref({
319328
<template v-else>
320329
<BaseIcon name="sort" :stroke="color" style="pointer-events: none;"/>
321330
</template>
322-
<div v-if="isDesktop && titles.sort && !$slots.optionSort" :class="{'button-info' : true, 'button-info-visible': isInfo.sort }" :style="{ background: backgroundColor, color: color }">
331+
<div dir="auto" v-if="isDesktop && titles.sort && !$slots.optionSort" :class="{'button-info-left': position === 'left', 'button-info-right' : position === 'right', 'button-info-right-visible': position === 'right' && isInfo.sort, 'button-info-left-visible': position === 'left' && isInfo.sort }" :style="{ background: backgroundColor, color: color }">
323332
{{ titles.sort }}
324333
</div>
325334
</button>
@@ -332,7 +341,7 @@ const isInfo = ref({
332341
<BaseIcon v-if="isItStacked" name="unstack" :stroke="color" style="pointer-events: none;"/>
333342
<BaseIcon v-else name="stack" :stroke="color" style="pointer-events: none;"/>
334343
</template>
335-
<div v-if="isDesktop && titles.stack && !$slots.optionStack" :class="{'button-info' : true, 'button-info-visible': isInfo.stack }" :style="{ background: backgroundColor, color: color }">
344+
<div dir="auto" v-if="isDesktop && titles.stack && !$slots.optionStack" :class="{'button-info-left': position === 'left', 'button-info-right' : position === 'right', 'button-info-right-visible': position === 'right' && isInfo.stack, 'button-info-left-visible': position === 'left' && isInfo.stack }" :style="{ background: backgroundColor, color: color }">
336345
{{ titles.stack }}
337346
</div>
338347
</button>
@@ -345,7 +354,7 @@ const isInfo = ref({
345354
<BaseIcon v-if="isFullscreen" name="exitFullscreen" :stroke="color" style="pointer-events: none;"/>
346355
<BaseIcon v-if="!isFullscreen" name="fullscreen" :stroke="color" style="pointer-events: none;"/>
347356
</template>
348-
<div v-if="isDesktop && titles.fullscreen && !$slots.optionFullscreen" :class="{'button-info' : true, 'button-info-visible': isInfo.fullscreen }" :style="{ background: backgroundColor, color: color }">
357+
<div dir="auto" v-if="isDesktop && titles.fullscreen && !$slots.optionFullscreen" :class="{'button-info-left': position === 'left', 'button-info-right' : position === 'right', 'button-info-right-visible': position === 'right' && isInfo.fullscreen, 'button-info-left-visible': position === 'left' && isInfo.fullscreen }" :style="{ background: backgroundColor, color: color }">
349358
{{ titles.fullscreen }}
350359
</div>
351360
</button>
@@ -358,7 +367,7 @@ const isInfo = ref({
358367
<BaseIcon v-if="isAnimated" name="play" :stroke="color" style="pointer-events: none;"/>
359368
<BaseIcon v-if="!isAnimated" name="pause" :stroke="color" style="pointer-events: none;"/>
360369
</template>
361-
<div v-if="isDesktop && titles.fullscreen && !$slots.optionAnimation" :class="{'button-info' : true, 'button-info-visible': isInfo.animation }" :style="{ background: backgroundColor, color: color }">
370+
<div dir="auto" v-if="isDesktop && titles.fullscreen && !$slots.optionAnimation" :class="{'button-info-left': position === 'left', 'button-info-right' : position === 'right', 'button-info-right-visible': position === 'right' && isInfo.animation, 'button-info-left-visible': position === 'left' && isInfo.animation }" :style="{ background: backgroundColor, color: color }">
362371
{{ titles.animation }}
363372
</div>
364373
</button>
@@ -434,21 +443,46 @@ const isInfo = ref({
434443
.vue-ui-user-options-button:focus-visible {
435444
outline: 1px solid #CCCCCC;
436445
}
437-
.button-info {
446+
447+
.button-info-right,
448+
.button-info-left {
438449
position: absolute;
439-
right: 100%;
440450
top: 50%;
441-
transform: translateY(-50%);
442451
padding: 4px 12px;
443452
pointer-events: none;
444453
opacity: 0;
454+
transform: translateY(-50%);
455+
}
456+
457+
.button-info-right {
458+
right: 100%;
445459
border-radius: 4px 0 0 4px;
446460
}
447-
.button-info-visible {
448-
animation: showInfo 0.2s ease-in forwards;
461+
.button-info-right-visible {
462+
animation: showInfoRight 0.2s ease-in forwards;
463+
}
464+
465+
.button-info-left {
466+
left: 100%;
467+
border-radius: 0px 4px 4px 0;
468+
}
469+
470+
.button-info-left-visible {
471+
animation: showInfoLeft 0.2s ease-in forwards;
472+
}
473+
474+
@keyframes showInfoRight {
475+
from {
476+
opacity: 0;
477+
transform: translateY(-50%) scale(0.9, 1);
478+
}
479+
to {
480+
opacity: 1;
481+
transform: translateY(-50%) scale(1, 1);
482+
}
449483
}
450484
451-
@keyframes showInfo {
485+
@keyframes showInfoLeft {
452486
from {
453487
opacity: 0;
454488
transform: translateY(-50%) scale(0.9, 1);

0 commit comments

Comments
 (0)