Skip to content

Commit ab981e4

Browse files
PepeElToro41PepeElToro41
committed
fusion 0.3 support, fixed docs
1 parent 8304749 commit ab981e4

File tree

8 files changed

+324
-74
lines changed

8 files changed

+324
-74
lines changed

‎docs/.vitepress/config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { defineConfig } from "vitepress";
22

33
export default defineConfig({
44
title: "UI Labs",
5-
titleTemplate: ":title - Storybook plugin for Roblox",
5+
titleTemplate: ":title - UI Labs",
66
description: "Storybook plugin for Roblox",
77
head: [
88
["link", { rel: "icon", href: "/home/pluginicon.ico" }],

‎docs/.vitepress/theme/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@
22
import DefaultTheme from "vitepress/theme";
33
import "./fix.css";
44
import "./vars.css";
5+
import "./selectors.css";
56

67
export default DefaultTheme;

‎docs/.vitepress/theme/selectors.css

+234
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
:root {
2+
--toolbar-x: 86;
3+
--toolbar-y: 188;
4+
5+
--preview-x: 275;
6+
--preview-y: 319;
7+
8+
--ineditor-x: 292;
9+
--ineditor-y: 311;
10+
11+
--unhide-x: 296;
12+
--unhide-y: 318;
13+
14+
--multifull-x: 863;
15+
--multifull-y: 616.25;
16+
17+
--widgetfull-x: 863;
18+
--widgetfull-y: 607.02;
19+
}
20+
21+
/* ---------------------------- IMG DESCRIPTIONS ---------------------------- */
22+
23+
.main-tab-description {
24+
top: calc((54 / var(--multifull-y)) * 100%);
25+
left: calc((220 / var(--multifull-x)) * 100%);
26+
width: calc((78 / var(--multifull-x)) * 100%);
27+
height: calc((29 / var(--multifull-y)) * 100%);
28+
}
29+
.new-tab-description {
30+
top: calc((54 / var(--multifull-y)) * 100%);
31+
left: calc((302 / var(--multifull-x)) * 100%);
32+
width: calc((72 / var(--multifull-x)) * 100%);
33+
height: calc((29 / var(--multifull-y)) * 100%);
34+
}
35+
.tabs-amount-description {
36+
top: calc((139 / var(--multifull-y)) * 100%);
37+
left: calc((215 / var(--multifull-x)) * 100%);
38+
width: calc((200 / var(--multifull-x)) * 100%);
39+
height: calc((29 / var(--multifull-y)) * 100%);
40+
}
41+
42+
.widget-tab-description {
43+
top: calc((60 / var(--widgetfull-y)) * 100%);
44+
left: calc((292 / var(--widgetfull-x)) * 100%);
45+
width: calc((100 / var(--widgetfull-x)) * 100%);
46+
height: calc((29 / var(--widgetfull-y)) * 100%);
47+
}
48+
.widget-window-description {
49+
top: calc((280 / var(--widgetfull-y)) * 100%);
50+
left: calc((365 / var(--widgetfull-x)) * 100%);
51+
width: calc((362 / var(--widgetfull-x)) * 100%);
52+
height: calc((204 / var(--widgetfull-y)) * 100%);
53+
}
54+
55+
.image-description,
56+
.tabs-amount-description,
57+
.widget-tab-description,
58+
.widget-window-description {
59+
position: absolute;
60+
background-color: transparent;
61+
font-size: 15px;
62+
font-weight: bold;
63+
border-style: none;
64+
text-align: left;
65+
color: var(--custom-button-reference);
66+
}
67+
68+
.image-description-2,
69+
.main-tab-description,
70+
.new-tab-description {
71+
position: absolute;
72+
background-color: transparent;
73+
font-size: 13px;
74+
font-weight: bold;
75+
border-style: none;
76+
text-align: left;
77+
color: var(--custom-button-reference);
78+
}
79+
80+
/* -------------------------- FULLSCREEN SELECTORS -------------------------- */
81+
82+
.main-tab-selector {
83+
top: calc((28 / var(--multifull-y)) * 100%);
84+
left: calc((219 / var(--multifull-x)) * 100%);
85+
width: calc((74 / var(--multifull-x)) * 100%);
86+
height: calc((25 / var(--multifull-y)) * 100%);
87+
}
88+
.new-tab-selector {
89+
top: calc((28 / var(--multifull-y)) * 100%);
90+
left: calc((295 / var(--multifull-x)) * 100%);
91+
width: calc((68 / var(--multifull-x)) * 100%);
92+
height: calc((25 / var(--multifull-y)) * 100%);
93+
}
94+
.tabs-amount-selector {
95+
top: calc((138 / var(--multifull-y)) * 100%);
96+
left: calc((182 / var(--multifull-x)) * 100%);
97+
width: calc((24 / var(--multifull-x)) * 100%);
98+
height: calc((24 / var(--multifull-y)) * 100%);
99+
}
100+
.mountinwidget-selector {
101+
top: calc((199 / var(--multifull-y)) * 100%);
102+
left: calc((92 / var(--multifull-x)) * 100%);
103+
width: calc((192 / var(--multifull-x)) * 100%);
104+
height: calc((29 / var(--multifull-y)) * 100%);
105+
}
106+
107+
.widget-tab-selector {
108+
top: calc((27 / var(--widgetfull-y)) * 100%);
109+
left: calc((292 / var(--widgetfull-x)) * 100%);
110+
width: calc((85 / var(--widgetfull-x)) * 100%);
111+
height: calc((29 / var(--widgetfull-y)) * 100%);
112+
}
113+
.widget-window-selector {
114+
top: calc((311 / var(--widgetfull-y)) * 100%);
115+
left: calc((362 / var(--widgetfull-x)) * 100%);
116+
width: calc((362 / var(--widgetfull-x)) * 100%);
117+
height: calc((204 / var(--widgetfull-y)) * 100%);
118+
}
119+
120+
/* -------------------------------- PREVIEW SELECTORS ------------------------------- */
121+
.resetview-selector {
122+
top: calc((189 / var(--preview-y)) * 100%);
123+
left: calc((41 / var(--preview-x)) * 100%);
124+
width: calc((220 / var(--preview-x)) * 100%);
125+
height: calc((58 / var(--preview-y)) * 100%);
126+
}
127+
128+
.mountontop-selector {
129+
top: calc((195 / var(--preview-y)) * 100%);
130+
left: calc((114 / var(--preview-x)) * 100%);
131+
width: calc((152 / var(--preview-x)) * 100%);
132+
height: calc((31 / var(--preview-y)) * 100%);
133+
}
134+
135+
.ineditor-selector {
136+
top: calc((52 / var(--ineditor-y)) * 100%);
137+
left: calc((62 / var(--ineditor-x)) * 100%);
138+
width: calc((220 / var(--ineditor-x)) * 100%);
139+
height: calc((32 / var(--ineditor-y)) * 100%);
140+
}
141+
.inwidget-selector {
142+
top: calc((55 / var(--preview-y)) * 100%);
143+
left: calc((40 / var(--preview-x)) * 100%);
144+
width: calc((220 / var(--preview-x)) * 100%);
145+
height: calc((32 / var(--preview-y)) * 100%);
146+
}
147+
148+
.auto-reload-selector {
149+
top: calc((135 / var(--preview-y)) * 100%);
150+
left: calc((39 / var(--preview-x)) * 100%);
151+
width: calc((225 / var(--preview-x)) * 100%);
152+
height: calc((33 / var(--preview-y)) * 100%);
153+
}
154+
155+
.hide-selector {
156+
top: calc((80 / var(--preview-y)) * 100%);
157+
left: calc((40 / var(--preview-x)) * 100%);
158+
width: calc((220 / var(--preview-x)) * 100%);
159+
height: calc((32 / var(--preview-y)) * 100%);
160+
}
161+
162+
.unhide-selector {
163+
top: calc((80 / var(--unhide-y)) * 100%);
164+
left: calc((62 / var(--unhide-x)) * 100%);
165+
width: calc((220 / var(--unhide-x)) * 100%);
166+
height: calc((32 / var(--unhide-y)) * 100%);
167+
}
168+
169+
.snapshot-selector {
170+
top: calc((161 / var(--preview-y)) * 100%);
171+
left: calc((38 / var(--preview-x)) * 100%);
172+
width: calc((227 / var(--preview-x)) * 100%);
173+
height: calc((33 / var(--preview-y)) * 100%);
174+
}
175+
176+
/* --------------------------------- TOOLBAR SELECTORS -------------------------------- */
177+
178+
.zoom-selector {
179+
top: calc((36 / var(--toolbar-y)) * 100%);
180+
left: calc((14 / var(--toolbar-x)) * 100%);
181+
width: calc((42 / var(--toolbar-x)) * 100%);
182+
height: calc((77 / var(--toolbar-y)) * 100%);
183+
}
184+
185+
.viewport-selector {
186+
top: calc((108 / var(--toolbar-y)) * 100%);
187+
left: calc((15 / var(--toolbar-x)) * 100%);
188+
width: calc((41 / var(--toolbar-x)) * 100%);
189+
height: calc((41 / var(--toolbar-y)) * 100%);
190+
}
191+
192+
.explorer-selector {
193+
top: calc((142 / var(--toolbar-y)) * 100%);
194+
left: calc((15 / var(--toolbar-x)) * 100%);
195+
width: calc((41 / var(--toolbar-x)) * 100%);
196+
height: calc((41 / var(--toolbar-y)) * 100%);
197+
}
198+
199+
.image-selector,
200+
.widget-tab-selector,
201+
.widget-window-selector,
202+
.mountinwidget-selector,
203+
.resetview-selector,
204+
.mountontop-selector,
205+
.ineditor-selector,
206+
.inwidget-selector,
207+
.snapshot-selector,
208+
.auto-reload-selector,
209+
.hide-selector,
210+
.unhide-selector,
211+
.zoom-selector,
212+
.viewport-selector,
213+
.explorer-selector,
214+
.tabs-amount-selector {
215+
position: absolute;
216+
background-color: transparent;
217+
border-color: var(--custom-image-selector);
218+
border-style: solid;
219+
border-width: 3px;
220+
filter: drop-shadow(0px 0px 3px var(--custom-image-selector));
221+
border-radius: 7px;
222+
}
223+
224+
.image-selector-2,
225+
.main-tab-selector,
226+
.new-tab-selector {
227+
position: absolute;
228+
background-color: transparent;
229+
border-color: var(--custom-image-selector);
230+
border-style: solid;
231+
border-width: 2px;
232+
filter: drop-shadow(0px 0px 3px var(--custom-image-selector));
233+
border-radius: 7px;
234+
}

‎docs/.vitepress/theme/vars.css

-38
Original file line numberDiff line numberDiff line change
@@ -209,44 +209,6 @@
209209
padding-right: 20px;
210210
}
211211

212-
.image-selector {
213-
position: absolute;
214-
background-color: transparent;
215-
border-color: var(--custom-image-selector);
216-
border-style: solid;
217-
border-width: 3px;
218-
filter: drop-shadow(0px 0px 3px var(--custom-image-selector));
219-
border-radius: 6px;
220-
}
221-
.image-selector-2 {
222-
position: absolute;
223-
background-color: transparent;
224-
border-color: var(--custom-image-selector);
225-
border-style: solid;
226-
border-width: 2px;
227-
filter: drop-shadow(0px 0px 3px var(--custom-image-selector));
228-
border-radius: 6px;
229-
}
230-
231-
.image-desc {
232-
position: absolute;
233-
background-color: transparent;
234-
font-size: 15px;
235-
font-weight: bold;
236-
border-style: none;
237-
text-align: center;
238-
color: var(--custom-button-reference);
239-
}
240-
.image-desc-2 {
241-
position: absolute;
242-
background-color: transparent;
243-
font-size: 13px;
244-
font-weight: bold;
245-
border-style: none;
246-
text-align: center;
247-
color: var(--custom-button-reference);
248-
}
249-
250212

251213
.image-label {
252214
border-width: 1px;

‎docs/docs/plugin/extras.md

+18-10
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ Additionally, Let's see some extra features that UI Labs offers.
55
<div class="image-tip-holder" style="padding-top: 60px;">
66
<div style="position: relative;" >
77
<img class="image-label" src="/docs/plugin/toolbar.png" alt="Zoom Buttons">
8-
<div class="image-selector" style="top: 142px; left: 15px; width: 41px; height: 41px;" />
8+
<div class="explorer-selector" />
99
</div>
1010
</div>
1111

@@ -23,11 +23,13 @@ By default, UI Labs will detect any changes on the scripts you have required and
2323

2424
<span class="item-description">Right Click</span> your Story Tab and toggle <span class="button-reference">Auto Reload</span>
2525

26-
<div style="position: relative;">
26+
<div style="position: relative; display: inline-block;">
2727
<div class="image-label" style="overflow: hidden;">
28-
<img src="/docs/plugin/previewdropdown.png" alt="autoreload" style="margin-bottom: -120px;">
28+
<div style="position: relative; margin-bottom: -95px;">
29+
<img src="/docs/plugin/previewdropdown.png" alt="autoreload">
30+
<div class="auto-reload-selector" />
31+
</div>
2932
</div>
30-
<div class="image-selector" style="top: 135px; left: 42px; width: 220px; height: 33px;" />
3133
</div>
3234

3335
This allows you to compare different versions of the same story by mounting it twice, and turning <span class="button-reference">Auto Reload</span> off on one of them.
@@ -41,12 +43,16 @@ For this you can <span class="item-description">Right Click</span> your Story Ta
4143

4244
<div style="position: relative; display: flex; flex-direction: row; gap: 10px;">
4345
<div class="image-label" style="overflow: hidden;">
44-
<img src="/docs/plugin/previewdropdown.png" alt="hide" style="margin-bottom: -150px;">
45-
<div class="image-selector" style="top: 80px; left: 40px; width: 220px; height: 32px;" />
46+
<div style="position: relative; margin-bottom: -150px;">
47+
<img src="/docs/plugin/previewdropdown.png" alt="hide">
48+
<div class="hide-selector"/>
49+
</div>
4650
</div>
4751
<div class="image-label" style="overflow: hidden;">
48-
<img src="/docs/plugin/extras/unhide.png" alt="hide" style="margin-bottom: -150px;">
49-
<div class="image-selector" style="top: 80px; left: 62px; width: 220px; height: 32px;" />
52+
<div style="position: relative; margin-bottom: -150px;">
53+
<img src="/docs/plugin/extras/unhide.png" alt="hide" style="margin-bottom: -150px;">
54+
<div class="unhide-selector" />
55+
</div >
5056
</div>
5157
</div>
5258

@@ -62,8 +68,10 @@ This clones the current UI and saves it in a `ScreenGui` inside `StarterGui`
6268

6369
<div style="position: relative; display: flex; flex-direction: row; gap: 50px;">
6470
<div class="image-label" style="overflow: hidden;">
65-
<img src="/docs/plugin/previewdropdown.png" alt="snapshotgui" style="margin-bottom: -150px;">
66-
<div class="image-selector" style="top: 80px; left: 40px; width: 220px; height: 32px;" />
71+
<div style="position: relative; margin-bottom: -75px;">
72+
<img src="/docs/plugin/previewdropdown.png" alt="snapshotgui" >
73+
<div class="snapshot-selector" />
74+
</div>
6775
</div>
6876
<img class="image-label" src="/docs/plugin/extras/snapshotgui.png" alt="snapshotgui" style="margin-top: 20px; width: fit-content; height: fit-content; margin-bottom: -150px;" />
6977
</div>

0 commit comments

Comments
 (0)