Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

New manager layout #636

Draft
wants to merge 67 commits into
base: master
Choose a base branch
from
Draft

New manager layout #636

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
67 commits
Select commit Hold shift + click to select a range
4475a8a
new manage layout
Mottie Nov 25, 2018
ed07cb8
Make entries draggable
Mottie Nov 25, 2018
5c38441
Delay loading of non-essential css/js
Mottie Nov 26, 2018
fbcc7aa
Add bulk action panel
Mottie Nov 27, 2018
f57af79
Fix filter, search & add bulk ui html
Mottie Nov 27, 2018
a1b7847
Move style header & remove template
Mottie Nov 28, 2018
17e1860
Wire up bulk action toggle
Mottie Nov 28, 2018
cf695c7
Cleanup UI
Mottie Nov 29, 2018
7cd8403
Update labels on style toggle
Mottie Nov 29, 2018
0e7ff1c
Add busy icon
Mottie Nov 29, 2018
52f012d
Fix action icon wrapping
Mottie Dec 1, 2018
9368c27
Cleanup updateDate code
Mottie Dec 1, 2018
d379e5f
Add multisort to header & labels
Mottie Dec 2, 2018
9a31452
Modify localization to allow including parameters in HTML
Mottie Dec 3, 2018
57c5589
Change header ID
Mottie Dec 3, 2018
e3be7bf
Fix bulk actions markup
Mottie Dec 3, 2018
de7b0f4
WIP: sort injection order
Mottie Dec 3, 2018
cf4d4a2
Use semverCompare on version column
Mottie Dec 3, 2018
529172d
Fix tabbing to actions
Mottie Dec 3, 2018
bc404e8
Fix enabled update when toggled from popup
Mottie Dec 4, 2018
331be7a
Add css tooltips
Mottie Dec 8, 2018
d2930e5
Add back update history button
Mottie Dec 8, 2018
8f87494
Add filter toolbar indicator
Mottie Dec 8, 2018
596d6a9
Ditch tabs & add header icons
Mottie Dec 14, 2018
42a7578
Fix style header localization
Mottie Dec 15, 2018
218b6b4
Add applies to config modal
Mottie Dec 17, 2018
198315c
Change default sort
Mottie Dec 31, 2018
30a69f5
Fix bulk import
Mottie Dec 19, 2018
a7026bd
Wire up some bulk actions
Mottie Dec 31, 2018
44889f6
Fix bulk export
Mottie Jan 1, 2019
ead5e74
Fix import dropdown
Mottie Jan 1, 2019
a0ba63b
Remove bulk reset
Mottie Jan 1, 2019
4030496
Fix bulk updates
Mottie Jan 2, 2019
b5387de
Fix label updates
Mottie Jan 2, 2019
9fd4e0f
Fix styling for width < 1100px
Mottie Jan 2, 2019
e547d93
Only open bulk action with filter checkbox
Mottie Jan 3, 2019
c966cfe
Change active dragging color
Mottie Jan 3, 2019
e873ffd
Move home & support buttons to the right
Mottie Jan 3, 2019
bc3f2e0
Add more css variables
Mottie Jan 3, 2019
0d87689
Make entire style name clickable
Mottie Jan 3, 2019
9b408aa
Fix checked icon size
Mottie Jan 3, 2019
e9510c0
Only allow manual sort with ID column sort
Mottie Jan 3, 2019
30a780a
Show a default of 6 applies to favicons
Mottie Jan 3, 2019
7abc4f7
Add export & update all buttons to header
Mottie Jan 13, 2019
ae6bace
Reduce favicon size
Mottie Jan 13, 2019
ebeaba3
Make entry name full height
Mottie Jan 13, 2019
6759341
Fix hover highlight
Mottie Jan 13, 2019
3042054
Fix entry height variable
Mottie Jan 13, 2019
99f8bbb
Brighten checked checkbox color
Mottie Jan 13, 2019
5cc9e68
Increase tooltip contrast
Mottie Jan 13, 2019
1bc84bb
Fix header backup dropdown position
Mottie Jan 13, 2019
bd117b8
Build & save injection order values
Mottie Jan 17, 2019
67682fa
Fix favicon size
Mottie Jan 19, 2019
44df296
Change favicon option to show by default
Mottie Jan 19, 2019
f9ccd3e
Increase spacing between header icons
Mottie Jan 21, 2019
7d7e7e9
Stop using detail summary as applies to expander
Mottie Jan 28, 2019
71baf44
Remove injection order code (for now)
Mottie Jan 28, 2019
0dfd668
Fix a few style issues
Mottie Jan 28, 2019
6c747fa
Change new style into a dropdown
Mottie Mar 10, 2019
cd309aa
Prevent JS error in Chrome while emulating mobile devices
Mottie Mar 11, 2019
84163ba
Change layout in lower resolutions
Mottie Mar 11, 2019
89644d0
Replace home icon with external link icon
Mottie Mar 11, 2019
48b1877
Tweaks
Mottie Mar 11, 2020
9224c7a
Cleanup manage styles
Mottie Mar 12, 2020
67e886b
Fix msgbox js error
Mottie Mar 12, 2020
2fd08cb
Restore options popup
Mottie Mar 12, 2020
5047ceb
Switch to filter text/buttons
Mottie Mar 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Cleanup manage styles
  • Loading branch information
