Skip to content

Commit 363764b

Browse files
erwindonerwindon
authored
Merge pull request #377 from erwindon/smallbuttons
enhance visibility and layout of buttons (including dropdown menu-buttons)
2 parents 1fbdd81 + 4589011 commit 363764b

8 files changed

Lines changed: 86 additions & 55 deletions

File tree

‎saltgui/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,14 @@ <h1 id="logo" class='logo'>SaltGUI</h1>
4646
<div class='popup' id='popup-run-command'>
4747
<div class='run-command'>
4848
<!-- 2716 = HEAVY MULTIPLICATION X -->
49-
<div class='nearly-visible-button' id='cmd-close-button'>&#x2716;</div>
49+
<div id='cmd-close-button' class='small-button small-button-right small-button-for-click'>&#x2716;</div>
5050
<!-- 2753 = BLACK QUESTION MARK ORNAMENT -->
5151
<!-- FE0E = VARIATION SELECTOR-15 (render as text) -->
52-
<span id="help" style="float: right; cursor: help; margin-right: 20px">&#x2753;&#xFE0E;</span>
52+
<span id="help" class="small-button small-button-right small-button-for-click" style="cursor: help">&#x2753;&#xFE0E;</span>
5353
<div><h1>Manual Run</h1><p id="template-menu-here"></p></div>
54-
<div id="target-box"><input list="data-list-target" id='target' type='text' placeholder="Target"/></div>
55-
<div id="cmd-box"><input id='command' type='text' placeholder="Command"/></div>
56-
<div id="run-block"><input id="run-command" type='submit' value="Run command"/></div>
54+
<div id="target-box"><input list="data-list-target" id='target' type='text' placeholder="Target" style="margin-right: 10px"/></div>
55+
<div id="cmd-box"><input id='command' type='text' placeholder="Command" style="margin-right: 10px"/></div>
56+
<div id="run-block"><input id="run-command" type='submit' value="Run command" style="margin-right: 10px"/></div>
5757
<pre id="popup-output" class='output'>Waiting for command...</pre>
5858
</div>
5959
</div>

