Skip to content

Commit 55dd9dd

Browse files
dejandejan
committed
Improve styling
1 parent 0a7a42f commit 55dd9dd

File tree

5 files changed

+206
-8
lines changed

5 files changed

+206
-8
lines changed

Diff for: ‎extension/src/components/Requests.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ function classForStatus(status) {
4444
cls = "bg-red-700/80"
4545
break;
4646
default:
47-
cls = "bg-purple-700/70"
47+
cls = "bg-blue-700/80"
4848
}
4949
return cls + " text-white p-1 rounded text-xs"
5050
}

Diff for: ‎extension/src/components/Toolbar.vue

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<template>
2-
<span class="fixed right-0 z-10 cursor-pointer space-x-2 text-base p-[6px]">
3-
<Button size="small" severity="secondary" text outlined rounded class="text-xs" icon="pi pi-ban" label="Clear" @click="eventsStore.clear()"></Button>
4-
<InputSwitch v-model="settingsStore.lockOn" /><span class="text-xs">Lock-on</span>
5-
<Button size="small" severity="secondary" text outlined rounded class="text-xs" icon="pi pi-sliders-h" label="Settings" @click="settingsVisible=true"></Button>
2+
<span class="fixed right-0 z-10 cursor-pointer flex text-base pr-2 pt-[6px] space-x-1 bg-white">
3+
<span class="flex center"><ToolbarToggle v-model="settingsStore.lockOn" off-icon="pi pi-thumbtack" off-label="Pin" on-icon="pi pi-thumbtack" on-label="Pin" /></span>
4+
<span class="flex"><ToolbarButton icon="pi pi-ban" label="Clear" @click="eventsStore.clear()" /></span>
5+
<span class="flex"><ToolbarButton icon="pi pi-sliders-h" label="Settings" @click="settingsVisible=true"/></span>
66
</span>
77
<SettingsDialog v-model:visible="settingsVisible" @save="settingsVisible=false"/>
88
</template>
99

1010
<script setup>
11-
import Button from 'primevue/button';
12-
import InputSwitch from 'primevue/inputswitch';
11+
import ToolbarButton from './wrappers/ToolbarButton.vue';
12+
import ToolbarToggle from './wrappers/ToolbarToggle.vue';
1313
import SettingsDialog from './SettingsDialog.vue';
1414
import { useEventsStore } from '../stores/events';
1515
import { useSettingsStore } from '../stores/settings';