@Mottie
Mottie committed Mar 12, 2020
commit 9224c7ab6c3ccd1093a6185ccee9a0737e9fcfda
36 changes: 16 additions & 20 deletions manage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,28 +30,24 @@

<template data-id="style">
<div class="entry hide-extra">
<div class="entry-col entry-filter">
<label class="entry-col entry-filter checkmate" tabindex="0">
<span class="col-label" i18n-text="genericFilterLabel"></span>
<label class="checkmate" tabindex="0">
<input class="entry-filter-toggle" type="checkbox">
<svg class="svg-icon checkbox"viewBox="0 0 10 10">
<path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
<path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
<path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
</svg>
</label>
</div>
<div class="entry-col entry-state">
<input class="entry-filter-toggle" type="checkbox">
<svg class="svg-icon checkbox"viewBox="0 0 10 10">
<path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
<path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
<path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
</svg>
</label>
<label class="entry-col entry-state checkmate" tabindex="0">
<span class="col-label" i18n-text="genericEnabledLabel"></span>
<label class="checkmate" tabindex="0">
<input class="entry-state-toggle" type="checkbox">
<svg class="svg-icon checkbox"viewBox="0 0 10 10">
<path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
<path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
<path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
</svg>
</label>
</div>
<input class="entry-state-toggle" type="checkbox">
<svg class="svg-icon checkbox"viewBox="0 0 10 10">
<path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
<path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
<path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
</svg>
</label>
<a href="#" class="entry-col entry-name">
<span class="col-label" i18n-text="genericName"></span>
<span class="entry-name-text"></span>
Expand Down
69 changes: 45 additions & 24 deletions manage/manage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,31 @@
--entry-height: 30px;
--onoffswitch-width: 60px;

--header-bg-color: #333;
--header-bg-color: #2c2c2c;
--header-text-color: #ddd;
--header-text-hover-color: hsla(180, 100%, 20%, 1);
--header-text-hover-color: #066;
--header-icon-color: #888;
--header-icon-hover-color: hsla(180, 99%, 58%, 1);
--header-icon-hover-color: #2afefe;

--tools-bg-color: #ccc;

--entry-header-bg-color: #ddd;
--entry-header-text-color: #111;

--checked-count-bg-color: hsla(180, 100%, 20%, 1);
--checked-bg-color: hsla(180, 100%, 24%, 1);
--checked-mark-color: #fff;
--entry-text-hover: #007a7a;
--entry-text-disabled: #3c3c3c;
--entry-icon-color: #666;
--entry-icon-hover-color: hsla(180, 100%, 24%, 1);
--entry-icon-hover-color: #007a7a;
--entry-border-color: #ddd;
--delete-icon-hover-color: #d40000;

