autoRefreshList: add status indicator
In order to clarify when the feature is watching for updates in the
current thread list or not depending in the current sort options, this
change adds an indicator which states this.
It also adds styles for a "muted" state of the indicator which might
indicate in the future that the user has disabled it manually.
Apart from this, this also changes the option text to improve it.
Fixed: twpowertools:5
Change-Id: I77a65fa9091d6c9e18f09a3798eeb5197ced8647
diff --git a/src/static/css/autorefresh_list.css b/src/static/css/autorefresh_list.css
index 56d3fda..a12540b 100644
--- a/src/static/css/autorefresh_list.css
+++ b/src/static/css/autorefresh_list.css
@@ -1,3 +1,4 @@
+/* Snackbar */
.TWPT-pane-for-snackbar {
height: 48px;
position: fixed;
@@ -77,3 +78,52 @@
.TWPT-snackbar.TWPT-hidden {
display: none;
}
+
+/* Status indicator */
+.TWPT-autorefresh-status-indicator-container {
+ position: relative;
+ padding: 0 8px;
+ height: 46px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ cursor: help;
+}
+
+.TWPT-autorefresh-status-indicator {
+ width: 24px;
+ height: 24px;
+ border-style: solid;
+ border-width: 3px;
+ border-radius: 50%;
+ font-family: 'Google Material Icons';
+ text-align: center;
+ font-size: 17px;
+ line-height: 24px;
+ user-select: none;
+}
+
+.TWPT-autorefresh-status-indicator--active {
+ color: #202124;
+ background: #e3f2fd;
+ border-color: #2389e3;
+}
+
+.TWPT-autorefresh-status-indicator--muted {
+ color: #5f6368;
+ background: #f1f3f4;
+ border-color: #757575;
+}
+
+.TWPT-autorefresh-status-indicator--disabled {
+ color: #c5221f;
+ background: #fce8e6;
+ border-color: #c5221f;
+}
+
+.TWPT-autorefresh-status-indicator-container .TWPT-badge {
+ --icon-size: 13px;
+ position: absolute;
+ bottom: 2px;
+ right: 1px;
+}