Skip to content
This repository was archived by the owner on Jul 21, 2021. It is now read-only.

Commit c6e29be

Browse files
gorhillgorhill
committed
bring back popup panel access from logger
Popup panel is now tab selector-bound, rather than logger entry-bound. Additonally, start migrating toward svg-based icons rather than font-based icons.
1 parent fc0bb7a commit c6e29be

File tree

6 files changed

+313
-94
lines changed

6 files changed

+313
-94
lines changed

‎src/css/common.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,24 @@
3030
vertical-align: baseline;
3131
display: inline-block;
3232
}
33+
.fa-icon {
34+
align-self: center;
35+
background-color: transparent;
36+
border: border: 1px solid transparent;
37+
display: inline-block;
38+
height: 1.2em;
39+
vertical-align: middle;
40+
width: 1.2em;
41+
}
42+
.fa-icon:hover {
43+
background-color: #eee;
44+
}
45+
.fa-icon.disabled {
46+
fill: #888;
47+
opacity: 0.4;
48+
stroke: #fff;
49+
pointer-events: none;
50+
}
3351

3452
body {
3553
font-size: 14px;

‎src/css/logger-ui.css‎

Lines changed: 73 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ body {
99
padding: 0;
1010
width: 100%;
1111
}
12+
.fa-icon {
13+
cursor: pointer;
14+
height: 1.5em;
15+
padding: 0.5em 1em;
16+
width: 1.5em;
17+
}
1218
#toolbar {
1319
background-color: white;
1420
border: 0;
@@ -23,42 +29,73 @@ body {
2329
width: 100%;
2430
z-index: 10;
2531
}
26-
#toolbar .button {
27-
background-color: white;
28-
border: none;
29-
box-sizing: border-box;
30-
-moz-box-sizing: border-box;
31-
cursor: pointer;
32-
display: inline-block;
33-
font-size: 150%;
34-
margin: 0;
35-
padding: 8px;
36-
}
37-
#toolbar .button.disabled {
38-
opacity: 0.2;
39-
pointer-events: none;
40-
}
41-
#toolbar .button:hover {
42-
background-color: #eee;
43-
}
4432
#toolbar > div {
33+
display: flex;
34+
padding: 0.5em;
4535
white-space: nowrap;
4636
}
47-
#toolbar > div:first-of-type {
48-
font-size: 120%;
49-
}
50-
#toolbar > div > * {
51-
vertical-align: middle;
52-
}
5337
#pageSelector {
5438
width: 28em;
39+
margin-right: 0.5em;
5540
padding: 0.2em 0;
5641
}
57-
body #compactViewToggler.button:before {
58-
content: '\f102';
42+
43+
@keyframes popupPanelShow {
44+
from { opacity: 0; }
45+
to { opacity: 1; }
46+
}
47+
#popupPanelContainer {
48+
background: white;
49+
border: 1px solid gray;
50+
display: none;
51+
overflow: hidden;
52+
position: fixed;
53+
right: 0;
54+
/*top: 0;*/
55+
z-index: 2000;
56+
}
57+
body.popupPanelOn #popupPanelContainer {
58+
animation-duration: 0.25s;
59+
animation-name: popupPanelShow;
60+
display: block;
61+
}
62+
#popupPanelContainer.hide {
63+
width: 6em !important;
64+
}
65+
#popupPanelContainer > div {
66+
background: #888;
67+
border: 0;
68+
display: none;
69+
text-align: right;
70+
}
71+
#popupPanelContainer > div > span {
72+
color: #ccc;
73+
cursor: pointer;
74+
display: inline-block;
75+
font: 14px FontAwesome;
76+
padding: 3px;
77+
}
78+
#popupPanelContainer > div > span:hover {
79+
color: white;
80+
}
81+
#popupPanelContainer > iframe {
82+
border: 0;
83+
padding: 0;
84+
margin: 0;
85+
width: 100%;
86+
}
87+
#popupPanelContainer.hide > iframe {
88+
display: none;
89+
}
90+
91+
#popupPanelButton > use {
92+
transform: scaleY(0.4);
93+
}
94+
body.popupPanelOn #popupPanelButton > use {
95+
transform: scaleY(1);
5996
}
60-
body.compactView #compactViewToggler.button:before {
61-
content: '\f103';
97+
body.compactView #compactViewToggler {
98+
transform: rotateZ(180deg);
6299
}
63100
#filterButton {
64101
opacity: 0.25;
@@ -189,7 +226,7 @@ body.compactView #content tr:not(.vExpanded) td {
189226
position: fixed;
190227
top: 0;
191228
width: 100vw;
192-
z-index: 1000;
229+
z-index: 5000;
193230
}
194231
.modalDialog > .dialog {
195232
background-color: white;
@@ -218,46 +255,20 @@ body.compactView #content tr:not(.vExpanded) td {
218255
justify-content: space-around;
219256
margin-left: 0.5em;
220257
}
221-
.ruleEditorToolbar button {
222-
background-color: white;
223-
border: 0;
224-
color: black;
225-
cursor: pointer;
226-
margin: 0;
227-
padding: 0.2em;
228-
position: relative;
229-
}
230-
.ruleEditorToolbar button:hover {
231-
background-color: #eee;
232-
}
233-
.ruleEditorToolbar button.disabled {
234-
color: #ccc;
235-
}
236-
.ruleEditorToolbar button.fa {
237-
font: 1.7em FontAwesome;
238-
min-width: 1.5em;
239-
}
240-
.ruleEditorToolbar button > span.badge {
241-
background-color: rgba(240,240,240,0.75);
242-
bottom: 1px;
243-
color: #000;
244-
display: inline-block;
258+
.ruleEditorToolbar .fa-icon > .badge {
245259
font-family: sans-serif;
246-
font-size: 40%;
247-
padding: 1px 1px;
260+
font-size: 80%;
248261
pointer-events: none;
249-
position: absolute;
250-
right: 1px;
251262
}
252-
.ruleEditorToolbar button.disabled > span.badge {
263+
.ruleEditorToolbar .fa-icon.disabled > .badge {
253264
display: none;
254265
}
255266

256-
button.scopeRel {
257-
color: #24c;
267+
.fa-icon.scopeRel {
268+
fill: #24c;
258269
}
259-
body[data-scope="*"] button.scopeRel {
260-
color: #000;
270+
body[data-scope="*"] .fa-icon.scopeRel {
271+
fill: #000;
261272
}
262273

263274
.ruleWidgets {

‎src/img/fontawesome/LICENSE.txt‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
Font Awesome Free License
2+
-------------------------
3+
4+
Font Awesome Free is free, open source, and GPL friendly. You can use it for
5+
commercial projects, open source projects, or really almost whatever you want.
6+
Full Font Awesome Free license: https://fontawesome.com/license/free.
7+
8+
# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
9+
In the Font Awesome Free download, the CC BY 4.0 license applies to all icons
10+
packaged as SVG and JS file types.
11+
12+
# Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL)
13+
In the Font Awesome Free download, the SIL OLF license applies to all icons
14+
packaged as web and desktop font files.
15+
16+
# Code: MIT License (https://opensource.org/licenses/MIT)
17+
In the Font Awesome Free download, the MIT license applies to all non-font and
18+
non-icon files.
19+
20+
# Attribution
21+
Attribution is required by MIT, SIL OLF, and CC BY licenses. Downloaded Font
22+
Awesome Free files already contain embedded comments with sufficient
23+
attribution, so you shouldn't need to do anything additional when using these
24+
files normally.
25+
26+
We've kept attribution comments terse, so we ask that you do not actively work
27+
to remove them from files, especially code. They're a great way for folks to
28+
learn about Font Awesome.
29+
30+
# Brand Icons
31+
All brand icons are trademarks of their respective owners. The use of these
32+
trademarks does not indicate endorsement of the trademark holder by Font
33+
Awesome, nor vice versa. **Please do not use brand logos for any purpose except
34+
to represent the company, product, or service to which they refer.**

‎src/img/fontawesome/fontawesome-defs.svg‎

Lines changed: 16 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)