[IMP] runbot: add dark theme

This commit is contained in:
Xavier-Do 2024-04-22 22:00:35 +02:00 committed by Christophe Monniez
parent 6bafea7c36
commit 2c5f129969
5 changed files with 70 additions and 36 deletions

View File

@ -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

View File

@ -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;

View File

@ -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">

View File

@ -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>

View File

@ -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>