Diff for: ‎extension/src/components/wrappers/SelectionTable.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1182,7 +1182,7 @@ const preset = {
11821182
class: [
11831183
// Color
11841184
'dark:text-white/80',
1185-
{ 'bg-slate-800 text-white dark:bg-surface-500/30': context.selected && context.stripedRows },
1185+
{ 'bg-gray-700 text-white dark:bg-surface-500/30': context.selected && context.stripedRows },
11861186
// { 'bg-surface-0 text-surface-600 dark:bg-surface-800': !context.selected },
11871187
{ 'odd:bg-surface-0 odd:text-surface-600 dark:odd:bg-surface-800 even:bg-surface-100 even:text-surface-600 dark:even:bg-surface-900/60': context.stripedRows && !context.selected },
11881188

Diff for: ‎extension/src/components/wrappers/ToolbarButton.vue

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<template>
2+
<Button size="small" rounded class="text-xs" :pt="preset" outline :ptOptions="{ mergeSections: false, mergeProps: false }" />
3+
</template>
4+
5+
<script setup>
6+
import Button from 'primevue/button';
7+
8+
const preset = {
9+
root: ({ props, context, parent }) => ({
10+
class: [
11+
'relative',
12+
13+
// Alignments
14+
'items-center justify-center inline-flex text-center align-bottom',
15+
16+
// Sizes & Spacing
17+
'text-sm',
18+
{
19+
'px-2.5 py-1.5 min-w-[2rem]': props.size === null,
20+
'px-2 py-1': props.size === 'small',
21+
'px-3 py-2': props.size === 'large'
22+
},
23+
{
24+
'h-8 w-8 p-0': props.label == null && props.icon !== null
25+
},
26+
27+
// Shapes
28+
29+
{ 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
30+
{ 'rounded-none first:rounded-l-md last:rounded-r-md self-center': parent.instance.$name == 'InputGroup' },
31+
32+
// Colors
33+
'text-surface-500 hover:bg-surface-200 dark:hover:bg-surface-300 hover:ring-surface-600 dark:hover:ring-surface-300',
34+
'active:bg-surface-400',
35+
36+
// Disabled
37+
{ 'opacity-60 pointer-events-none cursor-default': context.disabled },
38+
39+
// Transitions
40+
'transition duration-200 ease-in-out',
41+
42+
// Misc
43+
'cursor-pointer overflow-hidden select-none'
44+
]
45+
}),
46+
label: ({ props }) => ({
47+
class: [
48+
'duration-200',
49+
'font-semibold',
50+
{
51+
'hover:underline': props.link
52+
},
53+
{ 'flex-1': props.label !== null, 'invisible w-0': props.label == null }
54+
]
55+
}),
56+
icon: ({ props }) => ({
57+
class: [
58+
'mx-0',
59+
{
60+
'mr-2': props.iconPos == 'left' && props.label != null,
61+
'ml-2 order-1': props.iconPos == 'right' && props.label != null,
62+
'mb-2': props.iconPos == 'top' && props.label != null,
63+
'mt-2': props.iconPos == 'bottom' && props.label != null
64+
}
65+
]
66+
}),
67+
loadingicon: ({ props }) => ({
68+
class: [
69+
'h-3 w-3',
70+
'mx-0',
71+
{
72+
'mr-2': props.iconPos == 'left' && props.label != null,
73+
'ml-2 order-1': props.iconPos == 'right' && props.label != null,
74+
'mb-2': props.iconPos == 'top' && props.label != null,
75+
'mt-2': props.iconPos == 'bottom' && props.label != null
76+
},
77+
'animate-spin'
78+
]
79+
}),
80+
badge: ({ props }) => ({
81+
class: [{ 'ml-2 w-4 h-4 leading-none flex items-center justify-center': props.badge }]
82+
})
83+
};
84+
85+
</script>

Diff for: ‎extension/src/components/wrappers/ToolbarToggle.vue

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<template>
2+
<ToggleButton :pt="preset" outline :ptOptions="{ mergeSections: false, mergeProps: false }" />
3+
</template>
4+
5+
<script setup>
6+
import ToggleButton from 'primevue/togglebutton';
7+
8+
const preset = {
9+
root: {
10+
class: [
11+
'border-none',
12+
'relative',
13+
14+
// Alignment
15+
'inline-flex',
16+
17+
// Misc
18+
'cursor-pointer',
19+
'select-none',
20+
]
21+
},
22+
box: ({ props }) => ({
23+
class: [
24+
// Alignments
25+
'items-center inline-flex flex-1 text-center align-bottom justify-center',
26+
27+
// Sizes & Spacing
28+
'px-2 py-1',
29+
'text-xs',
30+
31+
// Shapes
32+
'rounded-xl',
33+
34+
35+
{ 'ring-surface-200 dark:ring-surface-700': !props.invalid },
36+
{
37+
'bg-surface-0 dark:bg-surface-900 ': !props.modelValue,
38+
'bg-surface-600 text-white dark:bg-surface-700': props.modelValue
39+
},
40+
41+
// Invalid State
42+
{ 'ring-red-500 dark:ring-red-400': props.invalid },
43+
44+
// States
45+
{
46+
'peer-hover:bg-surface-200': !props.modelValue,
47+
'peer-hover:bg-surface-700': props.modelValue
48+
},
49+
,
50+
51+
{
52+
'peer-focus-visible:ring-2 peer-focus-visible:ring-inset peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled
53+
},
54+
55+
// Transitions
56+
'transition-all duration-200',
57+
58+
// Misc
59+
{ 'cursor-pointer': !props.disabled, 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
60+
]
61+
}),
62+
label: ({ props }) => ({
63+
class: [
64+
'font-semibold text-center w-full',
65+
{
66+
'text-surface-500': !props.modelValue,
67+
'text-white': props.modelValue
68+
},
69+
]
70+
}),
71+
input: {
72+
class: [
73+
'peer',
74+
75+
// Size
76+
'w-full ',
77+
'h-full',
78+
79+
// Position
80+
'absolute',
81+
'top-0 left-0',
82+
'z-10',
83+
84+
// Spacing
85+
'p-0',
86+
'm-0',
87+
88+
// Shape
89+
'opacity-0',
90+
91+
// Misc
92+
'appearance-none',
93+
'cursor-pointer'
94+
]
95+
},
96+
icon: ({ props }) => ({
97+
class: [
98+
'mr-2',
99+
{
100+
'text-surface-500': !props.modelValue,
101+
'text-white': props.modelValue
102+
},
103+
'transition-transform duration-200',
104+
{
105+
'-rotate-45': !props.modelValue,
106+
'-rotate-90': props.modelValue
107+
},
108+
109+
]
110+
})
111+
};
112+
113+
</script>

0 commit comments

Comments
 (0)