Skip to content

Commit

Permalink
feat<tel> add features styles with css and not js
Browse files Browse the repository at this point in the history 
The previous impelemtation had each features styles added via js. These were lots of styles to add in each feature. I opted for another solution which is with css, which is what css is used for. It will make it easier to make the styles in js for the index page later. For now, the styles are working fine and I will polish some touches in it
  • Loading branch information
@Ahelsamahy
Ahelsamahy committed Sep 2, 2024
1 parent 780b8f9 commit 4bc729b
Show file tree
Hide file tree
Showing 20 changed files with 735 additions and 765 deletions.
Binary file modified teleop/htm/static/.DS_Store
View file
Binary file not shown.
1 change: 1 addition & 0 deletions teleop/htm/static/CSS/menu_settings.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ fieldset input[type=text] {
#pro-view-toggle-div {
position: relative;
width: fit-content;
padding-top: 3vh;
}

#pro-view-toggle-div span {
Expand Down
38 changes: 23 additions & 15 deletions teleop/htm/static/CSS/mobileController.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,25 +20,26 @@
border-bottom: 1px solid var(--VOR-color);
}

#mobile_controller_container #horizontal_bar .left_section,
#mobile_controller_container #horizontal_bar .middle_section,
#mobile_controller_container #horizontal_bar .right_section {
#mobile_controller_container .left_section,
#mobile_controller_container .middle_section,
#mobile_controller_container .right_section {
display: flex;
align-items: center;
flex: 1;

}

#mobile_controller_container #horizontal_bar .left_section {
#mobile_controller_container .left_section {
justify-content: flex-start;
flex: 2;
padding-left: 13px;
}

#mobile_controller_container #horizontal_bar .middle_section {
#mobile_controller_container .middle_section {
justify-content: center;
flex: 0;
}

#mobile_controller_container #horizontal_bar .right_section {
#mobile_controller_container .right_section {
flex-direction: row;
align-content: flex-end;
flex: 2;
Expand All @@ -47,17 +48,22 @@

#horizontal_bar .current_mode_text {
text-transform: uppercase;
display: block;
}

#horizontal_bar .current_mode_text:before {
content: "manual drive"
}

.current_mode_button {
outline: none;
box-shadow: 4px 6px 8px #d0d0d0;
display: none;
width: 100%;
width: 50%;
transition: background-color 0.3s, transform 0.2s;
cursor: pointer;
border: 2px solid;
border-radius: 20px;
border-radius: 8px;
font-weight: bold;
color: #451c58;
text-transform: uppercase;
Expand Down Expand Up @@ -85,20 +91,22 @@
border-radius: 1rem;
}

#backward_square.maneuver_square {
width: 100%;
background: repeating-linear-gradient(-45deg, #ffffff, #ffffff 16px, #ccc 18px, #ccc 11px);
border: 0;
}

#forward_square .square_text {
bottom: 2vh;
}

#forward_square .square_text:before {
content: "forward"
}

#backward_square .square_text {
top: 2vh;
}

#backward_square .square_text:before {
content:"backward"
}

.square_text {
pointer-events: none;
display: block;
Expand Down
277 changes: 270 additions & 7 deletions teleop/htm/static/CSS/theme_mode.css
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,285 @@
body.dark-mode {
/* Advanced mode */
body.advanced-theme .advanced_view {
display: none !important;
}


/* #region Dark mode */
body.dark-theme {
background-color: var(--background_color_dark_mode);
color: var(--text_color_dark_mode);
}

body.dark-mode .caret {
body.dark-theme .caret {
color: var(--text_color_dark_mode);
}

body.dark-mode #hamburger_menu_toggle .bar {
body.dark-theme #hamburger_menu_toggle .bar {
background-color: var(--background_color_light_mode);
}

body.dark-mode #video_stream_type {
body.dark-theme #video_stream_type {
background-color: var(--background_color_light_mode);
color: var(--text_color_light_mode);
}

/* #endregion */

/* #region AI training feature */
body.maneuver-training-feature .steeringWheel {
display: none;
}

body.maneuver-training-feature #horizontal_bar .current_mode_text:before {
content: "ai training"
}

body.maneuver-training-feature #mobile_controller_container #backward_square .trail_canvas,
body.maneuver-training-feature #mobile_controller_container #backward_square .square_text {
display: none;
}

body.maneuver-training-feature #mobile_controller_container #forward_square .square_text:before {
content: 'forward';
}

body.maneuver-training-feature #mobile_controller_container #backward_square {
display: block;
width: 100%;
background: repeating-linear-gradient(-45deg, var(--background_color_light_mode), var(--background_color_light_mode) 16px, #ccc 18px, #ccc 11px);
border: 0;
}

body.maneuver-training-feature #mobile_controller_container .control_symbol {
display: none;
}

body.maneuver-training-feature .current_mode_button {
display: block;
background-color: #451c58;
color: white;
box-shadow: none;
}