‎saltgui/static/scripts/Character.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,10 @@
33
export class Character {
44

55
static init () {
6+
// VS15 = request text representation
67
Character._VARIATION_SELECTOR_15 = "\uFE0E";
8+
9+
// VS16 = request emoji representation
710
Character._VARIATION_SELECTOR_16 = "\uFE0F";
811

912
Character.NO_BREAK_SPACE = "\u00A0";
@@ -36,7 +39,8 @@ export class Character {
3639
Character._BLACK_MEDIUM_RIGHT_POINTING_TRIANGLE = "\u2BC8";
3740

3841
// D83D DCD6 = 1F4D6 = A BOOK
39-
Character.A_BOOK = "\uD83D\uDCD6";
42+
Character.A_BOOK =
43+
"\uD83D\uDCD6" + Character._VARIATION_SELECTOR_15;
4044

4145
// D83D DD0D = 1F50D = LEFT-POINTING MAGNIFYING GLASS
4246
Character.LEFT_POINTING_MAGNIFYING_GLASS_MONO =

‎saltgui/static/scripts/CommandBox.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -371,7 +371,7 @@ export class CommandBox {
371371
// a KeyEvent(type="keyup")
372372
static hideManualRun (pEvent) {
373373
// Don't close if they click inside the window
374-
if (pEvent && pEvent.type === "click" && !pEvent.target.classList.contains("popup") && !pEvent.target.classList.contains("nearly-visible-button")) {
374+
if (pEvent && pEvent.type === "click" && !pEvent.target.classList.contains("popup") && !pEvent.target.classList.contains("small-button")) {
375375
return;
376376
}
377377

‎saltgui/static/scripts/DropDown.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,16 @@ export class DropDownMenu {
3535
this.menuDropdown.classList.add("no-search");
3636

3737
if (pParentElement.id === "cmd-box") {
38-
this.menuButton = Utils.createDiv("menu-dropdown", Character.A_BOOK);
38+
this.menuButton = Utils.createDiv("", Character.A_BOOK);
3939
} else if (pParentElement.classList && pParentElement.classList.contains("minion-output")) {
40-
this.menuButton = Utils.createSpan("menu-dropdown", Character.CH_HAMBURGER);
40+
this.menuButton = Utils.createSpan("", Character.CH_HAMBURGER);
4141
} else {
4242
// assume it will be a command menu
43-
this.menuButton = Utils.createDiv("menu-dropdown", Character.CH_HAMBURGER);
43+
this.menuButton = Utils.createDiv("", Character.CH_HAMBURGER);
4444
}
45+
this.menuButton.classList.add("small-button");
46+
this.menuButton.classList.add("small-button-for-hover");
47+
this.menuButton.classList.add("menu-dropdown");
4548
this.menuButton.addEventListener("click", (pClickEvent) => {
4649
// better support for touch screens where user touch
4750
// the menu button instead of hovering over it

‎saltgui/static/scripts/panels/Panel.js‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,17 @@ export class Panel {
5050
const span = document.createElement("span");
5151
span.id = this.key + "-menu";
5252
const menu = new DropDownMenu(span);
53+
menu.menuButton.classList.add("small-button-left");
5354
this.div.appendChild(span);
5455
this.panelMenu = menu;
5556
}
5657

5758
addSearchButton () {
5859
const span = document.createElement("span");
5960
span.id = this.key + "-search-button";
61+
span.classList.add("small-button");
62+
span.classList.add("small-button-left");
63+
span.classList.add("small-button-for-click");
6064
span.classList.add("search-button");
6165
span.innerText = Character.LEFT_POINTING_MAGNIFYING_GLASS_MONO;
6266
this.div.appendChild(span);
@@ -66,17 +70,21 @@ export class Panel {
6670
addPlayPauseButton (pInitialStatus) {
6771
const playButton = document.createElement("span");
6872
playButton.innerText = Character.CH_PLAY_MONO;
73+
playButton.classList.add("small-button");
74+
playButton.classList.add("small-button-left");
75+
playButton.classList.add("small-button-for-click");
6976
playButton.style.cursor = "pointer";
70-
playButton.style.fontSize = "x-large";
7177
playButton.style.display = pInitialStatus === "play" ? "none" : "";
7278
this.div.appendChild(playButton);
7379
this.playButton = playButton;
7480

7581
const pauseButton = document.createElement("span");
7682
pauseButton.innerText = Character.CH_PAUSE_MONO;
83+
pauseButton.classList.add("small-button");
84+
pauseButton.classList.add("small-button-left");
85+
pauseButton.classList.add("small-button-for-click");
7786
pauseButton.style.display = "none";
7887
pauseButton.style.cursor = "pointer";
79-
pauseButton.style.fontSize = "x-large";
8088
pauseButton.style.display = pInitialStatus === "play" ? "" : "none";
8189
this.div.appendChild(pauseButton);
8290
this.pauseButton = pauseButton;
@@ -100,9 +108,10 @@ export class Panel {
100108
addHelpButton (pHelpTextArr) {
101109
const span = document.createElement("span");
102110
span.id = this.key + "-help-button";
103-
span.classList.add("nearly-visible-button");
111+
span.classList.add("small-button");
112+
span.classList.add("small-button-right");
113+
span.classList.add("small-button-for-hover");
104114
span.innerText = Character.BLACK_QUESTION_MARK_ORNAMENT_MONO;
105-
span.style.cssFloat = "right";
106115
span.style.cursor = "help";
107116
this.div.appendChild(span);
108117

@@ -112,9 +121,10 @@ export class Panel {
112121
addCloseButton () {
113122
const span = document.createElement("span");
114123
span.id = this.key + "-close-button";
115-
span.classList.add("nearly-visible-button");
124+
span.classList.add("small-button");
125+
span.classList.add("small-button-right");
126+
span.classList.add("small-button-for-click");
116127
span.innerText = Character.HEAVY_MULTIPLICATION_X_MONO;
117-
span.style.cssFloat = "right";
118128
this.div.appendChild(span);
119129

120130
span.addEventListener("click", () => {

‎saltgui/static/stylesheets/dropdown.css‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
/* The container <div> - needed to position the menu-dropdown content */
22
.menu-dropdown {
3-
padding: 0 20px 0 20px;
4-
cursor: pointer;
3+
cursor: deafult;
54
}
65

76
div.search-box .menu-dropdown {
8-
padding: 0 10px 0 10px;
7+
margin: 0 10px 0 0;
8+
}
9+
10+
/*
11+
div.panel > .menu-dropdown {
12+
xmargin: 0 0 0 0;
913
}
14+
*/
1015

1116
/* Dropdown Content (Hidden by Default) */
1217
.run-command-button .menu-dropdown-content {
@@ -39,7 +44,6 @@ div.search-box .menu-dropdown {
3944
/* Change color of menu-dropdown links on hover */
4045
.run-command-button .menu-dropdown-content div:hover {
4146
background: rgba(0, 0, 0, 0.15);
42-
color: #4caf50;
4347
cursor: pointer;
4448
}
4549

@@ -48,13 +52,7 @@ div.search-box .menu-dropdown {
4852
display: block;
4953
}
5054

51-
.run-command-button:hover .menu-dropdown {
52-
background: rgba(0, 0, 0, 0.15);
53-
color: #4caf50;
54-
}
55-
5655
pre.output span.menu-dropdown {
57-
color: white;
5856
font-weight: normal;
5957
}
6058

‎saltgui/static/stylesheets/events.css‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,6 @@ td.event-data {
22
white-space: pre-wrap;
33
}
44

5-
#events-play-button:hover,
6-
#events-pause-button:hover {
7-
color: #4caf50;
8-
}
9-
105
#page-events {
116
width: 100%;
127
}

‎saltgui/static/stylesheets/main.css‎

Lines changed: 45 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ h1 {
4040
color: #4caf50;
4141
font-weight: lighter;
4242
font-size: 20px;
43-
margin: 0;
43+
margin: 0 10px 0 0;
4444
display: inline-block;
4545
}
4646

@@ -85,18 +85,55 @@ h1 {
8585
cursor: pointer;
8686
}
8787

88-
.search-button {
89-
font-weight: bold;
90-
font-size: 18px;
91-
color: #888;
88+
.small-button {
89+
display: inline-block;
90+
min-width: 50px;
91+
text-align: center;
92+
background-color: #eee;
93+
margin: 0 0 0 0;
9294
cursor: pointer;
93-
margin-left: 8px;
95+
font-size: 18px;
96+
color: #666;
97+
height: 24px;
98+
vertical-align: middle;
99+
padding-left: 10px;
100+
padding-right: 10px;
94101
}
95102

96-
.search-button:hover {
103+
.small-button-left {
104+
margin-right: 10px;
105+
}
106+
107+
.small-button-right {
108+
margin-left: 10px;
109+
float: right;
110+
}
111+
112+
.small-button:hover {
97113
color: #4caf50;
98114
}
99115

116+
.small-button-for-hover {
117+
cursor: default;
118+
}
119+
120+
.small-button-for-click {
121+
cursor: pointer;
122+
}
123+
124+
.search-box .small-button,
125+
tr .small-button {
126+
padding-left: 5px;
127+
padding-right: 5px;
128+
min-width: 0;
129+
}
130+
131+
.search-box .small-button {
132+
padding-left: 5px;
133+
padding-right: 5px;
134+
min-width: 0;
135+
}
136+
100137
.search-box {
101138
display: block;
102139
width: 100%;
@@ -115,20 +152,6 @@ h1 {
115152
margin-left: 10px;
116153
}
117154

118-
.nearly-visible-button {
119-
display: block;
120-
float: right;
121-
opacity: 0.3;
122-
font-size: 18px;
123-
font-weight: lighter;
124-
}
125-
126-
.nearly-visible-button:hover {
127-
color: #4caf50;
128-
opacity: 1;
129-
cursor: pointer;
130-
}
131-
132155
.menu-item {
133156
display: inline-block;
134157
font-size: 18px;
@@ -198,8 +221,7 @@ h1 {
198221
.popup h1 {
199222
font-weight: normal;
200223
font-size: 30px;
201-
margin: 0;
202-
margin-bottom: 20px;
224+
margin: 0 10px 20px 0;
203225
}
204226

205227
.run-command {
@@ -241,7 +263,6 @@ pre.output {
241263
display: block;
242264
float: right;
243265
font-size: 18px;
244-
font-weight: lighter;
245266
}
246267

247268
.warning-button:hover {

0 commit comments

Comments
 (0)