--label-usercss-bg-color: #066;
--label-usercss-text-color: #fff;

--checked-count-bg-color: #066;
--checked-count-text-color: #fff;

--checkbox-bg-color: #007a7a;
--checkbox-icon-color: #fff;
}

html {
Expand All @@ -42,14 +50,16 @@ body {
height: 100%;
}

/*
body.dark {
background: #181818;
color: #ddd;
}
*/

a,
.disabled a:hover {
color: #3c3c3c;
color: var(--entry-text-disabled);
transition: color .5s;
}

Expand All @@ -58,7 +68,7 @@ a {
}

a:hover {
color: #000;
color: var(--entry-text-hover);
}

.invisible {
Expand Down Expand Up @@ -225,7 +235,7 @@ body.all-styles-hidden-by-filters #installed:after {
.entry {
margin: 0;
padding: 4px 8px;
border-top: 1px solid #ddd;
border-top: 1px solid var(--entry-border-color);
}

.entry-col {
Expand Down Expand Up @@ -260,6 +270,10 @@ body.all-styles-hidden-by-filters #installed:after {
white-space: pre;
}

.header-state {
min-width: 65px;
}

.header-version,
.entry-version {
max-width: var(--narrow-column);
Expand Down Expand Up @@ -328,7 +342,7 @@ body.all-styles-hidden-by-filters #installed:after {

.header-filter span:before {
content: '►';
color: #666;
color: var(--entry-icon-color);
position: relative;
left: 7px;
}
Expand All @@ -337,13 +351,13 @@ body.all-styles-hidden-by-filters #installed:after {
.header-filter:hover .svg-icon,
.header-filter.active svg {
transition: all .5s;
color: #000;
fill: #000;
color: var(--entry-text-hover);
fill: var(--entry-text-hover);
}

.header-filter.active span:before {
content: '▲';
color: #000;
color: var(--entry-text-hover);
}

.targets {
Expand Down Expand Up @@ -400,12 +414,10 @@ body.all-styles-hidden-by-filters #installed:after {
pointer-events: none;
}

.entry.enabled .entry-name:hover .style-name {
color: hsla(180, 100%, 15%, 1);
}

.entry.enabled:hover .entry-name,
.entry:hover .svg-icon:hover {
fill: #000;
color: var(--entry-text-hover);
fill: var(--entry-text-hover);
}

.header-labels {
Expand All @@ -422,10 +434,14 @@ body.all-styles-hidden-by-filters #installed:after {
text-transform: lowercase;
}

.entry-label {
margin-left: 1em;
}

.header-label[data-type="usercss"],
.entry-label[data-type="usercss"] {
background-color: hsla(180, 100%, 20%, 1);
color: white;
background-color: var(--label-usercss-bg-color);
color: var(--label-usercss-text-color);
text-transform: lowercase;
}

Expand Down Expand Up @@ -458,7 +474,7 @@ a svg, .svg-icon.sort {

/* Checkbox */
.checkmate input:checked + svg.checkbox .filled-circle {
fill: var(--checked-bg-color);
fill: var(--checkbox-bg-color);
display: block;
}

Expand All @@ -471,7 +487,7 @@ a svg, .svg-icon.sort {
}

.checkmate input:checked + svg.checkbox .checkmark {
fill: var(--checked-mark-color);
fill: var(--checkbox-icon-color);
}

.checking-update .check-update {
Expand Down Expand Up @@ -854,6 +870,11 @@ a svg, .svg-icon.sort {
top: 100%;
}

/* make the popup on hover a little easier to use */
.new-style {
padding-left: 20px;
}

/* sort font */
@font-face {
font-family: 'sorticon';
Expand Down