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

New color scheme #11

Merged
merged 3 commits into from
Aug 3, 2023
Merged

New color scheme #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
721f9e2
Change to new color scheme
mklomp Jul 6, 2023
f605ca6
Modified colors to new Mirte color style
mklomp Jul 7, 2023
605d5fc
Fixed review comments
mklomp Aug 3, 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
6 changes: 3 additions & 3 deletions vue-frontend/src/assets/scss/blockly.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
.blocklyToolboxDiv {
background-color: $primary;
color: white;
background-color: $light-grey;
color: $black;
}

.blocklyFlyoutBackground {
fill: #458873;
fill: $light-grey;
fill-opacity: 0.6;
}
21 changes: 15 additions & 6 deletions vue-frontend/src/assets/scss/colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@
$primary: #668284;
$green-bright: #23a880;
$green-light: #eff2f2;
$grey-blue: #9db7be;
$light-blue: #cee6ed;
$yellow: #f1be45;
$light-grey: #ebebeb;
$dark-grey: #a6a6a6;
$black: #000000;
$white: #fefaf7;
$red: #9b372a;

$colors: (
"primary": $primary,
"green-bright": $green-bright,
"green-light": $green-light,
"primary": $grey-blue,
"secondary": $dark-grey,
"tertiary": $light-grey,
"sensor": $grey-blue,
"actuator": $yellow,
"flow": $light-blue,
"data": $red
);


Expand Down
60 changes: 46 additions & 14 deletions vue-frontend/src/assets/scss/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ body{
}

body{
background-color: $primary !important;
background-color: $grey-blue !important;

}

