Skip to content

Commit bd27d85

Browse files
Karolis2011Karolis2011
committed
Made theme basic usable
1 parent 2b41747 commit bd27d85

File tree

10 files changed

+628
-43
lines changed

10 files changed

+628
-43
lines changed

‎code/modules/vueui/ui.dm

+9-1
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ main ui datum.
115115
<meta http-equiv="X-UA-Compatible" content="IE=11">
116116
<meta charset="UTF-8">
117117
</head>
118-
<body class="theme-nanoui">
118+
<body class="[get_theme_class()]">
119119
<div id="header">
120120
<header-[header]></header-[header]>
121121
</div>
@@ -298,4 +298,12 @@ main ui datum.
298298
return
299299
update_status()
300300

301+
/**
302+
* Generates json state object to be sent to ui.
303+
*
304+
* @return json object - text
305+
*/
306+
/datum/vueuiui/proc/get_theme_class()
307+
return ""
308+
301309
#undef UIDEBUG

‎vueui/components/header/default.vue

+11-19
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
2-
<div id='uiTitleWrapper' unselectable="on">
2+
<div class='uiTitleWrapper' unselectable="on">
33
<slot></slot>
4-
<div id='uiStatusIcon' class='icon24' :class="statusClass" unselectable="on"></div>
5-
<div id='uiTitleText' unselectable="on">{{ title }}</div>
6-
<div id='uiTitleFluff' unselectable="on"></div>
4+
<div class='uiStatusIcon icon24' :class="statusClass" unselectable="on"></div>
5+
<div class='uiTitleText' unselectable="on">{{ title }}</div>
6+
<div class='uiTitleFluff' unselectable="on"></div>
77
</div>
88
</template>
99

