Skip to content
This repository was archived by the owner on May 1, 2020. It is now read-only.

Commit d322ab7

Browse files
mlynchmlynch
authored
Merge pull request #1063 from ionic-team/wip-lab-sdlc
Wip lab sdlc
2 parents 4e93f60 + 36ae20a commit d322ab7

File tree

6 files changed

+260
-19
lines changed

6 files changed

+260
-19
lines changed

‎lab/index.html

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,21 @@
55
<meta charset="utf-8">
66
<link rel="icon" type="image/png" href="/ionic-lab/static/img/favicon.png" />
77
<link rel="stylesheet" href="/ionic-lab/static/css/style.css" />
8+
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
89
</head>
910
<body>
1011
<div id="app">
1112
<div id="header">
1213
<div id="header-left">
13-
<a target="_blank" href="http://ionicframework.com/" id="logo">
14+
<a href="#" id="menu-toggle">
15+
<i class="icon ion-navicon-round"></i>
1416
</a>
17+
<div id="logo">
18+
</div>
1519
</div>
1620

1721
<div id="header-right">
22+
<a href="/" target="_blank" id="open-fullscreen">Open fullscreen <i class="icon ion-share"></i></a>
1823
<div class="dropdown">
1924
<button class="dropdown-toggle" type="button">Platforms <span class="dropdown-caret"></span></button>
2025
<ul class="dropdown-menu">
@@ -25,8 +30,32 @@
2530
</div>
2631
</div>
2732
</div>
28-
<preview>
29-
</preview>
33+
<div id="main">
34+
<div id="sidebar" class="hidden">
35+
<div class="title">Quick reference</div>
36+
<div class="close"><i class="icon ion-close-circled"></i></div>
37+
<ul id="menu" class="menu">
38+
<li><a>Components</a>
39+
<ul id="components-menu">
40+
</ul>
41+
</li>
42+
<li><a target="_blank" href="https://ionicframework.com/docs/api">API Reference</a></li>
43+
<li><a target="_blank" href="https://ionicframework.com/docs/native">Ionic Native</a></li>
44+
<li><a target="_blank" href="https://ionicframework.com/docs/">All Documentation</a></li>
45+
</ul>
46+
<div id="view-ad" class="ad">
47+
<img class="logo" src="/ionic-lab/static/img/view-logo.jpg" style="height: 64px"/>
48+
<div class="ad-content">
49+
Test and share your app live on iOS and Android
50+
with the Ionic View app!
51+
<br>
52+
<a href="http://view.ionic.io">Download View</a>
53+
</div>
54+
</div>
55+
</div>
56+
<preview>
57+
</preview>
58+
</div>
3059
<div id="footer">
3160
<div id="footer-left">
3261
<span id="app-info"></span>
@@ -87,6 +116,7 @@ <h2><div class="phone-icon"></div> <a href="/?ionicplatform=windows" target="_bl
87116
</div>
88117
</div>
89118
</template>
119+
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
90120
<script src="/ionic-lab/static/js/lab.js"></script>
91121
<script>
92122
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

‎lab/static/css/style.css

Lines changed: 140 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ html, body {
1111
}
1212

