Skip to content

1851 cms graph action buttons not aligned with topbar buttons #1931

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

Open
brucefrankstad26-beep wants to merge 3 commits into
base: main
Choose a base branch
from
+26 −26
Open

1851 cms graph action buttons not aligned with topbar buttons #1931

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dfdbe2e
Dark Mode minor fix
brucefrankstad26-beep Aug 21, 2026
51d80b2
tmp
brucefrankstad26-beep Aug 21, 2026
53257f4
Graph button alignment and Fullscreen fix
brucefrankstad26-beep Aug 25, 2026
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
10 changes: 5 additions & 5 deletions cms/src/components/groups/GroupGraph/GraphSettingsMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,11 @@ function updateTreeColumnCount(event: Event) {
class="pointer-events-auto shrink-0 sm:hidden"
>
<template #trigger>
<LButton size="sm" variant="secondary" :icon="Cog6ToothIcon" class="h-9 w-9" />
<LButton size="lg" variant="secondary" :icon="Cog6ToothIcon" class="h-9 w-9" />
</template>
<LButton
variant="tertiary"
size="sm"
size="lg"
role="menuitem"
class="w-full justify-start"
@click="
Expand Down Expand Up @@ -71,7 +71,7 @@ function updateTreeColumnCount(event: Event) {
<LButton
v-if="savedLayoutExists"
variant="tertiary"
size="sm"
size="lg"
role="menuitem"
class="w-full justify-start"
@click="
Expand All @@ -83,7 +83,7 @@ function updateTreeColumnCount(event: Event) {
</LButton>
<LButton
variant="tertiary"
size="sm"
size="lg"
role="menuitem"
class="w-full justify-start"
@click="
Expand All @@ -96,7 +96,7 @@ function updateTreeColumnCount(event: Event) {
<LButton
v-if="savedLayoutExists"
variant="tertiary"
size="sm"
size="lg"
role="menuitem"
class="w-full justify-start"
@click="
Expand Down
42 changes: 21 additions & 21 deletions cms/src/components/groups/GroupGraph/GroupGraph.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,19 +261,19 @@ watch(isFullscreen, () => {
<Panel position="bottom-left">
<div class="flex flex-col gap-1">
<LButton
size="sm"
size="lg"
variant="secondary"
:icon="PlusSmallIcon"
@click="zoomIn({ duration: 80 })"
/>
<LButton
size="sm"
size="lg"
variant="secondary"
:icon="MinusIcon"
@click="zoomOut({ duration: 80 })"
/>
<LButton
size="sm"
size="lg"
variant="secondary"
:icon="ArrowsPointingInIcon"
@click="fitView({ padding: 0.18, duration: 120 })"
Expand All @@ -283,17 +283,17 @@ watch(isFullscreen, () => {
</VueFlow>

<div
class="pointer-events-none absolute left-3 right-3 top-1 z-40 flex items-start gap-2 py-2 sm:right-4 sm:top-2"
class="pointer-events-none absolute left-3 right-3 top-1 z-40 flex items-start gap-2 py-2 sm:right-1 sm:top-2"
>
<div
class="pointer-events-auto -my-2 min-w-0 flex-1 overflow-x-auto py-2 scrollbar-hide"
>
<div class="flex w-max flex-nowrap items-start gap-2 sm:ml-auto">
<div class="ml-1 flex w-max flex-nowrap items-start gap-2 sm:ml-auto">
<div
class="pointer-events-auto flex h-9 shrink-0 divide-x divide-zinc-300 overflow-hidden rounded-md shadow-sm ring-1 ring-zinc-300"
class="pointer-events-auto flex h-9 shrink-0 divide-x divide-zinc-500 overflow-hidden rounded-md shadow-sm"
>
<LButton
size="sm"
size="lg"
variant="secondary"
:icon="CursorArrowRaysIcon"
:main-dynamic-css="segClass(interactionMode === 'select')"
Expand All @@ -302,7 +302,7 @@ watch(isFullscreen, () => {
Select
</LButton>
<LButton
size="sm"
size="lg"
variant="secondary"
:icon="HandRaisedIcon"
:main-dynamic-css="segClass(interactionMode === 'drag')"
Expand All @@ -312,18 +312,18 @@ watch(isFullscreen, () => {
</LButton>
</div>
<div
class="pointer-events-auto hidden h-9 shrink-0 divide-x divide-zinc-300 overflow-hidden rounded-md shadow-sm ring-1 ring-zinc-300 sm:flex"
class="pointer-events-auto hidden h-9 shrink-0 divide-x divide-zinc-500 overflow-hidden rounded-md shadow-sm sm:flex"
>
<LButton
size="sm"
size="lg"
variant="secondary"
:main-dynamic-css="segClass(isTopToBottom)"
@click="selectLayoutDirection('TB')"
>
Top down
</LButton>
<LButton
size="sm"
size="lg"
variant="secondary"
:main-dynamic-css="segClass(!isTopToBottom)"
@click="selectLayoutDirection('LR')"
Expand All @@ -332,7 +332,7 @@ watch(isFullscreen, () => {
</LButton>
</div>
<div
class="pointer-events-auto hidden h-9 shrink-0 items-center gap-2 rounded-md bg-white px-3 text-xs text-zinc-600 shadow-sm ring-1 ring-zinc-300 sm:flex"
class="pointer-events-auto hidden h-9 shrink-0 items-center gap-2 rounded-md px-3 text-xs shadow-sm dark:bg-slate-700 dark:text-zinc-100 sm:flex"
>
<label for="group-graph-columns-desktop" class="font-medium">
Columns
Expand All @@ -344,16 +344,16 @@ watch(isFullscreen, () => {
:max="TREE_MAX_COLUMNS"
step="1"
:value="treeColumnCount"
class="h-2 w-28 cursor-pointer appearance-none rounded-lg bg-zinc-200 accent-zinc-700"
class="h-2 w-28 cursor-pointer appearance-none rounded-lg bg-zinc-200 dark:accent-zinc-100"
@input="updateTreeColumnCount"
/>
<span class="w-3 text-right font-medium text-zinc-700">
<span class="w-3 text-right font-medium dark:text-zinc-100">
{{ treeColumnCount }}
</span>
</div>
<LButton
v-if="hasUnsavedLayout"
size="sm"
size="lg"
variant="secondary"
class="pointer-events-auto h-9 shrink-0"
@click="saveCustomLayout"
Expand All @@ -362,15 +362,15 @@ watch(isFullscreen, () => {
</LButton>
<LButton
v-if="savedLayout"
size="sm"
size="lg"
variant="secondary"
class="pointer-events-auto hidden h-9 shrink-0 sm:flex"
@click="applyStoredLayout()"
>
Use saved layout
</LButton>
<LButton
size="sm"
size="lg"
variant="secondary"
class="pointer-events-auto hidden h-9 shrink-0 sm:flex"
@click="resetLayout"
Expand All @@ -379,7 +379,7 @@ watch(isFullscreen, () => {
</LButton>
<LButton
v-if="savedLayout"
size="sm"
size="lg"
variant="secondary"
class="pointer-events-auto hidden h-9 shrink-0 sm:flex"
@click="clearSavedLayout"
Expand All @@ -398,7 +398,7 @@ watch(isFullscreen, () => {
/>
<LButton
v-if="!isFullscreen"
size="sm"
size="lg"
variant="secondary"
:icon="isFullscreen ? ArrowsPointingInIcon : ArrowsPointingOutIcon"
class="pointer-events-auto h-9 w-9 shrink-0"
Expand All @@ -408,7 +408,7 @@ watch(isFullscreen, () => {
</div>
<LButton
v-if="isFullscreen"
size="sm"
size="lg"
variant="secondary"
:icon="XMarkIcon"
class="pointer-events-auto h-9 w-9 shrink-0"
Expand All @@ -431,7 +431,7 @@ watch(isFullscreen, () => {
>
<LButton
variant="tertiary"
size="sm"
size="lg"
class="w-full justify-start"
@click="openContextGroup"
>
Expand Down
Loading