From 2c5f129969d82d8c389567101f8295b6257c6dc9 Mon Sep 17 00:00:00 2001
From: Xavier-Do <xdo@odoo.com>
Date: Mon, 22 Apr 2024 22:00:35 +0200
Subject: [PATCH] [IMP] runbot: add dark theme

---
 runbot/controllers/frontend.py   |  1 +
 runbot/static/src/css/runbot.css | 85 +++++++++++++++++++++-----------
 runbot/templates/build_error.xml |  2 +-
 runbot/templates/frontend.xml    |  7 +--
 runbot/templates/utils.xml       | 11 ++++-
 5 files changed, 70 insertions(+), 36 deletions(-)

diff --git a/runbot/controllers/frontend.py b/runbot/controllers/frontend.py
index 27bf105e..af69b46e 100644
--- a/runbot/controllers/frontend.py
+++ b/runbot/controllers/frontend.py
@@ -48,6 +48,7 @@ def route(routes, **kw):
 
                 project = response.qcontext.get('project') or projects and projects[0]
 
+                response.qcontext['theme'] = kwargs.get('theme', request.httprequest.cookies.get('theme', 'legacy'))
                 response.qcontext['projects'] = projects
                 response.qcontext['more'] = more
                 response.qcontext['keep_search'] = keep_search
diff --git a/runbot/static/src/css/runbot.css b/runbot/static/src/css/runbot.css
index fbe2703c..313750b0 100644
--- a/runbot/static/src/css/runbot.css
+++ b/runbot/static/src/css/runbot.css
@@ -1,32 +1,26 @@
-
 :root {
+	--gray:  #6c757d; /* used for batch limitation */
+}
+
+/*
+ * Legacy theme
+ */
+
+:root[data-bs-theme=legacy] { /* to match initial runbot style*/
 	--bs-success-bg-subtle: #dff0d8;
 	--bs-danger-bg-subtle: #f2dede;
 	--bs-warning-bg-subtle: #fff9e6;
 	--bs-info-bg-subtle: #d9edf7;
 	--bs-info-rgb: 23, 162, 184;
-	--gray:  #6c757d; /* used for batch limitation */
+}
+
+[data-bs-theme=legacy] .text-bg-info {
+	color: #fff !important; /* black by default, changes from previous version, color forced to fit with --bs-info-rgb*/
 }
 
 
-.btn-default {
-	--bs-btn-color: #444;
-	--bs-btn-bg: #fff;
-	--bs-btn-border-color: #ccc;
-	--bs-btn-hover-color: #444;
-	--bs-btn-hover-bg: #ccc;
-	--bs-btn-hover-border-color: #ccc;
-	--bs-btn-focus-shadow-rgb: 60, 153, 110;
-	--bs-btn-active-color: #444;;
-	--bs-btn-active-bg: #fff;
-	--bs-btn-active-border-color: #fff;
-	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-	--bs-btn-disabled-color: #444;;
-	--bs-btn-disabled-bg: #fff;
-	--bs-btn-disabled-border-color: #ccc;;
-}
 
