tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styled action table, fixed callback function not returning proper action index

Browse Source
This commit is contained in:
Tamius Han 2018-12-14 00:19:46 +01:00
parent c23445ba3f
commit 2e5e85d9d8
3 changed files with 99 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
js/lib/libghettoui/settings/ActionItem.js
View File

@ -11,24 +11,34 @@ class ActionItem extends BaseElement {
this.element.innerHTML = `
<td class="cmd monospace">${cmd}</td>
<td class="label">${action.label ? action.label : ""}</td>
<td class="shortcut">${action.parsedShortcut ? action.parsedShortcut : ""}</td>
<td class="checkbox">
<input type="checkbox" disabled ${
action.shortcut && action.shortcut.length && (action.shortcut[0].onMouseMove || action.shortcut[0].onClick || action.shortcut[0].onScroll) ?
"checked" : ""
}>
<td class="shortcut center-text">${action.parsedShortcut ? action.parsedShortcut : ""}</td>
<td class="center-text">
<div class="checkbox-container">
<span class="checkbox ${
action.shortcut && action.shortcut.length && (action.shortcut[0].onMouseMove || action.shortcut[0].onClick || action.shortcut[0].onScroll) ?
"checkbox-checked" : ""
}"></span>
</div>
</td>
<td class="checkbox">
<input type="checkbox" disabled ${action.popup_global ? "checked" : ""}>
<td class="center-text">
<div class="checkbox-container">
<span class="checkbox ${action.popup_global ? "checkbox-checked" : ""}"></span>
</div>
</td>
<td class="checkbox">
<input type="checkbox" disabled ${action.popup_site ? "checked" : ""}>
<td class="center-text">
<div class="checkbox-container">
<span class="checkbox ${action.popup_site ? "checkbox-checked" : ""}"></span>
</div>
</td>
<td class="center-text">
<div class="checkbox-container">
<span class="checkbox ${action.popup ? "checkbox-checked" : ""}"></span>
</div>
</td>
<td class="checkbox">
<input type="checkbox" disabled ${action.popup_ ? "checked" : ""}>
</td>
<td class="checkbox">
<input type="checkbox" disabled ${action.ui ? "checked" : ""}>
<td class="center-text">
<div class="checkbox-container">
<span class="checkbox ${action.ui ? "checkbox-checked" : ""}"></span>
</div>
</td>
<td>${action.ui_path ? action.ui_path : ""}</td>
`;

74
res/settings/css/settings.css
View File

@ -6,7 +6,7 @@ body {
background-size: 75px;
background-color: #000000;
color: #ddd;
font-family: 'overpass', serif;
font-family: 'Overpass', sans-serif;
font-size: 1.2em;
width: 100%;
border: 0px;
@ -163,6 +163,14 @@ input[type=text]{
height: 1.7em;
}
.monospace {
font-family: 'Overpass Mono', monospace
}
.center-text {
text-align: center;
}
/** site options css **/
.site_name {
padding-left: 1em;
@ -199,4 +207,66 @@ input[type=text]{
}
.inline_button:hover {
color: #fff;
}
}
.checkbox-center {
text-align: center;
}
.checkbox-container {
display: inline-block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
/* cursor: pointer; */
font-size: 22px;
/* -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; */
}
.checkbox {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
}
.checkbox-checked {
position: absolute;
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid rgb(245, 145, 63);
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
/* ACTION TABLE STYLES */
.action-item-category-label {
color: rgb(245, 145, 63);
font-size: 2em;
font-weight: 200;
margin-bottom: 0px;
padding-bottom: 0px;
padding-top: 1em;
}
.action-item-table-header {
color: rgb(245, 145, 63);
}
.action-item-table-header-small {
color: rgb(245, 145, 63);
font-size: 0.85em !important;
font-weight: 300 !important;
}
.action-list-item:hover {
background-color: rgba(254, 146, 63, 0.15);
}

4
res/settings/js/customization.js
View File

@ -60,11 +60,11 @@ function loadSectionHeader(title) {
}
function loadActionSection(actions, container) {
for(action of actions) {
for(const action of actions) {
if (action.shortcut && action.shortcut[0].key) {
action.parsedShortcut = KeyboardShortcutParser.parseShortcut(action.shortcut[0])
}
var actionIndex = settings.active.actions.indexOf(action);
const actionIndex = settings.active.actions.indexOf(action);
var newAction = new ActionItem(
undefined,
action,