body.maneuver-training-feature .current_mode_button:before {
content: "start"
}

/* Training started state */
body.maneuver-training-feature.training-started .current_mode_button {
background-color: #f41e52;
border: none;
content: 'stop';
}

body.maneuver-training-feature.training-started .current_mode_button:before {
content: "stop";
}

/* #endregion */

/* #region Auto navigation feature */
body.auto-navigation-feature .steeringWheel {
display: none;
}

body.auto-navigation-feature #horizontal_bar .current_mode_text:before {
content: "auto navigation"
}

body.auto-navigation-feature .current_mode_button:before {
content: 'start';
}

body.auto-navigation-feature #forward_square .square_text:before {
content: "Increase max speed"
}

body.auto-navigation-feature #backward_square .square_text:before {
content: "decrease max speed"
}



body.auto-navigation-feature .current_mode_button {
display: block;
background-color: #451c58;
color: white;
box-shadow: none;
}

body.auto-navigation-feature .current_mode_text,
body.auto-navigation-feature #mobile_controller_container .trail_canvas {
display: none;
}

body.auto-navigation-feature .rover_speed,
body.auto-navigation-feature .control_symbol {
display: flex;
}


body.auto-navigation-feature.navigation-started .current_mode_button {
background-color: #f41e52;
border: none;
content: 'stop';
}

body.auto-navigation-feature.navigation-started .current_mode_button:before {
content: 'stop';
}

/* #endregion */

/* #region Confidence feature */
body.confidence-feature .current_mode_text {
display: block;
}

body.confidence-feature #horizontal_bar .current_mode_text:before {
content: "map recognize"
}

body.confidence-feature .steeringWheel {
display: none;
}

body.confidence-feature .current_mode_button {
display: block;
background-color: #451c58;
color: white;
box-shadow: none;
}

/* Recognize mode */
body.confidence-feature.recognize-mode .current_mode_button:before {
content: 'start';
}

body.confidence-feature.recognize-mode .control_symbol,
body.confidence-feature.recognize-mode .stop_text {
display: none;
}

/* Stop mode */
body.confidence-feature.stop-mode .current_mode_button {
background-color: #f41e52;
border: none;
}

body.confidence-feature.stop-mode .current_mode_button:before {
content: 'stop';
}

body.confidence-feature.stop-mode #mobile_controller_container .square {
display: block;
}

body.confidence-feature.stop-mode .stop_text,
body.confidence-feature.stop-mode .control_symbol {
display: none;
}

/* Return mode */
body.confidence-feature.return-mode .current_mode_button {
background-color: #ffffff;
color: #451c58;
}

body.confidence-feature.return-mode .current_mode_button:before {
content: 'return';
}

/* Show result mode */
body.confidence-feature.show-result-mode .current_mode_button {
display: block;
border: none;
content: 'Show result';
}

body.confidence-feature.show-result-mode .current_mode_button:before {
content: 'Show result';
}

/* Loading mode */
body.confidence-feature.loading-mode .current_mode_state {
display: block;
color: #ff8a00;
}

body.confidence-feature.loading-mode .current_mode_state:before {
content: 'Loading...';
}

body.confidence-feature.loading-mode .current_mode_button {
display: none;
}

/* #endregion */

/* #region Following feature */
body.following-feature .current_mode_button {
display: block;
}

body.following-feature#horizontal_bar .current_mode_text:before {
content: "follow"
}

body.following-feature #mobile_controller_container .middle_section,
body.following-feature #mobile_controller_container .square {
display: none;
}

/* Image mode */
body.following-feature.image-mode .current_mode_button {
background-color: #ffffff;
border: none;
}

body.following-feature.image-mode .current_mode_button::before {
content: 'start ';
}

body.following-feature.image-mode #mobile_controller_container .current_mode_state,
body.following-feature.image-mode #mobile_controller_container .square {
display: none;
}

/* Active mode */
body.following-feature.active-mode .current_mode_button {
background-color: #f41e52;
border: none;
}

body.following-feature.active-mode .current_mode_button::before {
content: 'stop ';
}

body.following-feature.active-mode #mobile_controller_container .current_mode_state,
body.following-feature.active-mode #mobile_controller_container .square {
display: none;
}

/* Inactive mode */
body.following-feature.inactive-mode .current_mode_button {
background-color: #ffffff;
border: none;
content: 'start';
}

body.following-feature.inactive-mode #mobile_controller_container .square {
display: block;
}

/* Loading mode */
body.following-feature.loading-mode #mobile_controller_container .current_mode_state:before {
content: 'Loading...';
}

body.following-feature.loading-mode .current_mode_button,
body.following-feature.loading-mode #mobile_controller_container .square {
display: none;
}

body.advanced-mode .advanced_view {
display: none !important ;
}
/* #endregion */
Loading

0 comments on commit 4bc729b

Please sign in to comment.