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

Add dark mode #104

Merged
merged 4 commits into from
Nov 1, 2023
Merged

Add dark mode #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
53a2fbf
Add dark mode
ShadedSelf Oct 30, 2023
06efe55
Fix danger rgb color
ShadedSelf Oct 30, 2023
e54cde5
Merge branch 'master' into dark
ShadedSelf Oct 31, 2023
25153fd
Fix modebar active/hover icon highlighting
ShadedSelf Nov 1, 2023
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
7 changes: 4 additions & 3 deletions CaSSAndRA/app.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@ def start(host, port, proxy, data_path, debug, app_log_level, app_log_file_level
import dash
from src.layout import serve_layout
from src.backend.data.utils import init_data
import dash_bootstrap_components as dbc

# initialize data files
file_paths = init_data(data_path)
Expand All @@ -132,10 +133,10 @@ def start(host, port, proxy, data_path, debug, app_log_level, app_log_file_level
__name__,
use_pages=True, # turn on Dash pages
pages_folder='src/pages',
# external_stylesheets=[
# dbc.themes.MINTY,
external_stylesheets=[
# dbc.themes.MINTY,
# dbc.icons.BOOTSTRAP
# ], # fetch the proper css items we want
], # fetch the proper css items we want
meta_tags=[
{ # check if device is a mobile device. This is a must if you do any mobile styling
'name': 'viewport',
Expand Down
43 changes: 31 additions & 12 deletions CaSSAndRA/src/assets/bootstrap.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion CaSSAndRA/src/assets/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,4 +58,4 @@ function handlezoom(e)
});
document.getElementsByClassName("nsewdrag drag")[0].dispatchEvent(newEv);
}
}
}
238 changes: 209 additions & 29 deletions CaSSAndRA/src/assets/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,8 +210,8 @@ html {

.stateCardBody
{
padding-top: 0.6rem;
padding-bottom: 0.6rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}

/************************* End of Card Group Customizations ********************/
Expand Down Expand Up @@ -260,9 +260,6 @@ html {
}
/************************* End of Map Controls Size Adjustment ******************/

/* Boolean Switch Fix */
.daq-booleanswitch--light__background { box-sizing: content-box; }

#_pages_content {
padding-bottom: env(safe-area-inset-bottom);
}
Expand Down Expand Up @@ -388,50 +385,233 @@ html {
/* Chart rows */
.chart-row
{
margin-right: 0;
margin-left: 0;
margin-right: 0;
margin-left: 0;
}

.chart-item
{
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
border-radius: 0.75rem;
margin-top: 1rem;
padding-bottom: 0.5rem;
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
border-radius: 0.75rem;
margin-top: 1rem;
padding-bottom: 0.5rem;
background-color: rgba(255, 255, 255, 0.035);
}

.chart-label
{
text-align: center;
margin-bottom: 0;
margin-top: 0;
width:100%;
font-size: 0.85rem;
text-align: center;
margin-bottom: 0;
margin-top: 0;
width:100%;
font-size: 0.85rem;
}

.chart-slider
{
padding-bottom: 0.1rem !important;
padding-bottom: 0.1rem !important;
}

.chart-item-separator
{
position: relative;
position: relative;
}
.chart-item-separator::before
{
content: "";
display: block;
position: absolute;
top: calc(0.25rem + 15%);
right: 0rem;
z-index: 2;
width: 100%;
height: 70%;
border-right: 1px solid #0000001e;
content: "";
display: block;
position: absolute;
top: calc(0.25rem + 15%);
right: 0rem;
z-index: 2;
width: 100%;
height: 70%;
border-right: 1px solid #0000001e;
}

.DayPickerKeyboardShortcuts_show
{
display: none;
}
display: none;
}

/* Dark */
.main-svg
{
background: transparent !important;
}

.form-switch
{
height: 100%;
padding: 0;
}
.form-switch > .form-check-input
{
height: 1.5rem;
max-height: 100%;
width: unset;
aspect-ratio: 2 / 1;
margin: 0;
cursor: pointer;
position: relative;
top: 50%;
transform: translateY(-50%);
}

.Select-control
{
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
border: var(--bs-border-width) solid var(--bs-border-color);
}
.Select.is-disabled > .Select-control
{
background-color: #83838369;
cursor: not-allowed;
}
.Select-menu-outer {
background-color: var(--bs-body-bg);
border: var(--bs-border-width) solid var(--bs-border-color);
color: var(--bs-body-color);
}
.Select.is-focused > .Select-control
{
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
}
.Select-value-label
{
color: var(--bs-body-color) !important;
}

.x2tick > text,
.y2tick > text,
.xtick > text,
.ytick > text
{
fill: var(--bs-body-color) !important;
}

.modebar-group
{
background-color: transparent !important;
}
.modebar-btn .icon path
{
fill: var(--bs-body-color) !important;
opacity: 0.3;
}
.modebar-btn.active .icon path
{
fill: var(--bs-body-color) !important;
opacity: 0.8;
}
.modebar-btn:not(.active):hover .icon path
{
fill: var(--bs-body-color) !important;
opacity: 0.5;
}

.annotation-text-g > .cursor-pointer > text
{
fill: var(--bs-body-color) !important;
}

.rc-slider-rail
{
background-color: rgba(129, 129, 129, 0.349);
}
.rc-slider-disabled
{
background-color: rgba(189, 189, 189, 0.233);
}