Expand All @@ -28,7 +28,7 @@ body{


.content{
background-color: white;
background-color: $white;
height: 20vh;
}

Expand All @@ -39,7 +39,7 @@ body{

.tutorial_window{
position: fixed;
background-color: $green-bright;
background-color: $grey-blue;
z-index: 999;
padding: 15px;
cursor: grab;
Expand All @@ -49,16 +49,16 @@ body{
}

button{
background-color: $primary;
border: 1px solid white;
background-color: $grey-blue;
border: 1px solid $white;
margin: 0 5px 5px 0;
}

button:hover{
background-color: white;
border: 1px solid white;
background-color: $white;
border: 1px solid $white;
margin: 0 5px 5px 0;
color: $primary;
color: $grey-blue;
}
}

Expand All @@ -73,18 +73,18 @@ body{

.nav-spacer{
height: 100%;
border: 1px solid white;
border: 1px solid $white;
margin: 0 .2em;
border-radius: 5px;
}

.nav-item a{
color: white !important;
color: $white !important;
}

.nav-link.active{
background-color: white !important;
color: $primary !important;
background-color: $white !important;
color: $black !important;
}

.vh-100 {
Expand All @@ -96,7 +96,7 @@ body{
}

nav .btn:hover{
color: $primary;
color: $grey-blue;
}

body .rounded{
Expand All @@ -118,7 +118,7 @@ $percentages: (

.layoutbox{

border: 4px solid $primary;
border: 4px solid $dark-grey;

.layoutbox-content{
padding: 1em;
Expand All @@ -129,3 +129,35 @@ $percentages: (
margin: 0 auto;
display: block;
}

$custom-range-thumb-bg: $dark-grey;

$custom-control-indicator-checked-bg: $grey-blue;

.code-inactive{
color: $white !important;
}

.code-active{
background-color: $white !important;
color: $black !important;
}

.btn-mirte{
background-color: $yellow !important;
}

.btn-mirte-control {
color: $black;
font-weight: bold;
border: 1px solid $black;
}

.btn-mirte-control:hover,
.btn-mirte-control:active,
.btn-mirte-control:focus,
.btn-mirte-control.active {
background: $yellow;
color: $white !important;
border: 1px solid $black;
}
6 changes: 3 additions & 3 deletions vue-frontend/src/assets/scss/xterm.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@

.xterm{
background-color: black;
background-color: $white;
width: 100%;
height: 30vh;
color: white;
color: $white;
}

.xterm {
Expand Down Expand Up @@ -64,7 +64,7 @@

.xterm .xterm-viewport {
/* On OS X this is required in order for the scroll bar to appear fully opaque */
background-color: #000;
background-color: $white;
overflow-y: scroll;
cursor: default;
position: absolute;
Expand Down
22 changes: 11 additions & 11 deletions vue-frontend/src/components/Actuators.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

<div v-if="programming">

<div class="rounded background-green-light h5 p-3 mb-2">
<div class="rounded background-tertiary h5 p-3 mb-2">
{{ $t('actuators.output') }}
<div class="float-right">

Expand Down Expand Up @@ -37,13 +37,13 @@
</div>


<div class="rounded background-green-light p-3 mb-2">
<div class="rounded background-tertiary p-3 mb-2">
<h5>{{ $t('actuators.control') }}</h5>

<div class="row mb-4">

<div class="col-1 offset-6">
<button class="btn btn-outline-dark mr-2"
<button class="btn btn-mirte-control mr-2 background-actuator"
v-b-tooltip.hover
:title="$t('actuators.move_forward')"
@click="control('forward')"
Expand All @@ -55,7 +55,7 @@

<div class="row mb-4">
<div class="col-1 offset-4">
<button class="btn btn-outline-dark mr-2"
<button class="btn btn-mirte-control mr-2 background-actuator"
v-b-tooltip.hover
:title="$t('actuators.move_left')"
@click="control('left')"
Expand All @@ -65,7 +65,7 @@
</div>

<div class="col-2 offset-1">
<button class="btn btn-outline-dark mr-2"
<button class="btn btn-mirte-control mr-2 background-actuator"
v-b-tooltip.hover
:title="$t('actuators.move_stop')"
@click="control('stop')"
Expand All @@ -75,7 +75,7 @@
</div>

<div class="col-1 mb-2">
<button class="btn btn-outline-dark mr-2"
<button class="btn btn-mirte-control mr-2 background-actuator"
v-b-tooltip.hover
:title="$t('actuators.move_right')"
@click="control('right')"
Expand All @@ -91,7 +91,7 @@
<div class="row mb-4">

<div class="col-1 offset-6">
<button class="btn btn-outline-dark mr-2"
<button class="btn btn-mirte-control mr-2 background-actuator"
v-b-tooltip.hover
:title="$t('actuators.move_backward')"
@click="control('backward')"
Expand All @@ -102,7 +102,7 @@
</div>


<div class="rounded background-primary p-2 text-white mb-2">
<div class="rounded background-actuator p-2 text-white mb-2">
<div class="row">
<div class="col-4">
{{ $t('actuators.speed') }}: {{ linear_speed }}
Expand All @@ -113,7 +113,7 @@
</div>
</div>

<div class="rounded background-primary p-2 text-white mb-2">
<div class="rounded background-actuator p-2 text-white mb-2">
<div class="row">
<div class="col-4">
{{ $t('actuators.angular_speed') }}: {{ angular_speed }}
Expand All @@ -129,9 +129,9 @@



<div v-for="actuator in getActuators()" class="rounded background-green-light p-3 mb-2">
<div v-for="actuator in getActuators()" class="rounded background-tertiary p-3 mb-2">
<h5>{{ $t('peripherals.' + peripherals[actuator].text) }}</h5>
<div v-for="instance in getInstancesOfActuator(actuator)" class="rounded background-primary p-2 text-white mb-2">
<div v-for="instance in getInstancesOfActuator(actuator)" class="rounded background-actuator p-2 text-white mb-2">
<div v-if="actuator === 'servo'">
<div>
{{instance}}: {{ actuator_values[actuator][instance] }}
Expand Down
13 changes: 7 additions & 6 deletions vue-frontend/src/components/Blockly.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,6 +251,7 @@ const predefined_blocks = {
variables_set: "%{BKY_DATA_RGB}",
variables_get: "%{BKY_DATA_RGB}",
math_change: "%{BKY_DATA_RGB}",
text: "%{BKY_DATA_RGB}",
logic_compare: "%{BKY_DATA_RGB}",
logic_operation: "%{BKY_DATA_RGB}",
logic_negate: "%{BKY_DATA_RGB}",
Expand Down Expand Up @@ -425,12 +426,12 @@ export default {

// Blockly configuration
Blockly.setLocale(locales[this.$i18n.locale])
// Palette generated by: https://coolors.co/5a7574-cfd186-e3655b-52414c-5b8c5a-57467b
Blockly.Msg.FLOW_RGB = "#e3655b"
Blockly.Msg.DATA_RGB = "#52414c"
Blockly.Msg.MODULES_RGB = "#cfd186"
Blockly.Msg.SENSORS_RGB = "#5b8c5a"
Blockly.Msg.ACTIONS_RGB = "#57467b"
// TODO: use colors from scss
Blockly.Msg.FLOW_RGB = "#cee6ed"
Blockly.Msg.DATA_RGB = "#9b372a"
Blockly.Msg.MODULES_RGB = "#cf0000"
Blockly.Msg.SENSORS_RGB = "#9db7be"
Blockly.Msg.ACTIONS_RGB = "#f1be45"

// workspace initialization
const blocklyArea = this.$refs.blocklyArea
Expand Down
4 changes: 2 additions & 2 deletions vue-frontend/src/components/Network.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@


<div class="layoutbox rounded">
<div class="text-white p-2 h3 layoutbox-title w-100 background-primary">
<div class="text-white p-2 h3 layoutbox-title w-100 background-secondary">
{{ $t('settings.wifi_header') }}
</div>

Expand Down Expand Up @@ -41,7 +41,7 @@
</div>
<div class="form-group">
<div class="col">
<button @click="connect" type="button" class="btn btn-success">{{ $t('settings.wifi_connect') }}</button>
<button @click="connect" type="button" class="btn btn-mirte">{{ $t('settings.wifi_connect') }}</button>
</div>
</div>
</form>
Expand Down
4 changes: 2 additions & 2 deletions vue-frontend/src/components/Sensors.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>

<div class="layoutbox-content">
<div v-for="sensor in getSensorTypes()" class="rounded background-green-light p-3 mb-2">
<div v-for="sensor in getSensorTypes()" class="rounded background-tertiary p-3 mb-2">
<h5>{{ $t('peripherals.' + peripherals[sensor].text) }}</h5>
<div class="row">

Expand All @@ -11,7 +11,7 @@

<div class="col-8">

<div v-for="instance in getInstancesOfSensor(sensor)" class="rounded background-primary p-2 text-white mb-2">
<div v-for="instance in getInstancesOfSensor(sensor)" class="rounded background-sensor p-2 text-white mb-2">
{{instance}}: {{ sensor_values[sensor][instance] }}
</div>
</div>
Expand Down
12 changes: 8 additions & 4 deletions vue-frontend/src/components/Xterm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,11 +101,13 @@ let strace_cmd = 'strace -ff -e write=1,2 -s 1024 -p ' + debugger_pid + ' 2>&1 |
this.shell_socket.send("stty echo && PS1='\\[\\e]0;\\u@\\h: \\w\\a\\]${debian_chroot:+($debian_chroot)}\\[\\033[01;32m\\]\\u@\\h\\[\\033[00m\\]:\\[\\033[01;34m\\]\\w\\[\\033[00m\\]\\$ ' && clear\n");
this.term.setOption('disableStdin', false);
} else {
this.term.setOption('theme', { background: '#e2e8e9', foreground: '#e2e8e9', cursor: '#e2e8e9' });
// TODO: use colors from scss
this.term.setOption('theme', { background: '#fefaf7', foreground: '#fefaf7', cursor: '#fefaf7' });
this.shell_socket.send("stty -echo && PS1='' && clear\n");
this.shell_socket.send("clear\n");
this.term.setOption('disableStdin', true);
this.term.setOption('theme', { background: '#e2e8e9', foreground: '#000000', cursor: '#e2e8e9' });
// TODO: use colors from scss
this.term.setOption('theme', { background: '#fefaf7', foreground: '#000000', cursor: '#fefaf7' });
}
},
toggleTerminal() {
Expand All @@ -120,7 +122,8 @@ let strace_cmd = 'strace -ff -e write=1,2 -s 1024 -p ' + debugger_pid + ' 2>&1 |
this.waitForSocketConnection();

// The terminal
this.term = new Terminal({theme: { background: '#e2e8e9', foreground: '#e2e8e9', cursor: '#e2e8e9' }});
// TODO: use colors from scss
this.term = new Terminal({theme: { background: '#fefaf7', foreground: '#fefaf7', cursor: '#fefaf7' }});
const fitAddon = new FitAddon();
this.term.loadAddon(new AttachAddon(this.shell_socket));
this.term.loadAddon(fitAddon);
Expand Down Expand Up @@ -156,7 +159,8 @@ let strace_cmd = 'strace -ff -e write=1,2 -s 1024 -p ' + debugger_pid + ' 2>&1 |

switch(payload){
case "play":
this.term.setOption('theme', { background: '#e2e8e9', foreground: '#000000', cursor: '#e2e8e9' });
// TODO: use colors from scss
this.term.setOption('theme', { background: '#fefaf7', foreground: '#000000', cursor: '#fefaf7' });
this.playCode()
break;
case "stop":
Expand Down
4 changes: 2 additions & 2 deletions vue-frontend/src/views/Control.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<div class="col-3 p-2 h-100 offset-3" style="overflow: hidden;">
<div class="layoutbox rounded h-100" style="overflow: hidden; display: flex; flex-flow: column;">

<div class="text-white p-2 h3 m-0 layoutbox-title w-100 background-primary">
<div class="text-black p-2 h3 m-0 layoutbox-title w-100 background-secondary">
{{ $t('main.sensors') }}
</div>

Expand All @@ -21,7 +21,7 @@
<div class="col-3 p-2 h-100" style="overflow: hidden;">
<div class="layoutbox rounded h-100" style="overflow: hidden; display: flex; flex-flow: column;">

<div class="text-white p-2 h3 m-0 layoutbox-title w-100 background-primary">
<div class="text-black p-2 h3 m-0 layoutbox-title w-100 background-secondary">
{{ $t('main.actuators') }}
</div>

Expand Down
Loading