Skip to content

Commit 5e539f3

Browse files
AkryumAkryum
committed
fix(plugin): scrollbars
1 parent 7a986f3 commit 5e539f3

File tree

2 files changed

+102
-95
lines changed

2 files changed

+102
-95
lines changed

‎packages/app-frontend/src/features/plugin/PluginDetails.vue

Lines changed: 66 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -41,83 +41,86 @@ export default defineComponent({
4141
class="h-full"
4242
>
4343
<template #left>
44-
<div class="px-6 py-4 flex space-x-6">
45-
<div class="flex items-center justify-center w-16 h-16 bg-gray-200 dark:bg-gray-900 rounded">
46-
<img
47-
v-if="plugin.logo"
48-
:src="plugin.logo"
49-
alt="Plugin logo"
50-
class="logo"
51-
>
52-
<VueIcon
53-
v-else
54-
icon="extension"
55-
class="big text-gray-500"
56-
/>
57-
</div>
58-
<div>
59-
<div class="font-bold">
60-
{{ plugin.label }}
61-
</div>
62-
<div v-if="plugin.homepage">
63-
<a
64-
:href="plugin.homepage"
65-
target="_blank"
66-
class="flex items-center text-green-600 dark:text-green-400 space-x-1"
44+
<div class="h-full overflow-y-auto">
45+
<div class="px-6 py-4 flex space-x-6">
46+
<div class="flex items-center justify-center w-16 h-16 bg-gray-200 dark:bg-gray-900 rounded">
47+
<img
48+
v-if="plugin.logo"
49+
:src="plugin.logo"
50+
alt="Plugin logo"
51+
class="logo"
6752
>
68-
<span>Homepage</span>
69-
<VueIcon
70-
icon="launch"
71-
/>
72-
</a>
53+
<VueIcon
54+
v-else
55+
icon="extension"
56+
class="big text-gray-500"
57+
/>
7358
</div>
7459
<div>
75-
ID: <span class="font-mono text-sm px-1 bg-gray-200 dark:bg-gray-900 rounded">{{ plugin.id }}</span>
76-
</div>
77-
<div v-if="plugin.packageName">
78-
Package: <span class="font-mono text-sm px-1 bg-gray-200 dark:bg-gray-900 rounded">{{ plugin.packageName }}</span>
60+
<div class="font-bold">
61+
{{ plugin.label }}
62+
</div>
63+
<div v-if="plugin.homepage">
64+
<a
65+
:href="plugin.homepage"
66+
target="_blank"
67+
class="flex items-center text-green-600 dark:text-green-400 space-x-1"
68+
>
69+
<span>Homepage</span>
70+
<VueIcon
71+
icon="launch"
72+
/>
73+
</a>
74+
</div>
75+
<div>
76+
ID: <span class="font-mono text-sm px-1 bg-gray-200 dark:bg-gray-900 rounded">{{ plugin.id }}</span>
77+
</div>
78+
<div v-if="plugin.packageName">
79+
Package: <span class="font-mono text-sm px-1 bg-gray-200 dark:bg-gray-900 rounded">{{ plugin.packageName }}</span>
80+
</div>
7981
</div>
8082
</div>
81-
</div>
8283

83-
<div>
84-
<PluginPermission
85-
:plugin-id="plugin.id"
86-
permission="enabled"
87-
label="Enabled"
88-
class="px-6 py-4"
89-
/>
90-
</div>
84+
<div>
85+
<PluginPermission
86+
:plugin-id="plugin.id"
87+
permission="enabled"
88+
label="Enabled"
89+
class="px-6 py-4"
90+
/>
91+
</div>
9192

92-
<div>
93-
<h2 class="px-6 py-2 text-gray-500">
94-
Permissions
95-
</h2>
93+
<div>
94+
<h2 class="px-6 py-2 text-gray-500">
95+
Permissions
96+
</h2>
9697

97-
<PluginPermission
98-
:plugin-id="plugin.id"
99-
permission="components"
100-
label="Components"
101-
class="px-6 py-2"
102-
/>
103-
<PluginPermission
104-
:plugin-id="plugin.id"
105-
permission="custom-inspector"
106-
label="Custom inspectors"
107-
class="px-6 py-2"
108-
/>
109-
<PluginPermission
110-
:plugin-id="plugin.id"
111-
permission="timeline"
112-
label="Timeline"
113-
class="px-6 py-2"
114-
/>
98+
<PluginPermission
99+
:plugin-id="plugin.id"
100+
permission="components"
101+
label="Components"
102+
class="px-6 py-2"
103+
/>
104+
<PluginPermission
105+
:plugin-id="plugin.id"
106+
permission="custom-inspector"
107+
label="Custom inspectors"
108+
class="px-6 py-2"
109+
/>
110+
<PluginPermission
111+
:plugin-id="plugin.id"
112+
permission="timeline"
113+
label="Timeline"
114+
class="px-6 py-2"
115+
/>
116+
</div>
115117
</div>
116118
</template>
117119

118120
<template #right>
119121
<PluginSettings
120122
:plugin="plugin"
123+
class="h-full overflow-y-auto"
121124
/>
122125
</template>
123126
</SplitPane>

‎packages/app-frontend/src/features/plugin/Plugins.vue

Lines changed: 36 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -35,40 +35,44 @@ export default defineComponent({
3535
</script>
3636

3737
<template>
38-
<PluginHome
39-
v-if="!plugins.length"
40-
no-plugins
41-
/>
42-
<SplitPane
43-
v-else
44-
save-id="plugins"
45-
:default-split="30"
46-
>
47-
<template #left>
48-
<div class="h-full flex flex-col">
49-
<div class="flex-none">
50-
<VueInput
51-
v-model="search"
52-
icon-left="search"
53-
placeholder="Filter devtools plugins..."
54-
select-all
55-
class="w-full flat border-b border-gray-200 dark:border-gray-800"
56-
/>
38+
<div class="h-full">
39+
<PluginHome
40+
v-if="!plugins.length"
41+
no-plugins
42+
/>
43+
<SplitPane
44+
v-else
45+
save-id="plugins"
46+
:default-split="30"
47+
>
48+
<template #left>
49+
<div class="h-full flex flex-col">
50+
<div class="flex-none">
51+
<VueInput
52+
v-model="search"
53+
icon-left="search"
54+
placeholder="Filter devtools plugins..."
55+
select-all
56+
class="w-full flat border-b border-gray-200 dark:border-gray-800"
57+
/>
58+
</div>
59+
<div class="overflow-y-auto">
60+
<PluginListItem
61+
v-for="plugin of plugins"
62+
:key="plugin.id"
63+
:plugin="plugin"
64+
/>
65+
</div>
5766
</div>
58-
<div class="overflow-y-auto">
59-
<PluginListItem
60-
v-for="plugin of plugins"
61-
:key="plugin.id"
62-
:plugin="plugin"
63-
/>
64-
</div>
65-
</div>
66-
</template>
67+
</template>
6768

68-
<template #right>
69-
<router-view />
70-
</template>
71-
</SplitPane>
69+
<template #right>
70+
<div class="h-full overflow-y-auto">
71+
<router-view />
72+
</div>
73+
</template>
74+
</SplitPane>
75+
</div>
7276
</template>
7377

7478
<style scoped>

0 commit comments

Comments
 (0)