1313
body {
14-
background-color: #f8f9fb;
14+
background-color: #242A31;
1515
font-family: 'AvenirNextLTPro-Regular', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
1616
padding: 0;
1717
margin: 0;
@@ -59,7 +59,7 @@ h2 a {
5959
}
6060
.dropdown:hover .dropdown-toggle {
6161
/* increase the hit box when hovering */
62-
padding-left: 100px;
62+
/*padding-left: 100px;*/
6363
}
6464
.dropdown:hover .dropdown-menu {
6565
display: block;
@@ -102,13 +102,35 @@ h2 a {
102102
#header {
103103
width: 100%;
104104
height: 50px;
105-
background-color: white;
105+
background-color: #151A21;
106106
box-shadow: 0px 1px 3px rgba(0,0,0, 0.15);
107107
}
108+
#header a {
109+
color: #858D9B;
110+
font-family: 'AvenirNextLTPro-Medium', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
111+
font-size: 13px;
112+
text-decoration: none;
113+
display: inline-block;
114+
font-weight: bold;
115+
}
116+
#header .icon {
117+
display: inline-block;
118+
font-size: 22px;
119+
vertical-align: middle;
120+
margin-bottom: 3px;
121+
margin-left: 3px;
122+
}
123+
#header .dropdown {
124+
display: inline-block;
125+
}
126+
108127
#header-left {
109128
float: left;
110129
line-height: 50px;
111130
}
131+
#header-left #menu-toggle {
132+
margin-left: 13px;
133+
}
112134
#header a:hover {
113135
opacity: 1;
114136
}
@@ -120,7 +142,7 @@ h2 a {
120142
#footer {
121143
width: 100%;
122144
border-top: 1px solid rgba(0,0,0,0.06);
123-
background-color: #f8f9fb;
145+
background-color: #151A21;
124146
}
125147
#footer-left {
126148
float: left;
@@ -156,14 +178,29 @@ h2 a {
156178
#logo img {
157179
max-width: 100%;
158180
}
181+
182+
preview {
183+
flex: 1;
184+
width: 100%;
185+
display: flex;
186+
vertical-align: middle;
187+
overflow: auto;
188+
text-align: center;
189+
justify-content: center;
190+
align-items: center;
191+
flex-wrap: wrap;
192+
flex-direction: row;
193+
}
194+
159195
.phone {
160196
display: inline-block;
161-
margin: 20px 20px 0 20px;
197+
margin: 0px 20px 0 20px;
162198
vertical-align: middle;
163199
}
164200
.phone h2 {
165201
text-align: left;
166202
vertical-align: middle;
203+
margin-top: 0;
167204
}
168205
.phone-icon {
169206
display: inline-block;
@@ -279,19 +316,108 @@ h2 a {
279316
position: absolute;
280317
}
281318

282-
preview {
319+
#main {
320+
display: flex;
321+
flex-direction: row;
283322
flex: 1;
284-
width: 100%;
285-
display: block;
286-
vertical-align: middle;
323+
}
324+
325+
#sidebar {
326+
position: relative;
327+
z-index: 1;
328+
background-color: #141A21;
329+
height: 100%;
330+
width: 300px;
331+
box-sizing: border-box;
332+
padding: 15px;
287333
overflow: auto;
288-
text-align: center;
289-
justify-content: center;
290-
align-items: center;
291-
flex-wrap: wrap;
292-
flex-direction: row;
293334
}
294335

336+
#sidebar.hidden {
337+
display: none;
338+
}
339+
340+
#sidebar .close {
341+
cursor: pointer;
342+
position: absolute;
343+
top: 15px;
344+
right: 15px;
345+
color: #a2a9b4;
346+
font-size: 24px;
347+
}
348+
349+
#sidebar .title {
350+
font-size: 20px;
351+
margin-top: 5px;
352+
color: white;
353+
}
354+
355+
.menu {
356+
padding: 0;
357+
margin: 0;
358+
-webkit-touch-callout: none; /* iOS Safari */
359+
-webkit-user-select: none; /* Safari */
360+
-khtml-user-select: none; /* Konqueror HTML */
361+
-moz-user-select: none; /* Firefox */
362+
-ms-user-select: none; /* Internet Explorer/Edge */
363+
user-select: none; /* Non-prefixed version, currently
364+
supported by Chrome and Opera */
365+
}
366+
.menu li {
367+
list-style: none;
368+
margin: 15px 0;
369+
}
370+
.menu li a {
371+
color: #a2a9b4;
372+
text-decoration: none;
373+
cursor: pointer;
374+
}
375+
.menu > li > ul {
376+
display: none;
377+
padding: 0;
378+
margin: 0;
379+
}
380+
.menu > li > ul li {
381+
padding-left: 15px;
382+
}
383+
.menu > li.expanded > ul {
384+
display: block;
385+
}
386+
.menu hr {
387+
height: 1px;
388+
border: 0;
389+
background-color: #2b3642;
390+
}
391+
.menu .version {
392+
color: #a2a9b4;
393+
opacity: 0.5;
394+
font-size: 12px;
395+
}
396+
397+
#menu {
398+
}
399+
400+
.ad {
401+
background-color: #232A31;
402+
cursor: pointer;
403+
border-radius: 2px;
404+
border: 1px solid #3f4650;
405+
font-size: 13px;
406+
color: white;
407+
padding: 10px;
408+
display: flex;
409+
margin-top: 55px;
410+
}
411+
.ad .logo {
412+
display: block;
413+
margin-right: 15px;
414+
}
415+
.ad .content {
416+
flex: 1;
417+
}
418+
.ad a {
419+
color: #308EFD;
420+
}
295421

