taskmonitor: dark theme complete

shashfrankenstien · Aug 3, 2024 · b077bfe · b077bfe
1 parent 70bdf3e
commit b077bfe
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 49 deletions.
diff --git a/flask_production/plugins/task_monitor.py b/flask_production/plugins/task_monitor.py
@@ -256,8 +256,7 @@ def __show_all(self):
 				container,
 				SCRIPT(js_auto_reload_variables),
 				self.__js_src_wrap('taskmonitor.js')
-			],
-			css='all-jobs-body'
+			]
 		)
 
 	def __show_one(self, n):
@@ -269,13 +268,21 @@ def __show_one(self, n):
 		state = self.__state(jobd)
 		job_funcname = jobd['func'].replace('<', '&lt;').replace('>', '&gt;')
 
-		enable_disable_btn = '''<button class="btn enable-disable-btn" onclick="enable_disable('{name}', {jobid}, {job_disable})" {btn_disabled}>{btn_name}</button>'''.format(
+		enable_disable_btn = '''<button class="btn enable-disable-btn"
+									onclick="enable_disable('{name}', {jobid}, {job_disable})"
+									{btn_disabled}>
+								{btn_name}
+								</button>'''.format(
 			name=job_funcname, jobid=n,
 			job_disable="true" if not jobd['is_disabled'] else "false",
 			btn_disabled="disabled" if state['state']=="RUNNING" else "",
 			btn_name="Disable" if not jobd['is_disabled'] else "Enable",
 		)
-		rerun_btn = '''<button class="btn rerun-btn" onclick="rerun_trigger('{name}', {jobid})" {btn_disabled}>Rerun</button>'''.format(
+		rerun_btn = '''<button class="btn rerun-btn"
+							onclick="rerun_trigger('{name}', {jobid})"
+							{btn_disabled}>
+						Rerun
+						</button>'''.format(
 			name=job_funcname, jobid=n, # rerun_trigger params
 			btn_disabled="disabled" if state['state']=="RUNNING" or jobd['is_disabled'] else ""
 		)
@@ -285,9 +292,9 @@ def __show_one(self, n):
 			TR([ titleTD("Start Time"), TD(self.__date_fmt(jobd['logs']['start'])) ]),
 			TR([ titleTD("End Time"), TD(self.__date_fmt(jobd['logs']['end'])) ]),
 			TR([ titleTD("Time Taken"), TD(self.__duration(jobd)) ]),
-			TR([ titleTD("Next Run In"), "<td id='next-run-in'>-<td>" ]),
-			TR([ TD(enable_disable_btn, colspan=2, attrs={'style':'text-align:center'}) ]) if self._can_disable else '',
-			TR([ TD(rerun_btn, colspan=2, attrs={'style':'text-align:center'}) ]) if self._can_rerun else ''
+			TR([ titleTD("Next Run In"), TD("-", attrs={'id':'next-run-in'}) ]),
+			TR([ TD(enable_disable_btn, colspan=2, css=['monitor-btn']) ]) if self._can_disable else '',
+			TR([ TD(rerun_btn, colspan=2, css=['monitor-btn']) ]) if self._can_rerun else ''
 		]
 
 		info_table = TABLE(tbody=TBODY(rows), css='info_table')

diff --git a/flask_production/plugins/web/css/ctrl_panel.css b/flask_production/plugins/web/css/ctrl_panel.css
@@ -5,7 +5,7 @@ body {
     display:flex;
     flex-direction:column;
     align-items:center;
-    background-color: var(--theme-table-bg);
+    background-color: var(--theme-bg);
     color: var(--theme-text-bright);
 }
 .header-bar {
@@ -67,5 +67,5 @@ body {
     width:25px;
     height:25px;
     border-radius: 50%;
-    background-color: var(--theme-table-bg);
+    background-color: var(--theme-bg);
 }
diff --git a/flask_production/plugins/web/css/dark_theme.css b/flask_production/plugins/web/css/dark_theme.css
@@ -1,15 +1,15 @@
 html {
+    --theme-bg: rgb(43, 43, 43);
     --theme-table: #3d3d3d;
     --theme-text: rgb(194, 194, 194);
     --theme-text-bright: rgb(230, 230, 230);
     --theme-table-hover: #4b4b4b;
     --theme-table-shadow: #222222;
-    --theme-table-bg: rgb(43, 43, 43);
     --theme-table-button: #555555;
 
     --theme-logs-bg: #333333;
+    --theme-logs-brdr: grey;
     --thumb-bg: grey;
-    --theme-monitor-info-bg: white;
 }
 
 .grey,

diff --git a/flask_production/plugins/web/css/taskmonitor.css b/flask_production/plugins/web/css/taskmonitor.css
@@ -7,6 +7,8 @@ body {
     align-items:center;
     font-family: sans-serif;
     font-size: 12px;
+    background-color: var(--theme-bg);
+    color: var(--theme-text-bright);
 }
 *::-webkit-scrollbar {
     width: 14px !important;
@@ -41,9 +43,42 @@ td, th {
     padding: 5px;
 }
 
-.all-jobs-body,
-.all-jobs-body input {
-    background-color: var(--theme-table-bg);
+button {
+    border: none;
+    background-color: var(--theme-table-button);
+    color: var(--theme-text);
+    box-shadow: 2px 2px 3px var(--theme-table-shadow);
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+}
+
+button:active{
+    box-shadow: none;
+}
+
+button:disabled,
+button[disabled]{
+    box-shadow: none;
+    opacity: 0.4;
+}
+
+pre, code {
+    background-color:transparent !important;
+    overflow:visible !important;
+}
+input[type=text] {
+    width: 250px;
+    padding: 6px 15px;
+    margin: 8px 0;
+    border: 1px solid var(--theme-text);
+    border-radius: 3px;
+    outline: none;
+}
+
+
+input {
+    background-color: var(--theme-bg);
     color: var(--theme-text-bright);
 }
 
@@ -52,26 +87,21 @@ td, th {
     border-collapse: separate;
     border-radius: 5px;
     overflow: hidden;
-}
-
-
-.all-jobs,
-.all-jobs button {
     box-shadow: 2px 2px 3px var(--theme-table-shadow);
 }
 
 .all-jobs,
 .all-jobs th {
     background-color: var(--theme-table);
-    border-color: var(--theme-table-bg);
+    border-color: var(--theme-bg);
     color: var(--theme-text);
 }
 .all-jobs th {
     color: var(--theme-text-bright);
 }
 
 .all-jobs td {
-    border: 1px solid var(--theme-table-bg);
+    border: 1px solid var(--theme-bg);
 }
 
 .all-jobs th[role=columnheader]:not(.no-sort) { /*tablesort.css*/
@@ -102,19 +132,11 @@ td, th {
 }
 
 
-.all-jobs tr.row-hidden { display:none; }
-
-.all-jobs button {
-  border: none;
-  background-color: var(--theme-table-button);
-  color: var(--theme-text);
+.all-jobs tr.row-hidden {
+    display:none;
 }
 
-a > button {
-    width:100%;
-    height:100%;
-    cursor:pointer;
-}
+
 .container {
     width:100%;
     height:100%;
@@ -140,13 +162,20 @@ a > button {
     display:flex;
     flex-flow: column;
     align-items:center;
-    background-color:var(--theme-monitor-info-bg);
+    background-color:var(--theme-table);
 }
 .monitor > div {
     flex: 1 1 auto;
     width:100%;
     overflow-wrap: break-word;
 }
+
+.monitor-btn {
+    height: 100%;
+    padding-left: 35%;
+    padding-right: 35%;
+}
+
 .info_table {
     border:none;
     margin-bottom:30px;
@@ -185,11 +214,11 @@ a > button {
 }
 .log_table td, .log_table th {
     border: none;
-    border-left: 1px solid grey;
+    border-left: 1px solid var(--theme-logs-brdr);
     vertical-align: top;
     overflow: hidden;
     background-color:var(--theme-logs-bg);
-    color: white;
+    color: var(--theme-text);
 }
 .console-div {
     width:100%;
@@ -201,19 +230,8 @@ a > button {
 }
 .console-color {
     background-color:var(--theme-logs-bg);
-    color:white;
-}
-.brdr {border: 1px solid grey;}
-
-pre, code {
-    background-color:transparent !important;
-    overflow:visible !important;
+    color: var(--theme-text);
 }
-input[type=text] {
-    width: 250px;
-    padding: 6px 15px;
-    margin: 8px 0;
-    border: 1px solid var(--theme-text);
-    border-radius: 3px;
-    outline: none;
+.brdr {
+    border: 1px solid var(--theme-logs-brdr);
 }