Skip to content

Commit 3b80695

Browse files
CompuIvesCompuIves
committed
Put variants back in
1 parent f0780c1 commit 3b80695

File tree

4 files changed

+58
-26
lines changed

4 files changed

+58
-26
lines changed

‎packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/Modal/Template/elements.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,12 @@ export const Title = styled.div`
4646
transition: 0.3s ease color;
4747
font-size: 1.125em;
4848
color: ${props => (props.selected ? 'white' : props.color)};
49-
margin-bottom: ${props => (props.small ? '0' : '0.25em')};
5049
font-weight: 600;
5150
`;
5251

5352
export const SubTitle = styled.div`
54-
font-size: 0.73em;
53+
font-size: 0.8em;
54+
margin-top: 0.25rem;
5555
5656
color: ${props =>
5757
props.selected ? 'rgba(255, 255, 255, 0.6)' : 'rgba(255, 255, 255, 0.4)'};

‎packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/Modal/Template/index.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import getIcon from 'common/templates/icons';
33

44
import { Container, IconContainer, Title, SubTitle } from './elements';
55

6-
export default ({ template, width, selectTemplate, small }) => {
6+
export default ({ template, subtitle, width, selectTemplate, small }) => {
77
const Icon = getIcon(template.name);
88

99
const select = () => selectTemplate(template);
@@ -23,10 +23,10 @@ export default ({ template, width, selectTemplate, small }) => {
2323
tabIndex="0"
2424
>
2525
<div style={{ width: '100%' }}>
26-
<Title small={small} color={template.color}>
27-
{template.niceName}
28-
</Title>
29-
{!small && <SubTitle>{template.name}</SubTitle>}
26+
<Title color={template.color}>{template.niceName}</Title>
27+
{(!small || subtitle) && (
28+
<SubTitle>{subtitle || template.name}</SubTitle>
29+
)}
3030
</div>
3131
<IconContainer>
3232
<Icon width={small ? 24 : size} height={small ? 24 : 32} />

‎packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/Modal/index.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,20 @@ export default class Modal extends React.PureComponent {
4242
const otherServerTemplates = usedTemplates.filter(
4343
t => !t.main && t.isServer
4444
);
45+
const typescriptTemplates = [
46+
{
47+
...templates.react,
48+
variantName: templates.react.niceName,
49+
niceName: 'React + TS',
50+
shortid: 'react-ts',
51+
},
52+
{
53+
...templates.parcel,
54+
variantName: templates.parcel.niceName,
55+
niceName: 'Vanilla + TS',
56+
shortid: 'vanilla-ts',
57+
},
58+
];
4559

4660
const mainTemplatesPerRow = Math.max(
4761
1,
@@ -51,6 +65,7 @@ export default class Modal extends React.PureComponent {
5165

5266
const mainRows = chunk(mainTemplates, mainTemplatesPerRow);
5367
const rows = chunk(otherTemplates, templatesPerRow);
68+
const typescriptRows = chunk(typescriptTemplates, templatesPerRow);
5469
const mainServerRows = chunk(mainServerTemplates, mainTemplatesPerRow);
5570
const serverRows = chunk(otherServerTemplates, templatesPerRow);
5671

@@ -121,6 +136,23 @@ export default class Modal extends React.PureComponent {
121136
</Templates>
122137
))}
123138

139+
<Title>Presets</Title>
140+
{typescriptRows.map((ts, i) => (
141+
// eslint-disable-next-line react/no-array-index-key
142+
<Templates style={{ fontSize: '.8rem' }} key={i}>
143+
{ts.map(t => (
144+
<Template
145+
small
146+
width={Math.floor(paddedWidth / templatesPerRow - 16)}
147+
key={t.name}
148+
template={t}
149+
selectTemplate={this.selectTemplate}
150+
subtitle={`Using ${t.variantName} template`}
151+
/>
152+
))}
153+
</Templates>
154+
))}
155+
124156
<ImportChoices style={{ marginTop: '1.5rem' }}>
125157
<ImportChoice
126158
href="/docs/importing#import-from-github"

‎packages/app/src/app/vscode/dev-bootstrap.js‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import { METADATA } from './metadata';
77

88
const PREFIX = '/vs';
99

10-
const window = window || self;
11-
window.global = window;
10+
const global = window || self;
11+
global.global = window;
1212
let requiresDefined = false;
1313

1414
function initializeRequires() {
@@ -142,21 +142,21 @@ function initializeRequires() {
142142
}
143143

144144
export default function(requiredModule: string) {
145-
var IS_FILE_PROTOCOL = window.location.protocol === 'file:';
145+
var IS_FILE_PROTOCOL = global.location.protocol === 'file:';
146146
var DIRNAME = null;
147147
if (IS_FILE_PROTOCOL) {
148-
var port = window.location.port;
148+
var port = global.location.port;
149149
if (port.length > 0) {
150150
port = ':' + port;
151151
}
152152
DIRNAME =
153-
window.location.protocol +
153+
global.location.protocol +
154154
'//' +
155-
window.location.hostname +
155+
global.location.hostname +
156156
port +
157-
window.location.pathname.substr(
157+
global.location.pathname.substr(
158158
0,
159-
window.location.pathname.lastIndexOf('/')
159+
global.location.pathname.lastIndexOf('/')
160160
);
161161

162162
var bases = document.getElementsByTagName('base');
@@ -167,7 +167,7 @@ export default function(requiredModule: string) {
167167

168168
var LOADER_OPTS = (function() {
169169
function parseQueryString() {
170-
var str = window.location.search;
170+
var str = global.location.search;
171171
str = str.replace(/^\?/, '');
172172
var pieces = str.split(/&/);
173173
var result = {};
@@ -187,18 +187,18 @@ export default function(requiredModule: string) {
187187
return result;
188188
})();
189189
function toHREF(search) {
190-
var port = window.location.port;
190+
var port = global.location.port;
191191
if (port.length > 0) {
192192
port = ':' + port;
193193
}
194194
return (
195-
window.location.protocol +
195+
global.location.protocol +
196196
'//' +
197-
window.location.hostname +
197+
global.location.hostname +
198198
port +
199-
window.location.pathname +
199+
global.location.pathname +
200200
search +
201-
window.location.hash
201+
global.location.hash
202202
);
203203
}
204204

@@ -341,7 +341,7 @@ export default function(requiredModule: string) {
341341
for (var i = 0; i < aElements.length; i++) {
342342
var aElement = aElements[i];
343343
if (aElement.className === 'loading-opts') {
344-
aElement.href += window.location.search;
344+
aElement.href += global.location.search;
345345
}
346346
}
347347
}
@@ -350,7 +350,7 @@ export default function(requiredModule: string) {
350350
return function(callback, PATH_PREFIX) {
351351
PATH_PREFIX = PATH_PREFIX || '';
352352

353-
window.nodeRequire = path => {
353+
global.nodeRequire = path => {
354354
// Trick AMD in that this is the node require function
355355
// console.log('nodeRequire', path);
356356

@@ -362,7 +362,7 @@ export default function(requiredModule: string) {
362362
// }
363363

364364
if (path === 'module') {
365-
return { _load: window.nodeRequire };
365+
return { _load: global.nodeRequire };
366366
}
367367
};
368368

@@ -401,7 +401,7 @@ export default function(requiredModule: string) {
401401
});
402402
}
403403

404-
window.deps = new Set();
404+
global.deps = new Set();
405405

406406
self.require(requiredModule, function() {
407407
if (!RESOLVED_CORE.isRelease()) {
@@ -421,7 +421,7 @@ export default function(requiredModule: string) {
421421
});
422422
}
423423

424-
if (window.require) {
424+
if (global.require) {
425425
loadFiles();
426426
} else {
427427
loadScript(

0 commit comments

Comments
 (0)