Skip to content

Commit

Permalink
Use new per-widget editing control on MiniWidgetBar
Browse files Browse the repository at this point in the history
With this new approach, we are able to remove mini-widgets from the `MiniWidgetBar` in an intuitive and transparent way.

The user can basically drag mini-widgets out of the container while in edit-mode, instead of having to get out of edit-mode and click on the widget edit button.
  • Loading branch information
rafaellehmkuhl committed Sep 18, 2023
1 parent 632d87e commit a1cdc76
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 16 deletions.
7 changes: 7 additions & 0 deletions src/components/MiniWidgetContainer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
@start="showWidgetTrashArea = true"
@end="showWidgetTrashArea = false"
@add="refreshWidgetsHashs"
@choose="(event) => emit('chooseMiniWidget', event)"
@unchoose="(event) => emit('unchooseMiniWidget', event)"
>
<div
v-for="item in container.widgets"
Expand Down Expand Up @@ -65,6 +67,11 @@ import type { MiniWidget, MiniWidgetContainer } from '@/types/miniWidgets'
import MiniWidgetInstantiator from './MiniWidgetInstantiator.vue'
const emit = defineEmits<{
(e: 'chooseMiniWidget', value: unknown): void
(e: 'unchooseMiniWidget', value: unknown): void
}>()
// eslint-disable-next-line jsdoc/require-jsdoc
interface Props {
/**
Expand Down
20 changes: 4 additions & 16 deletions src/components/widgets/MiniWidgetsBar.vue
Original file line number Diff line number Diff line change
@@ -1,27 +1,19 @@
<template>
<div ref="widgetBar" class="flex flex-col items-center justify-center w-full h-full p-2 rounded-md bg-slate-600/50">
<div class="flex flex-col items-center justify-center w-full h-full p-2 rounded-md bg-slate-600/50">
<MiniWidgetContainer
:container="widget.options.miniWidgetsContainer"
:wrap="true"
:allow-editing="allowEditing || widgetStore.editingMode"
:allow-editing="widgetStore.editingMode"
@choose-mini-widget="widget.managerVars.allowMoving = false"
@unchoose-mini-widget="widget.managerVars.allowMoving = true"
/>
<button
v-if="hovering || allowEditing"
:class="{ 'text-slate-700': !allowEditing }"
class="absolute top-0 right-0 m-1 transition-all text-slate-100"
@click="allowEditing = !allowEditing"
>
<FontAwesomeIcon icon="fa-solid fa-pen" />
</button>
</div>
</template>

<script setup lang="ts">
import { useElementHover } from '@vueuse/core'
import { v4 as uuid } from 'uuid'
import { toRefs } from 'vue'
import { onBeforeMount } from 'vue'
import { ref } from 'vue'
import { useWidgetManagerStore } from '@/stores/widgetManager'
import type { Widget } from '@/types/widgets'
Expand All @@ -37,10 +29,6 @@ const props = defineProps<{
const widget = toRefs(props).widget
const widgetStore = useWidgetManagerStore()
const allowEditing = ref(false)
const widgetBar = ref()
const hovering = useElementHover(widgetBar)
onBeforeMount(() => {
// Set initial widget options if they don't exist
Expand Down

0 comments on commit a1cdc76

Please sign in to comment.