Skip to content

Commit 5d0f07a

Browse files
someCatInTheWorldsomeCatInTheWorld
committed
merge-upstream: Snail IDE-ify things
* Also redesign extension manager and allow downloading unsandboxed extensions from the extension manager.
1 parent a1bd8c8 commit 5d0f07a

File tree

14 files changed

+483
-2296
lines changed

14 files changed

+483
-2296
lines changed

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
{
22
"yaml.schemas": {
33
"https://gitpod.io/schemas/gitpod-schema.json": "file:///workspace/penguinmod.github.io/.gitpod.yml"
4+
},
5+
"files.associations": {
6+
"*.css": "scss"
47
}
58
}

‎pnpm-lock.yaml‎

Lines changed: 7 additions & 2253 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/extension-manager-modal/custom.svg‎

Lines changed: 2 additions & 0 deletions
Loading

‎src/components/extension-manager-modal/delete.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/extension-manager-modal/export.svg‎

Lines changed: 2 additions & 0 deletions
Loading

‎src/components/extension-manager-modal/ext-manager-modal.css‎

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,17 @@
66

77
.body {
88
background: $ui-white;
9-
padding: 1.5rem 2.25rem;
10-
min-height: 150px;
9+
padding: 1.5rem;
1110
max-height: calc(100vh - 250px);
1211
overflow-y: auto;
1312
}
13+
.centered {
14+
display: flex;
15+
justify-content: center;
16+
align-self: center;
17+
text-align: center;
18+
}
19+
1420
[theme="dark"] .body {
1521
color: $text-primary;
1622
background: $ui-primary;
@@ -81,3 +87,44 @@
8187
[theme="dark"] .warning {
8288
background: rgb(114, 102, 0);
8389
}
90+
91+
.manage-extensions {
92+
width: 100%;
93+
display: flex;
94+
align-items: center;
95+
border: 2px solid $ui-black-transparent;
96+
border-radius: 0.5rem;
97+
padding: 0.5rem;
98+
gap: 0.5rem;
99+
}
100+
.manage-extensions-name {
101+
font-size: 2rem;
102+
margin-bottom: 0.5rem;
103+
overflow-wrap: anywhere;
104+
}
105+
106+
.manage-extensions-buttons {
107+
margin-left: auto;
108+
flex-shrink: 0;
109+
display: flex;
110+
flex-direction: row;
111+
gap: 0.5rem;
112+
}
113+
.manage-extensions-button {
114+
background: none;
115+
border: none;
116+
border-radius: 100%;
117+
width: 2rem;
118+
height: 2rem;
119+
display: flex;
120+
align-items: center;
121+
justify-content: center;
122+
}
123+
.manage-extensions-button:hover {
124+
background-color: $ui-black-transparent;
125+
}
126+
.manage-extensions-button img {
127+
display: block;
128+
width: 100%;
129+
height: 100%;
130+
}

‎src/components/extension-manager-modal/fonts-modal.css‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
@import "../../css/colors.css";
2+
@import "../../css/z-index.css";
3+
4+
.modal-content {
5+
max-width: 550px;
6+
margin-top: 50px;
7+
}
8+
9+
.body {
10+
background: $ui-white;
11+
padding: 1.5rem 2.25rem;
12+
max-height: calc(100vh - 150px);
13+
overflow: auto;
14+
display: flex;
15+
flex-direction: column;
16+
gap: 1rem;
17+
}
18+
[theme="dark"] .body {
19+
color: $text-primary;
20+
background: $ui-primary;
21+
}
22+
23+
.open-buttons {
24+
display: flex;
25+
gap: 1rem;
26+
}
27+
.open-button {
28+
display: flex;
29+
flex-direction: column;
30+
gap: 0.5rem;
31+
width: 100%;
32+
align-items: center;
33+
background: none;
34+
padding: 0.5rem;
35+
margin: 0;
36+
border: 2px solid $ui-black-transparent;
37+
border-radius: 0.5rem;
38+
}
39+
.open-button:hover {
40+
color: $motion-primary;
41+
border-color: $motion-primary;
42+
}
43+
.open-button-image {
44+
width: 64px;
45+
height: 64px;
46+
background-color: currentColor;
47+
mask-size: cover;
48+
mask-repeat: no-repeat;
49+
}
50+
.system-image {
51+
mask-image: url(./system.svg);
52+
}
53+
.custom-image {
54+
mask-image: url(./custom.svg);
55+
}
56+
.open-button-text {
57+
display: flex;
58+
flex-direction: column;
59+
align-items: center;
60+
justify-content: center;
61+
width: 100%;
62+
}
63+
.open-button-text-main {
64+
font-weight: bold;
65+
}
66+
.open-button-text-sub {
67+
68+
}
69+
70+
.font-input-outer {
71+
72+
}
73+
.font-input {
74+
width: 100%;
75+
border: 1px solid $ui-black-transparent;
76+
border-radius: 0.25rem;
77+
padding: 0 1rem;
78+
height: 3rem;
79+
font: inherit;
80+
}
81+
82+
.font-dropdown-outer {
83+
position: absolute;
84+
z-index: $z-index-modal;
85+
background-color: white;
86+
color: $text-primary;
87+
border-radius: 0.25rem;
88+
overflow: auto;
89+
max-height: 300px;
90+
border: 1px solid $ui-black-transparent;
91+
box-sizing: border-box;
92+
box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, .3);
93+
}
94+
[theme="dark"] .font-dropdown-outer {
95+
background-color: $ui-secondary;
96+
}
97+
.font-dropdown-item {
98+
display: flex;
99+
align-items: center;
100+
padding: 0.5rem 0.75rem;
101+
height: 1.5rem;
102+
cursor: pointer;
103+
transition: .1s ease;
104+
}
105+
.font-dropdown-item:hover {
106+
background-color: $motion-primary;
107+
color: #ffffff;
108+
}
109+
110+
.font-playground {
111+
background: none;
112+
border: none;
113+
padding: 0.5rem;
114+
margin: 0;
115+
resize: none;
116+
width: 100%;
117+
height: 100px;
118+
font-size: 1.5rem;
119+
border: 1px solid $ui-black-transparent;
120+
border-radius: 0.25rem;
121+
}
122+
123+
.button {
124+
font: inherit;
125+
font-weight: bold;
126+
padding: 0.75rem 1rem;
127+
border-radius: 0.25rem;
128+
border: 1px solid $ui-black-transparent;
129+
background-color: $motion-primary;
130+
color: $ui-white;
131+
}
132+
.button:disabled {
133+
opacity: 0.8;
134+
}
135+
136+
.fallback-container {
137+
display: flex;
138+
flex-direction: column;
139+
}
140+
.fallback-label {
141+
margin-bottom: 0.5rem;
142+
}
143+
.fallback-list {
144+
display: grid;
145+
grid-template-columns: 1fr 1fr 1fr;
146+
gap: 0.25rem
147+
}
148+
.fallback-button {
149+
background: none;
150+
padding: 0;
151+
border: 0;
152+
border-radius: 0.25rem;
153+
height: 30px;
154+
display: flex;
155+
align-items: center;
156+
justify-content: center;
157+
}
158+
.fallback-button:hover {
159+
color: $motion-primary;
160+
}
161+
.fallback-container .fallback-button-selected {
162+
background-color: $motion-primary;
163+
color: white;
164+
}
165+
166+
.fonts-outer {
167+
border-top: 2px solid $ui-black-transparent;
168+
padding-top: 1rem;
169+
}
170+
.fonts-outer p {
171+
margin-bottom: 0.5rem;
172+
}
173+
174+
.fonts {
175+
display: flex;
176+
flex-direction: column;
177+
gap: 0.5rem;
178+
}
179+
180+
.manage-font {
181+
width: 100%;
182+
display: flex;
183+
align-items: center;
184+
border: 2px solid $ui-black-transparent;
185+
border-radius: 0.5rem;
186+
padding: 0.5rem;
187+
gap: 0.5rem;
188+
}
189+
.manage-font-name {
190+
font-size: 2rem;
191+
margin-bottom: 0.5rem;
192+
overflow-wrap: anywhere;
193+
}
194+
195+
.manage-font-buttons {
196+
margin-left: auto;
197+
flex-shrink: 0;
198+
display: flex;
199+
flex-direction: row;
200+
gap: 0.5rem;
201+
}
202+
.manage-font-button {
203+
background: none;
204+
border: none;
205+
border-radius: 100%;
206+
width: 2rem;
207+
height: 2rem;
208+
display: flex;
209+
align-items: center;
210+
justify-content: center;
211+
}
212+
.manage-font-button:hover {
213+
background-color: $ui-black-transparent;
214+
}
215+
.manage-font-button img {
216+
display: block;
217+
width: 100%;
218+
height: 100%;
219+
}
220+
[theme="dark"] .manage-font-button img {
221+
filter: invert(100%);
222+
}

0 commit comments

Comments
 (0)