-.btn-success {
+[data-bs-theme=legacy] .btn-success {
 	--bs-btn-color: #fff;
 	--bs-btn-bg: #198754;
 	--bs-btn-border-color: #198754;
@@ -44,6 +38,38 @@
   }
 
 
+:root {
+	--alternative:#ccc;
+	--btn-default-color: var(--bs-body-color);
+	--btn-default-border:#ccc;
+	--bs-default-rgb: var(--bs-body-color-rgb);
+	--active-project-color: #777;
+	
+}
+
+:root[data-bs-theme=dark] {
+	--btn-default-border:#333;
+	--btn-default-color: var(--bs-body-color);
+	--active-project-color: #CCC;
+}
+
+.btn-default {
+	--bs-btn-color: var(--btn-default-color);
+	--bs-btn-bg: var(--bs-body-bg);
+	--bs-btn-border-color: var(--btn-default-border);
+	--bs-btn-hover-color: var(--btn-default-color);
+	--bs-btn-hover-bg: var(--btn-default-border);
+	--bs-btn-hover-border-color: var(--btn-default-border);
+	--bs-btn-focus-shadow-rgb: 60, 153, 110;
+	--bs-btn-active-color: var(--btn-default-color);
+	--bs-btn-active-bg: var(--bs-body-bg);
+	--bs-btn-active-border-color: var(--bs-body-bg);
+	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--bs-btn-disabled-color: var(--btn-default-color);
+	--bs-btn-disabled-bg: var(--bs-body-bg);
+	--bs-btn-disabled-border-color: var(--btn-default-border);;
+}
+
 .btn-info {
     --bs-btn-color: #FFF;
     --bs-btn-bg: #17a2b8;
@@ -61,8 +87,9 @@
     --bs-btn-disabled-border-color: #17a2b8;
 }
 
-.text-bg-info {
-	color: #FFF !important; /* black by default, changes from previous version, color forced to fit with --bs-info-rgb*/
+.text-bg-default {
+	color: var(--bs-body-color) !important;
+	background-color: RGBA(var(--bs-body-bg-rgb), var(--bs-bg-opacity, 1)) !important;
 }
 
 .table-responsive {
@@ -73,6 +100,11 @@
 	--bs-table-bg: transparent; /* Forced to white in bootstrap latest version, hides the color of sub builds, batch commits, ...*/
 }
 
+.active_project {
+	color: var(--active-project-color);
+	margin-left: 15px;
+}
+
 body {
 	margin: 0;
     font-size: 0.875rem;
@@ -134,7 +166,6 @@ a.slots_infos:hover {
 
 body, .table {
 	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-	color: #444;
 }
 
 
@@ -226,7 +257,8 @@ body, .table {
 }
 
 .batch_header:hover {
-	background-color: rgba(0, 0, 0, 0.1)
+	color: var(--bs-body-color);
+	background-color: rgba(0, 0, 0, 0.3)
 }
 
 .header_hover {
@@ -243,17 +275,10 @@ body, .table {
 	padding: 6px;
 }
 
-.batch_commits {
-	background-color: white;
-}
-
 .batch_commits {
 	padding: 2px;
 }
 
-.match_type_new {
-	background-color: var(--info-light);
-}
 
 .batch_row .slot_container {
 	flex: 1 0 200px;
diff --git a/runbot/templates/build_error.xml b/runbot/templates/build_error.xml
index a4bdf964..d68cdb5b 100644
--- a/runbot/templates/build_error.xml
+++ b/runbot/templates/build_error.xml
@@ -109,7 +109,7 @@
 
     <template id="runbot.team">
       <t t-call='runbot.layout'>
-        <div class="container-fluid bg-light">
+        <div class="container-fluid">
           <div class="row">
             <div t-if="team" class='col-md-12'>
               <div class="col-lg-12 text-center mb16">
diff --git a/runbot/templates/frontend.xml b/runbot/templates/frontend.xml
index 549c6500..806c70bc 100644
--- a/runbot/templates/frontend.xml
+++ b/runbot/templates/frontend.xml
@@ -90,7 +90,7 @@
         <div t-attf-class="card bg-{{klass}}-subtle">
           <a t-attf-href="/runbot/batch/#{batch.id}" title="View Batch">
             <div class="batch_header">
-              <span t-attf-class="badge text-bg-{{'warning' if batch.has_warning else 'light'}}">
+              <span t-attf-class="badge text-bg-{{'warning' if batch.has_warning else 'default'}}">
                 <t t-esc="batch._get_formated_age()"/>
                 <i class="fa fa-exclamation-triangle" t-if="batch.has_warning"/>
               </span>
@@ -112,14 +112,15 @@
           <div t-if='more' class="batch_commits">
             <div t-foreach="batch.commit_link_ids.sorted(lambda cl: (cl.commit_id.repo_id.sequence, cl.commit_id.repo_id.id))" t-as="commit_link" class="one_line">
 
-              <a t-attf-href="/runbot/commit/#{commit_link.commit_id.id}" t-attf-class="badge text-bg-light batch_commit match_type_{{commit_link.match_type}}">
+              <t t-set="match_class" t-value="'info' if commit_link.match_type == 'new' else 'secondary'"/>
+              <a t-attf-href="/runbot/commit/#{commit_link.commit_id.id}" t-attf-class="badge text-bg-{{match_class}}">
                 <i class="fa fa-fw fa-hashtag" t-if="commit_link.match_type == 'new'" title="This commit is a new head"/>
                 <i class="fa fa-fw fa-link" t-if="commit_link.match_type == 'head'" title="This commit is an existing head from bundle branches"/>
                 <i class="fa fa-fw fa-code-fork" t-if="commit_link.match_type == 'base_match'" title="This commit is matched from a base batch with matching merge_base"/>
                 <i class="fa fa-fw fa-clock-o" t-if="commit_link.match_type == 'base_head'" title="This commit is the head of a base branch"/>
                 <t t-esc="commit_link.commit_id.dname"/>
               </a>
-              <a t-att-href="'https://%s/commit/%s' % (commit_link.branch_id.remote_id.base_url, commit_link.commit_id.name)" class="badge text-bg-light" title="View Commit on Github"><i class="fa fa-github"/></a>
+              <a t-att-href="'https://%s/commit/%s' % (commit_link.branch_id.remote_id.base_url, commit_link.commit_id.name)" t-attf-class="badge text-bg-{{match_class}}" title="View Commit on Github"><i class="fa fa-github"/></a>
               <span t-esc="commit_link.commit_id.subject"/>
             </div>
           </div>
diff --git a/runbot/templates/utils.xml b/runbot/templates/utils.xml
index 474e83f8..31e5aedd 100644
--- a/runbot/templates/utils.xml
+++ b/runbot/templates/utils.xml
@@ -3,7 +3,7 @@
     <data>
         <!-- base layout -->
         <template id="runbot.base_page">
-            <html data-bs-theme="light">
+            <html t-att-data-bs-theme="theme">
                 <head>
                     <title t-esc="title or 'Runbot'"/>
                     <link rel="stylesheet" type="text/css" href="/runbot/static/src/libs/bootstrap/css/bootstrap.css"/>
@@ -34,7 +34,7 @@
                     <header>
                         <nav class="navbar navbar-expand-md bg-body-tertiary">
                             <a t-if="project" t-att-href="qu(search=search)">
-                                <b style="color:#777;">
+                                <b class="active_project">
                                     <t t-esc="project.name"/>
                                 </b>
                             </a>
@@ -58,9 +58,16 @@
                                             <i class="fa fa-gear"/>
                                         </a>
                                         <div class="dropdown-menu" role="menu">
+
                                             <form class="px-4 py-3" method="post" action="/runbot/submit">
+                                                <div class="text-nowrap btn-group btn-group-sm" role="group">
+                                                    <button onclick="document.cookie = 'theme=legacy; expires=Thu, 1 Dec 2942 12:00:00 UTC; path=/'; location.reload();" type="button" class="btn btn-primary">Legacy</button>
+                                                    <button onclick="document.cookie = 'theme=dark; expires=Thu, 1 Dec 2942 12:00:00 UTC; path=/'; location.reload();" type="button" class="btn btn-dark">Dark</button>
+                                                    <button onclick="document.cookie = 'theme=light; expires=Thu, 1 Dec 2942 12:00:00 UTC; path=/'; location.reload();" type="button" class="btn btn-light">Ligh</button>
+                                                </div>
                                                 <input type="hidden" name="save" value="1"/>
                                                 <input type="hidden" name="redirect" t-att-value="current_path"/>
+                                                
                                                 <div class="text-nowrap">
                                                     <input type="checkbox" name="more" id="more" t-att-checked="more"/>
                                                     <label for="more">More info</label>