Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Re-style edit menu #490

Merged
merged 8 commits into from
Sep 27, 2023
Merged

Re-style edit menu #490

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
effde35
Re-style the current-widgets section on the edit-menu
rafaellehmkuhl Sep 20, 2023
8157f32
Use common icon button class on edit-menu
rafaellehmkuhl Sep 21, 2023
95f7727
Re-style view cards on the edit-menu
rafaellehmkuhl Sep 21, 2023
0cd5bad
Reorder edit-menu button
rafaellehmkuhl Sep 21, 2023
148b036
Use `mdi-cog` as edit button icon in the edit-menu
rafaellehmkuhl Sep 21, 2023
32ba4a1
Fix having to click twice to delete view
rafaellehmkuhl Sep 21, 2023
d61f45a
Use icons for adding, downloading and uploading views in the edit-menu
rafaellehmkuhl Sep 21, 2023
5f0a4da
Highlight current view in the edit-menu
rafaellehmkuhl Sep 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 54 additions & 51 deletions src/components/EditMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,41 +19,30 @@
:key="view.hash"
class="flex items-center justify-between w-full my-1"
>
<Button class="flex items-center justify-center w-full overflow-auto" @click="store.selectView(view)">
<p class="overflow-hidden text-ellipsis whitespace-nowrap">{{ view.name }}</p>
</Button>
<Button
class="flex items-center justify-center w-8 ml-2 bg-slate-700 aspect-square mdi mdi-pencil hover:bg-slate-500"
@click="renameView(view)"
/>
<Button
class="flex items-center justify-center w-8 ml-2 bg-slate-700 aspect-square mdi mdi-trash-can hover:bg-slate-500"
@click="store.deleteView(view)"
/>
class="flex items-center justify-center w-full h-8 overflow-auto"
:class="{ 'selected-view': view === store.currentView }"
@click="store.selectView(view)"
>
<p class="overflow-hidden text-sm text-ellipsis ml-7 whitespace-nowrap">{{ view.name }}</p>
<div class="grow" />
<div class="icon-btn mdi mdi-cog" @click="renameView(view)" />
<div class="icon-btn mdi mdi-trash-can" @click.stop="store.deleteView(view)" />
</Button>
</div>
</TransitionGroup>
</div>
<div class="grow" />
<div class="w-full px-2 mt-3">
<Button
class="flex items-center justify-center w-full h-8 bg-slate-700 mdi mdi-plus hover:bg-slate-500"
@click="addNewView"
/>
</div>
</div>
<div ref="managementContainer" class="flex flex-col items-center justify-center w-full px-2 shrink">
<Button class="flex items-center justify-center w-full h-8 my-1 bg-slate-700 hover:bg-slate-500">
<label class="flex items-center justify-center h-8 overflow-auto cursor-pointer">
<div ref="managementContainer" class="flex items-center justify-center w-full px-2">
<div class="icon-btn mdi mdi-plus" @click="addNewView" />
<div class="icon-btn">
<label class="flex items-center justify-center w-full h-full cursor-pointer">
<input type="file" accept="application/json" hidden @change="(e: Event) => store.importView(e)" />
<p class="overflow-hidden text-ellipsis whitespace-nowrap">Import view</p>
<span class="mdi mdi-upload" />
</label>
</Button>
<Button
class="flex items-center justify-center w-full h-8 my-1 bg-slate-700 hover:bg-slate-500"
@click="store.exportCurrentView"
>
<p class="overflow-hidden text-ellipsis whitespace-nowrap">Export current view</p>
</Button>
</div>
<div class="icon-btn mdi mdi-download" @click="store.exportCurrentView" />
<div />
</div>
<div class="w-full h-px my-2 sm bg-slate-800/40" />
Expand All @@ -75,22 +64,20 @@
:key="widget.hash"
class="flex items-center justify-between w-full my-1"
>
<Button class="flex items-center justify-center w-full overflow-auto cursor-grab active:cursor-grabbing">
<p class="overflow-hidden text-ellipsis whitespace-nowrap">{{ widget.name }}</p>
</Button>
<Button
class="flex items-center justify-center w-8 ml-2 bg-slate-700 aspect-square mdi mdi-fullscreen hover:bg-slate-500"
:class="{ 'mdi-fullscreen-exit': store.isFullScreen(widget) }"
@click="store.toggleFullScreen(widget)"
/>
<Button
class="flex items-center justify-center w-8 ml-2 bg-slate-700 aspect-square mdi mdi-trash-can hover:bg-slate-500"
@click="store.deleteWidget(widget)"
/>
<Button
class="flex items-center justify-center w-8 ml-2 bg-slate-700 aspect-square mdi mdi-pencil hover:bg-slate-500"
@click="store.openWidgetConfigMenu(widget)"
/>
class="flex items-center justify-center w-full h-8 pl-3 overflow-auto cursor-grab active:cursor-grabbing"
>
<span class="mr-3 text-base text-slate-700 mdi mdi-dots-grid"></span>
<p class="overflow-hidden text-sm text-ellipsis whitespace-nowrap">{{ widget.name }}</p>
<div class="grow" />
<div
class="icon-btn mdi mdi-fullscreen"
:class="{ 'mdi-fullscreen-exit': store.isFullScreen(widget) }"
@click="store.toggleFullScreen(widget)"
/>
<div class="icon-btn mdi mdi-cog" @click="store.openWidgetConfigMenu(widget)" />
<div class="icon-btn mdi mdi-trash-can" @click="store.deleteWidget(widget)" />
</Button>
</div>
</TransitionGroup>
</VueDraggable>
Expand All @@ -116,19 +103,13 @@
<div
v-for="widget in miniWidgetContainer.widgets"
:key="widget.hash"
class="flex items-center justify-between w-full my-1"
class="flex items-center justify-between w-full h-10 my-1"
>
<div class="flex items-center justify-start w-full overflow-auto">
<p class="overflow-hidden select-none text-ellipsis whitespace-nowrap">{{ widget.component }}</p>
</div>
<div
class="flex items-center justify-center w-8 ml-1 text-xs transition-all rounded-sm cursor-pointer bg-slate-700 aspect-square mdi mdi-trash-can hover:bg-slate-500"
@click="store.deleteMiniWidget(widget)"
/>
<div
class="flex items-center justify-center w-8 ml-1 text-xs transition-all rounded-sm cursor-pointer bg-slate-700 aspect-square mdi mdi-pencil hover:bg-slate-500"
@click="widget.managerVars.configMenuOpen = true"
/>
<div class="icon-btn mdi mdi-cog" @click="widget.managerVars.configMenuOpen = true" />
<div class="icon-btn mdi mdi-trash-can" @click="store.deleteMiniWidget(widget)" />
</div>
</TransitionGroup>
</div>
Expand Down Expand Up @@ -370,4 +351,26 @@ const { pressed: mousePressed } = useMousePressed()
.sortable-ghost {
cursor: grabbing;
}

.icon-btn {
display: flex;
align-items: center;
justify-content: center;
height: 1.5rem;
aspect-ratio: 1;
font-size: 0.875rem;
line-height: 1.25rem;
margin-left: 0.25rem;
transition: all;
border-radius: 0.125rem;
cursor: pointer;
@apply bg-slate-700;
}
.icon-btn:hover {
@apply bg-slate-500;
}

.selected-view {
@apply bg-slate-400;
}
</style>
Loading