-
Notifications
You must be signed in to change notification settings - Fork 0
/
triage-aid-test.html
170 lines (170 loc) · 4.66 KB
/
triage-aid-test.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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<head>
<!--<style>
body { background-color: green; }
/* Structural styles */
section#triage-aid-root {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center;
pointer-events: none; /* allow clicks to pass-through */
}
section#triage-aid-console {
display: inline-flex;
justify-content: center;
align-items: center;
}
section#triage-aid-addpanel {
display: block; /* ensure always so that browser's UA stylesheet for hidden attribute doesn't override */
}
section#triage-aid-addpanel > table {
margin: 0 auto;
}
/* colors and presentation */
section#triage-aid-console,
section#triage-aid-addpanel {
background-color: white;
border: 1px solid gray;
border-top: 0;
box-shadow: 0 0 20px white;
pointer-events: auto;
}
section#triage-aid-root {
font-family: "Segoe UI";
font-size: 10pt;
}
section#triage-aid-console > img {
margin: 0 3px;
}
section#triage-aid-addpanel > table {
border-collapse: collapse;
margin-bottom: 1em;
border-bottom: 2px solid gray;
}
section#triage-aid-addpanel > table th {
border-bottom: 2px solid gray;
}
section#triage-aid-addpanel > table > tbody > tr:nth-child(even) {
background-color: #eee;
}
section#triage-aid-addpanel > table td {
padding: 0 1em;
text-align: left;
color: gray;
}
section#triage-aid-addpanel > table tbody tr td:nth-child(2) {
color: black;
font-family: consolas;
}
/* animations and transitions */
section#triage-aid-console,
section#triage-aid-addpanel {
transition: margin-top 0.3s ease-out,
visibility 1s linear,
opacity 0.3s linear;
visibility: visible;
opacity: 1;
margin-top: 0;
}
section#triage-aid-console[hidden] {
margin-top: -30px;
visibility: hidden;
opacity: 0;
}
section#triage-aid-addpanel[hidden] {
margin-top: -100%;
visibility: hidden;
opacity: 0;
}
input#triage-aid-add.haschanges {
animation: grabattention 500ms ease 8 alternate;
}
@keyframes grabattention {
0 {
color: black;
border: 1px solid gray;
box-shadow: 0 0 2px lightgray inset;
background-color: lightgray;
}
100% {
color: orange;
border: 1px solid orange;
box-shadow: 2px 2px 10px orange inset;
background-color: yellow;
}
}
span#triage-aid-grow.hasdeletes input {
animation: deletecandidate 1.2s ease infinite alternate;
}
@keyframes deletecandidate {
0 {
border: 1px solid salmon;
box-shadow: 0 0 2px salmon inset;
background-color: salmon;
}
100% {
border: 1px solid red;
box-shadow: 2px 2px 10px red inset;
background-color: salmon;
}
}
span#triage-aid-grow input.added {
animation: justadded 1.5s ease 2 alternate;
}
@keyframes justadded {
0 {
color: black;
box-shadow: 0 0 2px lightgray inset;
background-color: lightgray;
}
100% {
color: yellow;
box-shadow: 5px 5px 10px blue inset;
background-color: #008;
}
}
</style>-->
<body style=background-color:red>
<br>
<br>
Product: <input aria-label="Product" id="foo-bar"/>
Iteration Path: <input aria-label="Iteration Path" id="hi"/>
ID: <input aria-label="ID" id='t'/>
<input type=button value='swap id and values' onclick="document.querySelector('#hi').value='new_path';document.querySelector('#t').value='250023';document.querySelector('#foo-bar').value='my-prod';">
<!--
<section id=triage-aid-root>
<section id=triage-aid-console>
<img src=triage-aid-logo-16.png>
<input title=Add... id=triage-aid-add type=button value=+ accesskey=a disabled>
<input title=Remove... id=triage-aid-remove type=button value=- accesskey=r disabled>
<span id=triage-aid-grow>
<input type=button accesskey="1" value="1:->Lay">
<input type=button accesskey="2" value="2:Approve">
</span>
</section>
<section id=triage-aid-addpanel hidden>
<table>
<thead>
<tr>
<th>Field</th><th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product</td><td>Watson</td>
</tr>
<tr>
<td>Interation Path</td><td>OS\1603</td>
</tr>
</tbody>
</table>
<span>
<label>Provide a label <input id=triage-aid-addname></label>
<input type=button id=triage-aid-addnow value=Add disabled>
</span>
</section>
</section>-->
<script src=content.js></script>
</body>