@@ -24,45 +24,37 @@ export default {
2424
</script>
2525

2626
<style lang="scss" scoped>
27-
#uiTitleWrapper {
28-
box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.5);
27+
.uiTitleWrapper {
2928
margin: -8px -8px 10px;
3029
position: relative;
3130
padding-bottom: 8px;
3231
float: none;
33-
background: url(../../resources/uiTitleBackground.png) repeat center;
32+
background-color: #b9b9b9;
3433
}
3534
36-
#uiTitleText {
35+
.uiTitleText {
3736
position: relative;
3837
display: inline-block;
3938
top: 4px;
4039
left: 18px;
4140
width: 66%;
4241
width: calc(100% - 36px - 42px - 18px);
43-
color: #E9C183;
4442
font-size: 16px;
4543
line-height: 20px;
4644
vertical-align: middle;
4745
}
4846
49-
#uiTitle.icon {
47+
.uiTitle.icon {
5048
padding: 6px 8px 6px 42px;
5149
background-position: 2px 50%;
5250
background-repeat: no-repeat;
5351
}
5452
55-
#uiTitleFluff {
56-
position: relative;
57-
float: right;
58-
top: 4px;
59-
right: 10px;
60-
width: 42px;
61-
height: 24px;
62-
background: url(../../resources/uiTitleFluff.png) 50% 50% no-repeat;
53+
.uiTitleFluff {
54+
display: none;
6355
}
6456
65-
#uiStatusIcon {
57+
.uiStatusIcon {
6658
position: relative;
6759
display: inline-block;
6860
top: 4px;

‎vueui/components/view/fax.vue

+6-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,12 @@
2424
{{ state.paper }}
2525
</div>
2626
</div>
27-
<vui-button :params="{ send: 1}">Send</vui-button>
27+
<div class="item">
28+
<div class="itemLabel"></div>
29+
<div class="itemContent">
30+
<vui-button :params="{ send: 1}">Send</vui-button>
31+
</div>
32+
</div>
2833
</template>
2934
<span v-else>Please insert paper to send via secure connection.</span>
3035
</template>

‎vueui/components/view/test-apc.vue

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<template>
2+
<div>
3+
<div class='notice'>
4+
Swipe an ID card to unlock this interface
5+
</div>
6+
<div style="min-width: 480px">
7+
<h3>Power Status</h3>
8+
<div class="item">
9+
<div class="itemLabel">Main Breaker:</div>
10+
<div class="itemContent">
11+
<span class='good'>On</span>
12+
</div>
13+
</div>
14+
<div class="item">
15+
<div class="itemLabel">External Power:</div>
16+
<div class="itemContent">
17+
<span class='bad'>None</span>
18+
</div>
19+
</div>
20+
<div class="item">
21+
<div class="itemLabel">Power Cell:</div>
22+
<div class="itemContent">
23+
<vui-progress :value="90" class="good"></vui-progress>
24+
90%
25+
</div>
26+
</div>
27+
<div class="item">
28+
<div class="itemLabel">Charge Mode:</div>
29+
<div class="itemContent">
30+
<span class='good'>Auto</span> [<span class='bad'>Not Charging</span>]
31+
</div>
32+
</div>
33+
<div class="item">
34+
<div class="itemLabel">Night Lighting:</div>
35+
<div class="itemContent">
36+
<vui-button icon="night" disabled>On</vui-button>
37+
<vui-button icon="close" class="selected">Off</vui-button>
38+
</div>
39+
</div>
40+
<div class="item">
41+
<div class="itemLabel">Emergency Lighting:</div>
42+
<div class="itemContent">
43+
On
44+
</div>
45+
</div>
46+
<h3>Power Channels</h3>
47+
<div v-for="value in [
48+
{title: 'Equipment', powerLoad: 10, status: 3},
49+
{title: 'Lighting', powerLoad: 2, status: 3},
50+
{title: 'Envoriment', powerLoad: 10, status: 3}
51+
]" :key="value.title" class="item">
52+
<div class="itemLabel">{{ value.title }}:</div>
53+
<div class="itemContent" style="width: 70px; text-align: right">{{ value.powerLoad }} W</div>
54+
<div class="itemContent" style="width: 105px;">&nbsp;&nbsp;
55+
<span class='bad' v-if="value.status <= 1">Off</span>
56+
<span class='good' v-if="value.status >= 2">On</span>
57+
<span v-if="value.status == 1 || value.status == 3">&nbsp;&nbsp;Auto</span>
58+
<span v-else>&nbsp;&nbsp;Manual</span>
59+
</div>
60+
</div>
61+
<div class="item" style="font-weight: bold;">
62+
<div class="itemLabel">Total Load:</div>
63+
<div class="itemContent">
64+
22W
65+
</div>
66+
</div>
67+
<div class="item">
68+
<div class="itemLabel">Cover Lock:</div>
69+
<div class="itemContent">
70+
<span class='good'>Engaged</span>
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
</template>
76+
77+
<script>
78+
export default {
79+
name: "view-test-apc"
80+
}
81+
</script>

‎vueui/components/vui/button.vue