[data-bs-theme=dark]
{
--bs-body-bg:#272727;
--bs-body-bg-rgb:39,39,39;

--bs-body-color: rgb(212, 212, 212);
--bs-body-color-rgb:212,212,212;

--bs-primary:rgb(94, 160, 141);
--bs-primary-rgb:94,160,141;

--bs-success: rgb(72, 171, 132);
--bs-success-rgb: 72, 171, 132;

--bs-light: rgb(50, 50, 50);
--bs-light-rgb: 50, 50, 50;

--bs-danger: rgb(209, 96, 61);
--bs-danger-rgb: 209, 96, 61;

--bs-warning: rgb(212, 168, 73);
--bs-warning-rgb: 212, 168, 73;

--bs-info: rgb(96, 176, 192);
--bs-info-rgb: 96, 176, 192;
}

.btn
{
--bs-btn-disabled-opacity: 0.5
}
.btn-primary
{
--bs-btn-bg: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary);
}
.btn-danger {
--bs-btn-color: #fff;
--bs-btn-bg: var(--bs-danger);
--bs-btn-border-color: var(--bs-danger);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #a34d32;
--bs-btn-hover-border-color: #a34d32;
--bs-btn-focus-shadow-rgb: 255,140,107;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #cc6041;
--bs-btn-active-border-color: #bf5a3d;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: var(--bs-danger);
--bs-btn-disabled-border-color: var(--bs-danger);
}
.btn-success {
--bs-btn-color: #fff;
--bs-btn-bg: var(--bs-success);
--bs-btn-border-color: var(--bs-success);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #3d9773;
--bs-btn-hover-border-color: #3d9773;
--bs-btn-focus-shadow-rgb: 111,212,172;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #45a37e;
--bs-btn-active-border-color: #419976;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: var(--bs-success);
--bs-btn-disabled-border-color: var(--bs-success);
}
.btn-info {
--bs-btn-color: #fff;
--bs-btn-bg: var(--bs-info);
--bs-btn-border-color: var(--bs-info);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #5194a1;
--bs-btn-hover-border-color: #5194a1;
--bs-btn-focus-shadow-rgb: 130,204,219;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #569caa;
--bs-btn-active-border-color: #5192a0;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: var(--bs-info);
--bs-btn-disabled-border-color: var(--bs-info);
}

.form-check-input:checked {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
}
3 changes: 3 additions & 0 deletions CaSSAndRA/src/backend/data/cfgdata.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ class AppCfg:
rover_pictures: RoverIMG = RoverIMG()
obstacles_amount: int = 0
file_path: str = ''
light_mode: bool = True

def read_appcfg(self) -> None:
try:
Expand All @@ -150,6 +151,7 @@ def read_appcfg(self) -> None:
self.rover_picture = appcfg_from_file['rover_picture']
self.rover_pictures.load_rover_pictures(os.path.dirname(__file__).replace('/backend/data', '/assets/icons/'+self.rover_picture))
self.obstacles_amount = appcfg_from_file['obstacles_amount']
self.light_mode = appcfg_from_file['light_mode']
except Exception as e:
logger.error('Could not read appcfg.json. Data are invalid. Go with standard values')
logger.debug(str(e))
Expand All @@ -165,6 +167,7 @@ def save_appcfg(self) -> int:
new_data['current_thd_charge'] = self.current_thd_charge
new_data['rover_picture'] = self.rover_picture
new_data['obstacles_amount'] = self.obstacles_amount
new_data['light_mode'] = self.light_mode
with open(file_paths.user.appcfg, 'w') as f:
logger.debug('New appcfg data: '+str(new_data))
json.dump(new_data, f, indent=4)
Expand Down
1 change: 1 addition & 0 deletions CaSSAndRA/src/components/ids.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,7 @@
PATTERNSETTINGS = 'pattern-settings'
MAXAGESETTINGS = 'maxage-settings'
MAXAMOUNTOBSTACLESSETTINGS = 'max-amount-obstacles-settings'
LIGHTMODESETTINGS = 'ligt-mode-settings'
TIMETOOFFLINESETTINGS = 'timetooffline-settins'
VOLTAGEMINSETTINGS = 'voltagemin-settings'
VOLTAGEMAXSETTINGS = 'voltagemax-settings'
Expand Down
2 changes: 1 addition & 1 deletion CaSSAndRA/src/components/mapping/chooseperimeter.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
dbc.Card([
dbc.CardHeader('Select map'),
dbc.CardBody([
dcc.Dropdown(id=ids.DROPDOWNCHOOSEPERIMETER, className='m-1'),
dcc.Dropdown(id=ids.DROPDOWNCHOOSEPERIMETER, className='m-1', searchable=False),
dbc.Container([
buttons.selectperimeter,
buttons.addnewperimeter,
Expand Down
9 changes: 5 additions & 4 deletions CaSSAndRA/src/components/mapping/map.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,12 @@
yaxis=dict(
scaleratio=1,
scaleanchor='x',
gridcolor = '#eeeeee',
zerolinecolor = 'lightgrey'),
gridcolor = 'rgba(200, 200, 200, 0.25)',
zerolinecolor = 'rgba(200, 200, 200, 0.4)'
),
xaxis=dict(
gridcolor = '#eeeeee',
zerolinecolor = 'lightgrey'
gridcolor = 'rgba(200, 200, 200, 0.25)',
zerolinecolor = 'rgba(200, 200, 200, 0.4)'
),
margin=dict(
b=0, #bottom margin 40px
Expand Down
2 changes: 1 addition & 1 deletion CaSSAndRA/src/components/mapping/uploadsunray.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
dbc.Card([
dbc.CardHeader('Import map'),
dbc.CardBody([
dcc.Dropdown(id=ids.DROPDOWNSUNRAYIMPORT, className='m-1'),
dcc.Dropdown(id=ids.DROPDOWNSUNRAYIMPORT, className='m-1', searchable=False),
dbc.Row([
dbc.Col(dcc.Upload(buttons.uploadsunrayfile, id=ids.UPLOADSUNRAYFILE)),
dbc.Col(buttons.saveimportedperimeter)
Expand Down
Loading
Loading