Skip to content

Commit ba4813f

Browse files
gureckisgureckis
committed
additional dev tool tailwind updates
- update to the console panel elements - darkmode is still a mess - colors still not create but basic structure converted - update to the responsive mode tester to handle when window gets resized quite small.
1 parent 33cfa33 commit ba4813f

10 files changed

Lines changed: 432 additions & 670 deletions

‎src/builtins/simple_consent/InformedConsentView.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ onBeforeUnmount(() => {
8282
<div class="border-t border-gray-200 my-4"></div>
8383

8484
<div class="flex items-center space-x-2 mb-4">
85-
<Switch v-model="api.persist.agree" id="consent_toggle" name="consent_toggle" />
85+
<Switch v-model="api.persist.agree" id="consent_toggle" name="consent_toggle" size="lg" />
8686
<Label for="consent_toggle" class="text-left text-sm font-medium">
8787
I consent and am over 18 years old.
8888
</Label>

‎src/core/SmileApp.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@ import { ref, computed } from 'vue'
99
* Developer mode components for debugging and development tools
1010
* @requires DeveloperNavBar Navigation bar for developer mode
1111
* @requires DevConsoleBar Console bar for developer tools
12+
* @requires DevConsoleBarTailwind Console bar for developer tools
1213
* @requires DevSideBar Side bar for developer tools
1314
*/
1415
import DeveloperNavBar from '@/dev/developer_mode/DeveloperNavBar.vue'
16+
//import DevConsoleBar from '@/dev/developer_mode/DevConsoleBar.vue'
1517
import DevConsoleBar from '@/dev/developer_mode/DevConsoleBar.vue'
1618
import DevSideBar from '@/dev/developer_mode/DevSideBar.vue'
1719
/**
@@ -121,7 +123,7 @@ const isLoading = computed(() => {
121123
<!-- Bottom console - can be toggled -->
122124
<Transition name="console-slide">
123125
<div v-if="api.config.mode == 'development' && api.store.dev.showConsoleBar" class="console">
124-
<!--<DevConsoleBar />-->
126+
<DevConsoleBar />
125127
</div>
126128
</Transition>
127129
</div>

‎src/dev/developer_mode/ConfigDevPanel.vue‎

Lines changed: 59 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,10 @@ import { Switch } from '@/uikit/components/ui/switch'
66
import { Button } from '@/uikit/components/ui/button'
77
import { Separator } from '@/uikit/components/ui/separator'
88
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/uikit/components/ui/select'
9+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/uikit/components/ui/tooltip'
910
import { useColorMode } from '@vueuse/core'
1011
import { computed } from 'vue'
12+
1113
const api = useAPI()
1214
const mode = useColorMode()
1315
@@ -19,6 +21,50 @@ const isDarkMode = computed({
1921
},
2022
})
2123
24+
// Device presets for rotation logic
25+
const devicePresets = {
26+
iphone: { width: 393, height: 852, name: 'iPhone' },
27+
'iphone-plus': { width: 430, height: 932, name: 'iPhone Plus' },
28+
'iphone-pro': { width: 402, height: 874, name: 'iPhone Pro' },
29+
'iphone-pro-max': { width: 440, height: 956, name: 'iPhone Pro Max' },
30+
'iphone-se': { width: 375, height: 667, name: 'iPhone SE' },
31+
'ipad-11': { width: 1180, height: 820, name: 'iPad 11-inch' },
32+
'ipad-13': { width: 1366, height: 1024, name: 'iPad 13-inch' },
33+
desktop1: { width: 800, height: 600, name: '800x600' },
34+
desktop2: { width: 1024, height: 768, name: '1024x768' },
35+
desktop3: { width: 1280, height: 1024, name: '1280x1024' },
36+
desktop4: { width: 1440, height: 900, name: '1440x900' },
37+
desktop5: { width: 1600, height: 1200, name: '1600x1200' },
38+
desktop16: { width: 1920, height: 1080, name: '1920x1080' },
39+
}
40+
41+
// Check if current dimensions match any preset
42+
const checkForMatchingPreset = () => {
43+
for (const [key, preset] of Object.entries(devicePresets)) {
44+
// Check both normal orientation and rotated orientation
45+
const matchesNormal = api.store.dev.deviceWidth === preset.width && api.store.dev.deviceHeight === preset.height
46+
const matchesRotated = api.store.dev.deviceWidth === preset.height && api.store.dev.deviceHeight === preset.width
47+
48+
if (matchesNormal || matchesRotated) {
49+
api.store.dev.selectedDevice = key
50+
return
51+
}
52+
}
53+
// If no match found, keep as custom
54+
api.store.dev.selectedDevice = 'custom'
55+
}
56+
57+
// Toggle rotation (swap width and height) - same logic as ResponsiveDeviceContainer
58+
const toggleRotation = () => {
59+
const tempWidth = api.store.dev.deviceWidth
60+
api.store.dev.deviceWidth = api.store.dev.deviceHeight
61+
api.store.dev.deviceHeight = tempWidth
62+
api.store.dev.isRotated = !api.store.dev.isRotated
63+
64+
// Check if the new dimensions match any preset
65+
checkForMatchingPreset()
66+
}
67+
2268
// Reset developer mode settings to default
2369
function resetDevState() {
2470
localStorage.removeItem(api.config.devLocalStorageKey) // delete the local store
@@ -90,14 +136,22 @@ function resetDevState() {
90136
<Label for="width">Full screen</Label>
91137
<Switch id="width" v-model="api.store.dev.isFullscreen" class="col-span-2" />
92138
</div>
93-
<div class="grid grid-cols-3 items-center gap-4">
94-
<Label for="maxWidth">Rotate</Label>
95-
<Switch id="maxWidth" v-model="api.store.dev.isRotated" class="col-span-2" />
96-
</div>
97139
<div class="grid grid-cols-3 items-center gap-4">
98140
<Label for="device">Target Device</Label>
99-
<div class="col-span-2">
141+
<div class="col-span-2 flex items-center gap-2">
100142
<ResponsiveDeviceSelect />
143+
<TooltipProvider>
144+
<Tooltip>
145+
<TooltipTrigger asChild>
146+
<Button variant="outline" size="xs" @click="toggleRotation">
147+
<i-carbon-rotate-counterclockwise-filled :class="{ 'text-blue-400': api.store.dev.isRotated }" />
148+
</Button>
149+
</TooltipTrigger>
150+
<TooltipContent side="bottom">
151+
<p>Rotate device</p>
152+
</TooltipContent>
153+
</Tooltip>
154+
</TooltipProvider>
101155
</div>
102156
</div>
103157
<div class="relative mt-5">

‎src/dev/developer_mode/ConfigList.vue‎

Lines changed: 46 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -44,94 +44,56 @@ function option_selected(option) {
4444
</script>
4545

4646
<template>
47-
<aside class="menu">
48-
<div class="columnheader" v-if="header">
49-
<template v-if="header == '/'"><FAIcon icon="fa-solid fa-home" />&nbsp;</template>
47+
<aside class="w-full h-full flex flex-col" style="background-color: var(--background)">
48+
<!-- Header -->
49+
<div v-if="header" class="bg-gray-100 text-gray-600 px-3 py-2 text-xs font-medium border-b border-gray-200">
50+
<template v-if="header == '/'">
51+
<FAIcon icon="fa-solid fa-home" class="mr-1" />
52+
</template>
5053
<template v-else>{{ header }}</template>
5154
</div>
5255

53-
<ul class="menu-list">
54-
<div
55-
v-if="
56-
(data_field === null || data_field === undefined || Object.keys(data_field).length == 0) && header !== null
57-
"
58-
>
59-
<li>
60-
<a>Empty currently</a>
56+
<!-- Menu List -->
57+
<div class="flex-1 overflow-y-auto overflow-x-hidden">
58+
<ul class="space-y-0.5 p-1">
59+
<!-- Empty state -->
60+
<li
61+
v-if="
62+
(data_field === null || data_field === undefined || Object.keys(data_field).length == 0) && header !== null
63+
"
64+
>
65+
<div class="px-2 py-1.5 text-gray-500 text-xs font-mono">Empty currently</div>
6166
</li>
62-
</div>
63-
<li v-for="(option, key) in data_field" :class="{ active: key === props.selected }">
64-
<div v-if="option === null || (typeof option != 'object' && !Array.isArray(option))">
65-
<a>
66-
<b>{{ truncateText(key) }}</b
67-
>: {{ option === null ? 'null' : truncateText(String(option)) }}
68-
</a>
69-
</div>
70-
<div v-else @click="option_selected(key)">
71-
<a>
72-
<b>{{ truncateText(key) }}</b>
73-
<div class="arrow">
74-
<FAIcon icon=" fa-solid fa-angle-right" />
67+
68+
<!-- Data items -->
69+
<li v-for="(option, key) in data_field" :key="key">
70+
<!-- Non-object values (display only) -->
71+
<div
72+
v-if="option === null || (typeof option != 'object' && !Array.isArray(option))"
73+
class="px-2 py-1.5 text-xs font-mono"
74+
>
75+
<span class="font-semibold text-blue-600">{{ truncateText(key) }}</span>
76+
<span class="text-gray-600">: {{ option === null ? 'null' : truncateText(String(option)) }}</span>
77+
</div>
78+
79+
<!-- Object values (clickable) -->
80+
<button
81+
v-else
82+
@click="option_selected(key)"
83+
:class="[
84+
'w-full text-left px-2 py-1.5 text-xs font-mono rounded transition-colors duration-150',
85+
'hover:bg-blue-50 hover:text-blue-700',
86+
'focus:outline-none focus:ring-1 focus:ring-blue-300 focus:bg-blue-50',
87+
key === props.selected ? 'bg-blue-100 text-blue-800 border border-blue-200' : 'text-gray-700',
88+
]"
89+
>
90+
<div class="flex items-center justify-between">
91+
<span class="font-semibold">{{ truncateText(key) }}</span>
92+
<FAIcon icon="fa-solid fa-angle-right" class="text-gray-400 text-xs" />
7593
</div>
76-
</a>
77-
</div>
78-
</li>
79-
</ul>
94+
</button>
95+
</li>
96+
</ul>
97+
</div>
8098
</aside>
8199
</template>
82-
83-
<style scoped>
84-
.active a {
85-
background-color: rgb(199, 215, 228);
86-
color: #fff;
87-
}
88-
.active a:hover {
89-
background-color: rgb(199, 215, 228);
90-
color: #fff;
91-
}
92-
.active li a {
93-
color: #fff;
94-
}
95-
96-
.columnheader {
97-
background: #f4f4f4;
98-
color: #858484;
99-
padding: 5px;
100-
font-size: 0.8em;
101-
margin-bottom: 0px;
102-
padding-left: 10px;
103-
}
104-
105-
.menu-list {
106-
height: v-bind(height_pct);
107-
overflow-y: scroll;
108-
overflow-x: hidden;
109-
}
110-
.menu-list li {
111-
font-size: 0.73em;
112-
font-family: monospace;
113-
margin-top: 2px;
114-
margin-right: 4px;
115-
margin-left: 4px;
116-
}
117-
118-
.menu-list li a {
119-
color: #717a80;
120-
padding-top: 5px;
121-
}
122-
123-
.menu-list li b {
124-
color: steelblue;
125-
}
126-
127-
.arrow {
128-
float: right;
129-
margin: 0px;
130-
padding-right: 0px;
131-
color: #434343;
132-
vertical-align: middle;
133-
padding: 0px;
134-
font-size: 0.9em;
135-
margin-top: 3px;
136-
}
137-
</style>

0 commit comments

Comments
 (0)