-6
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,4 @@ export default {
4343
</script>
4444

4545
<style lang="scss">
46-
.button {
47-
-webkit-user-select: none;
48-
-moz-user-select: none;
49-
-ms-user-select: none;
50-
user-select: none;
51-
}
5246
</style>

‎vueui/dist/main.js

+421-7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎vueui/resources/uiIcons16Black.png

29 KB
Loading

‎vueui/styles/theme-basic.scss

+76-5
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,6 @@ body {
99
code {
1010
font-family: 'Courier New', Courier, monospace;
1111
}
12-
bybutton {
13-
background-color: red;
14-
}
1512

1613
input, textarea, button, select, .button {
1714
box-sizing: border-box;
@@ -22,16 +19,90 @@ input, textarea, button, select, .button {
2219
}
2320

2421
.button, button, input[type=submit], input[type=button], input[type=reset], input[disabled] {
22+
-webkit-user-select: none;
23+
-moz-user-select: none;
24+
-ms-user-select: none;
25+
user-select: none;
2526
background-color: #d8d8d8;
2627
cursor: pointer;
28+
padding: 2px 4px;
29+
vertical-align: top;
2730
&:hover {
2831
background-color: #b2deee;
2932
}
30-
&:active {
31-
padding: 4px 6px;
33+
.uiIcon16 {
34+
margin: 0;
35+
}
36+
* {
37+
vertical-align: middle;
3238
}
3339
}
3440

3541
.hidden {
3642
display: none;
43+
}
44+
45+
.itemGroup {
46+
border: 1px solid #e9c183;
47+
background: #2c2c2c;
48+
padding: 4px;
49+
}
50+
51+
.item {
52+
width: 100%;
53+
margin: 4px 0 0 0;
54+
}
55+
56+
.itemContentNarrow {
57+
width: 30%;
58+
}
59+
60+
.itemContent {
61+
width: 69%;
62+
}
63+
64+
.itemLabelNarrow, .itemLabel, .itemLabelWide, .itemLabelWider, .itemLabelWidest, .itemContentNarrow, .itemContent {
65+
display: inline-block
66+
}
67+
68+
.itemLabelNarrow {
69+
width: 20%;
70+
}
71+
72+
.itemLabel {
73+
width: 30%;
74+
vertical-align: middle;
75+
}
76+
77+
.itemLabelWide {
78+
width: 45%;
79+
}
80+
81+
.itemLabelWider {
82+
width: 69%;
83+
}
84+
85+
.itemLabelWidest {
86+
width: 100%;
87+
}
88+
89+
.itemContentWide {
90+
width: 79%;
91+
}
92+
93+
.itemContentSmall {
94+
width: 33%;
95+
}
96+
97+
.itemContentMedium {
98+
width: 55%;
99+
}
100+
101+
.notice {
102+
background: #ffac4e;
103+
color: #000000;
104+
font-style: italic;
105+
font-weight: bold;
106+
padding: 3px 4px;
107+
margin: 4px 0px;
37108
}

‎vueui/styles/theme-nano.scss

+22-2
Original file line numberDiff line numberDiff line change
@@ -235,10 +235,30 @@
235235
font-size: 12px;
236236
font-style: italic;
237237
font-weight: bold;
238-
padding: 3px 4px 3px 4px;
238+
padding: 3px 4px;
239239
margin: 4px 0 4px 0;
240240
}
241241

242+
.uiTitleWrapper {
243+
background: url(../resources/uiTitleBackground.png) repeat center;
244+
color: #E9C183;
245+
box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.5);
246+
}
247+
248+
.uiTitleFluff {
249+
display: initial;
250+
position: relative;
251+
float: right;
252+
top: 4px;
253+
right: 10px;
254+
width: 42px;
255+
height: 24px;
256+
background: url(../resources/uiTitleFluff.png) 50% 50% no-repeat;
257+
}
258+
259+
.uiIcon16 {
260+
background-image: url(../resources/uiIcons16.png);
261+
}
242262
}
243263

244264
// Nano Icons
@@ -247,7 +267,7 @@
247267
width: 16px;
248268
height: 16px;
249269
margin: 2px 2px 0 2px;
250-
background-image: url(../resources/uiIcons16.png);
270+
background-image: url(../resources/uiIcons16Black.png);
251271

252272
$icons:
253273
"blank" 16px 16px,

‎vueui/template.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta http-equiv="X-UA-Compatible" content="IE=11"/>
55
<meta charset="UTF-8"/>
66
</head>
7-
<body class="theme-nanoui">
7+
<body class="">
88
<div id="header">
99
<header-default></header-default>
1010
</div>
@@ -45,7 +45,7 @@ <h2>JAVASCRIPT REQUIRED</h2>
4545
"Stationwide broadcast (WARNING)"
4646
]
4747
},
48-
"active": "fax",
48+
"active": "test-apc",
4949
"uiref": "[0x210072c9]",
5050
"status": 2,
5151
"wtime": 423.34,

0 commit comments

Comments
 (0)