296422
@media screen and (max-height: 800px) {
297423
#header {

‎lab/static/img/view-logo.jpg

4.76 KB
Loading

‎lab/static/js/lab.js

Lines changed: 77 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,79 @@ var $ = document.querySelector.bind(document);
22

33
var API_ROOT = '/ionic-lab/api/v1';
44

5+
var APP_CONFIG = {}
6+
7+
function loadAppConfig() {
8+
var req = new XMLHttpRequest();
9+
req.addEventListener('load', function(e) {
10+
setAppConfig(JSON.parse(req.response));
11+
})
12+
req.open('GET', API_ROOT + '/app-config', true)
13+
req.send(null);
14+
}
15+
16+
function setAppConfig(data) {
17+
APP_CONFIG = data;
18+
}
19+
20+
21+
function buildMenu() {
22+
buildComponentsMenu();
23+
const sidebar = $('#sidebar');
24+
const topLevels = sidebar.querySelectorAll('#menu > li > a');
25+
26+
const lastMenuConfig = window.localStorage.getItem('ionic_labmenu');
27+
if(lastMenuConfig === 'true' || lastMenuConfig === null) {
28+
sidebar.classList.remove('hidden');
29+
}
30+
31+
Array.prototype.map.call(topLevels, a => {
32+
if(!a.href) {
33+
a.addEventListener('click', e => {
34+
if(a.parentNode.classList.contains('expanded')) {
35+
a.parentNode.classList.remove('expanded');
36+
} else {
37+
a.parentNode.classList.add('expanded');
38+
}
39+
e.preventDefault();
40+
});
41+
}
42+
})
43+
44+
$('#view-ad').addEventListener('click', (e) => {
45+
var win = window.open('http://view.ionic.io/', '_blank');
46+
win.focus();
47+
})
48+
49+
const toggleMenu = e => {
50+
if(sidebar.classList.contains('hidden')) {
51+
sidebar.classList.remove('hidden');
52+
window.localStorage.setItem('ionic_labmenu', 'true');
53+
} else {
54+
sidebar.classList.add('hidden');
55+
window.localStorage.setItem('ionic_labmenu', 'false');
56+
}
57+
}
58+
59+
$('#menu-toggle').addEventListener('click', toggleMenu);
60+
$('#sidebar .close').addEventListener('click', toggleMenu);
61+
}
62+
63+
function buildComponentsMenu() {
64+
var items = [{"href":"http://ionicframework.com/docs/components/#overview","title":"Overview"},{"href":"http://ionicframework.com/docs/components/#action-sheets","title":"Action Sheets"},{"href":"http://ionicframework.com/docs/components/#alert","title":"Alerts"},{"href":"http://ionicframework.com/docs/components/#badges","title":"Badges"},{"href":"http://ionicframework.com/docs/components/#buttons","title":"Buttons"},{"href":"http://ionicframework.com/docs/components/#cards","title":"Cards"},{"href":"http://ionicframework.com/docs/components/#checkbox","title":"Checkbox"},{"href":"http://ionicframework.com/docs/components/#datetime","title":"DateTime"},{"href":"http://ionicframework.com/docs/components/#fabs","title":"FABs"},{"href":"http://ionicframework.com/docs/components/#gestures","title":"Gestures"},{"href":"http://ionicframework.com/docs/components/#grid","title":"Grid"},{"href":"http://ionicframework.com/docs/components/#icons","title":"Icons"},{"href":"http://ionicframework.com/docs/components/#inputs","title":"Inputs"},{"href":"http://ionicframework.com/docs/components/#lists","title":"Lists"},{"href":"http://ionicframework.com/docs/components/#loading","title":"Loading"},{"href":"http://ionicframework.com/docs/components/#menus","title":"Menus"},{"href":"http://ionicframework.com/docs/components/#modals","title":"Modals"},{"href":"http://ionicframework.com/docs/components/#navigation","title":"Navigation"},{"href":"http://ionicframework.com/docs/components/#popovers","title":"Popover"},{"href":"http://ionicframework.com/docs/components/#radio","title":"Radio"},{"href":"http://ionicframework.com/docs/components/#range","title":"Range"},{"href":"http://ionicframework.com/docs/components/#searchbar","title":"Searchbar"},{"href":"http://ionicframework.com/docs/components/#segment","title":"Segment"},{"href":"http://ionicframework.com/docs/components/#select","title":"Select"},{"href":"http://ionicframework.com/docs/components/#slides","title":"Slides"},{"href":"http://ionicframework.com/docs/components/#tabs","title":"Tabs"},{"href":"http://ionicframework.com/docs/components/#toast","title":"Toast"},{"href":"http://ionicframework.com/docs/components/#toggle","title":"Toggle"},{"href":"http://ionicframework.com/docs/components/#toolbar","title":"Toolbar"}];
65+
66+
const componentsMenu = $('#components-menu');
67+
items.map(i => {
68+
const l = document.createElement('li')
69+
const a = document.createElement('a')
70+
a.href = i.href
71+
a.target = "_blank";
72+
a.innerText = i.title
73+
l.appendChild(a)
74+
componentsMenu.appendChild(l)
75+
})
76+
}
77+
578
function tryShowViewPopup() {
679
var view = window.localStorage.getItem('ionic_viewpop');
780

@@ -106,7 +179,10 @@ function loadCordova() {
106179
req.send(null);
107180
}
108181

182+
//loadSearchIndex();
183+
loadAppConfig();
184+
buildMenu();
109185
showLastDevices();
110186
loadCordova();
111187
bindToggles();
112-
tryShowViewPopup();
188+
//tryShowViewPopup();

‎src/dev-server/http-server.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import * as Constants from '../util/constants';
1818
import { getBooleanPropertyValue } from '../util/helpers';
1919
import { getProjectJson, IonicProject } from '../util/ionic-project';
2020

21-
import { LabAppView, ApiCordovaProject } from './lab';
21+
import { LabAppView, ApiCordovaProject, ApiPackageJson } from './lab';
2222

2323

2424
/**
@@ -40,6 +40,7 @@ export function createHttpServer(config: ServeConfig): express.Application {
4040
app.use(IONIC_LAB_URL + '/static', express.static(path.join(__dirname, '..', '..', 'lab', 'static')));
4141
app.get(IONIC_LAB_URL, LabAppView);
4242
app.get(IONIC_LAB_URL + '/api/v1/cordova', ApiCordovaProject );
43+
app.get(IONIC_LAB_URL + '/api/v1/app-config', ApiPackageJson);
4344

4445
app.get('/cordova.js', servePlatformResource, serveMockCordovaJS);
4546
app.get('/cordova_plugins.js', servePlatformResource);

‎src/dev-server/lab.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,11 @@ export let ApiCordovaProject = (req: any, res: any) => {
1616
res.json(config);
1717
});
1818
};
19+
20+
export let ApiPackageJson = (req: any, res: any) => {
21+
res.sendFile(path.join(process.cwd(), 'package.json'), {
22+
headers: {
23+
'content-type': 'application/json'
24+
}
25+
})
26+
};

0 commit comments

Comments
 (0)