-
Notifications
You must be signed in to change notification settings - Fork 15
/
ui.html
115 lines (98 loc) · 2.77 KB
/
ui.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!-- STYLE -->
<style>
html, body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 12px;
color: #666;
}
.container {
padding: 0 8px;
}
.input-style {
width: 140px;
height: 24px;
margin-top: 8px;
border-radius: 4px;
border: 1px solid #e6e6e6;
padding: 4px;
font-size: 12px;
}
.label{
width: 36px;
display: inline-block;
color: #000;
font-weight: 500;
}
.submitButton {
height: 30px;
color: white;
border-radius: 4px;
border: none;
background-color: #18A0FB;
padding: 0px 12px;
font-size: 12px;
font-weight: 500;
}
.resetButton {
height: 30px;
color: #18A0FB;
border-radius: 4px;
border: none;
background-color: #fff;
padding: 0px 12px;
font-size: 12px;
font-weight: 500;
}
.submitButton:hover, .resetButton:hover {
opacity: 0.8;
transition: 150ms;
}
.submitButton:focus, .resetButton:focus {
border: none;
}
input:focus {
border: 1px solid #18A0FB;
outline-style: none;
}
</style>
<!-- BODY -->
<html>
<div class="container">
Enter dark / light color styles name identificator
<div class="labelPlusInput">
<div class="label">Light:</div>
<input type="key" class="input-style" id="lightId" placeholder="[day]"></br>
</div>
<div class="labelPlusInput">
<div class="label">Dark:</div>
<input type="key" class="input-style" id="darkId" placeholder="[night]"></br></br>
</div>
<input type="button" class="submitButton" value="Save settings" id="submit" onclick="sendToPlugin();">
<input type="button" class="resetButton" value="Reset" id="submit" onclick="resetSettings();">
<script>
setInputValue();
function setInputValue(){
onmessage = (event) => {
var day = event.data.pluginMessage.day;
var night = event.data.pluginMessage.night;
document.getElementById("lightId").value = day;
document.getElementById("darkId").value = night;
}
}
function sendToPlugin(){
var dayColor = document.getElementById("lightId").value;
var nightColor = document.getElementById("darkId").value;
sendDay(), sendNight()
function sendDay(){
parent.postMessage({ pluginMessage: { type: 'dayInput', dayColor } }, '*')
}
function sendNight(){
parent.postMessage({ pluginMessage: { type: 'nightInput', nightColor } }, '*')
}
}
function resetSettings(){
parent.postMessage({ pluginMessage: { type: 'clearStorage' } }, '*')
}
</script>
</div>
</html>