From 6661fbf35229a9190c1506c1782a750fb9ae5ae8 Mon Sep 17 00:00:00 2001 From: jorg-vr Date: Wed, 21 Jun 2023 14:25:15 +0200 Subject: [PATCH] Fix buttons --- .../components/course_labels_search_bar.ts | 2 +- .../edit_saved_annotation.ts | 6 +- .../saved_annotations/new_saved_annotation.ts | 2 +- .../components/sign_in_search_bar.ts | 2 +- app/assets/javascripts/exercise.ts | 6 +- app/assets/javascripts/repository.ts | 4 +- .../bootstrap_variable_overrides.css.scss | 5 - .../stylesheets/components/btn.css.scss | 107 ++++++++---------- .../_announcement_table.html.erb | 2 +- app/views/announcements/edit.html.erb | 2 +- app/views/api_tokens/_table.html.erb | 2 +- app/views/auth/confirm_new_user.html.erb | 2 +- app/views/auth/privacy_prompt.html.erb | 4 +- .../_course_membership_buttons.html.erb | 2 +- app/views/courses/edit.html.erb | 2 +- app/views/judges/index.html.erb | 2 +- app/views/labels/_labels_table.html.erb | 2 +- .../_notifications_table.html.erb | 2 +- .../programming_languages/index.html.erb | 2 +- .../_repository_admin_buttons.html.erb | 2 +- .../_repository_course_buttons.html.erb | 2 +- app/views/repositories/index.html.erb | 2 +- .../rights_requests/_requests_table.html.erb | 4 +- app/views/score_items/_exercise.html.erb | 2 +- .../series/_course_series_table.html.erb | 2 +- app/views/series/index.html.erb | 2 +- 26 files changed, 80 insertions(+), 94 deletions(-) diff --git a/app/assets/javascripts/components/course_labels_search_bar.ts b/app/assets/javascripts/components/course_labels_search_bar.ts index 610a119513..ebaf694227 100644 --- a/app/assets/javascripts/components/course_labels_search_bar.ts +++ b/app/assets/javascripts/components/course_labels_search_bar.ts @@ -104,7 +104,7 @@ export class CourseLabelsSearchBar extends ShadowlessLitElement { @input=${e => this.handleInput(e)} placeholder="${I18n.t("js.course_labels_search_bar.placeholder")}" > - ${I18n.t("js.course_labels_search_bar.add")} + ${I18n.t("js.course_labels_search_bar.add")} ${I18n.t("js.course_labels_search_bar.edit_explanation")} diff --git a/app/assets/javascripts/components/saved_annotations/edit_saved_annotation.ts b/app/assets/javascripts/components/saved_annotations/edit_saved_annotation.ts index d194f28df5..dbaeecd367 100644 --- a/app/assets/javascripts/components/saved_annotations/edit_saved_annotation.ts +++ b/app/assets/javascripts/components/saved_annotations/edit_saved_annotation.ts @@ -59,13 +59,13 @@ export class EditSavedAnnotation extends modalMixin(ShadowlessLitElement) { > `, html` - - - `); diff --git a/app/assets/javascripts/components/saved_annotations/new_saved_annotation.ts b/app/assets/javascripts/components/saved_annotations/new_saved_annotation.ts index b9bff542d5..3a92bea909 100644 --- a/app/assets/javascripts/components/saved_annotations/new_saved_annotation.ts +++ b/app/assets/javascripts/components/saved_annotations/new_saved_annotation.ts @@ -78,7 +78,7 @@ export class NewSavedAnnotation extends modalMixin(ShadowlessLitElement) { @change=${e => this.savedAnnotation = e.detail} > `, html` - `); diff --git a/app/assets/javascripts/components/sign_in_search_bar.ts b/app/assets/javascripts/components/sign_in_search_bar.ts index f6cba67d64..86c29fb4c9 100644 --- a/app/assets/javascripts/components/sign_in_search_bar.ts +++ b/app/assets/javascripts/components/sign_in_search_bar.ts @@ -62,7 +62,7 @@ export class SignInSearchBar extends ShadowlessLitElement { @input=${e => this.handleInput(e)} placeholder="${I18n.t("js.sign_in_search_bar.institution_search")}" > - ${I18n.t("js.sign_in_search_bar.log_in")} diff --git a/app/assets/javascripts/exercise.ts b/app/assets/javascripts/exercise.ts index 97b5bb18f6..94661974e5 100644 --- a/app/assets/javascripts/exercise.ts +++ b/app/assets/javascripts/exercise.ts @@ -341,10 +341,10 @@ function initExerciseShow(exerciseId: number, programmingLanguage: string, logge const icon = fab.children[0]; icon.classList.remove("mdi-pencil"); if (status === "correct") { - fab.classList.add("correct"); + fab.classList.add("d-btn-success"); icon.classList.add(getPositiveEmoji()); } else { - fab.classList.add("wrong"); + fab.classList.add("d-btn-danger"); icon.classList.add("mdi-emoticon-sad-outline"); } setTimeout(resetFABStatus, 4000); @@ -353,7 +353,7 @@ function initExerciseShow(exerciseId: number, programmingLanguage: string, logge function resetFABStatus(): void { const fab = document.getElementById("submission-copy-btn"); const icon = fab.children[0]; - fab.classList.remove("correct", "wrong"); + fab.classList.remove("d-btn-success", "d-btn-danger"); icon.classList.remove(...icon.classList); icon.classList.add("mdi", "mdi-pencil"); } diff --git a/app/assets/javascripts/repository.ts b/app/assets/javascripts/repository.ts index 64cd7758c8..e10e85eb91 100644 --- a/app/assets/javascripts/repository.ts +++ b/app/assets/javascripts/repository.ts @@ -74,7 +74,7 @@ function initAdminsEdit(): void { deleteButton.innerHTML = ""; deleteButton.classList.add("remove-admin"); deleteButton.classList.add("btn-icon-filled"); - deleteButton.classList.add("bg-danger"); + deleteButton.classList.add("d-btn-danger"); deleteButton.addEventListener("click", onRemoveClick); document.querySelector("#admin-table-wrapper table tbody").append(newRow); addButton.classList.add("invisible"); @@ -158,7 +158,7 @@ function initCoursesEdit(): void { deleteButton.innerHTML = ""; deleteButton.classList.add("remove-course"); deleteButton.classList.add("btn-icon-filled"); - deleteButton.classList.add("bg-danger"); + deleteButton.classList.add("d-btn-danger"); deleteButton.addEventListener("click", onRemoveClick); document.querySelector("#allowed-courses-table-wrapper table tbody").append(newRow); addButton.classList.add("invisible"); diff --git a/app/assets/stylesheets/bootstrap_variable_overrides.css.scss b/app/assets/stylesheets/bootstrap_variable_overrides.css.scss index 7b6bff2858..16b9726745 100644 --- a/app/assets/stylesheets/bootstrap_variable_overrides.css.scss +++ b/app/assets/stylesheets/bootstrap_variable_overrides.css.scss @@ -21,11 +21,6 @@ // inputs $input-border-color: var(--d-outline); -// pagination -$pagination-bg: var(--d-surface); -$pagination-hover-bg: var(--d-surface); -$pagination-disabled-bg: var(--d-background); -// //$modal-content-bg: $surface; // //$form-check-input-checked-bg-color: $secondary; diff --git a/app/assets/stylesheets/components/btn.css.scss b/app/assets/stylesheets/components/btn.css.scss index 420d798a8c..023b37489d 100644 --- a/app/assets/stylesheets/components/btn.css.scss +++ b/app/assets/stylesheets/components/btn.css.scss @@ -43,11 +43,17 @@ opacity: 0.38; pointer-events: none; } + + // define the default button colors + // makes it easier to combine with other classes such as d-btn-danger, d-btn-success, etc. + --d-btn-color: var(--d-primary); + --d-btn-color-rgb: var(--d-primary-rgb); + --d-on-btn-color: var(--d-on-primary); } .btn.btn-filled { - background: var(--d-primary); - color: var(--d-on-primary); + background: var(--d-btn-color); + color: var(--d-on-btn-color); &:hover { @include shadow-z2; @@ -55,8 +61,11 @@ } .btn.btn-tonal { - background: var(--d-secondary-container); - color: var(--d-on-secondary-container); + --d-btn-color: var(--d-secondary-container); + --d-on-btn-color: var(--d-on-secondary-container); + + background: var(--d-btn-color); + color: var(--d-on-btn-color); &:hover { @include shadow-z1; @@ -74,13 +83,13 @@ .btn.btn-text, .btn.btn-outline { background: none; - color: var(--d-primary); + color: var(--d-btn-color); &:hover, &:focus, &:active { opacity: 1; - background: rgba(var(--d-primary-rgb), 0.1); + background: rgba(var(--d-btn-color-rgb), 0.1); } } @@ -116,7 +125,7 @@ &:hover, &:focus, &:active { - border-color: var(--d-primary); + border-color: var(--d-btn-color); } &:disabled { @@ -129,7 +138,7 @@ .btn.btn-icon { width: 40px; padding: 0; - color: var(--d-primary); + color: var(--d-btn-color); // enable pointer events to enable tooltips to be shown on disabled buttons &.disabled-with-tooltip { @@ -142,12 +151,12 @@ &:focus, &:active { opacity: 1; - background: rgba(var(--d-primary-rgb), 0.1); + background: rgba(var(--d-btn-color-rgb), 0.1); } } &.btn-icon-inverted { - color: var(--d-on-primary); + color: var(--d-on-btn-color); &:hover, &:focus, @@ -169,23 +178,25 @@ } &.btn-icon-filled { - color: var(--d-on-primary); + color: var(--d-on-btn-color); + background: var(--d-btn-color); &:hover, &:focus, &:active { - opacity: 1; - filter: brightness(0.95); + @include shadow-z2; } } } -.btn.btn-fab { - height: 56px; - width: 56px; - border-radius: 16px; - background: var(--d-secondary-container); - color: var(--d-on-secondary-container); +.btn.btn-fab, +.btn.btn-fab-small, +.btn.btn-fab-small-extended { + --d-btn-color: var(--d-secondary-container); + --d-on-btn-color: var(--d-on-secondary-container); + + background: var(--d-btn-color); + color: var(--d-on-btn-color); @include shadow-z2; @@ -199,56 +210,24 @@ @include shadow-z3; } +} - &.correct { - background-color: var(--d-success); - } - - &.wrong { - background-color: var(--d-danger); - } +.btn.btn-fab { + height: 56px; + width: 56px; + border-radius: 16px; } .btn.btn-fab-small { height: 40px; width: 40px; border-radius: 12px; - background: var(--d-secondary-container); - color: var(--d-on-secondary-container); padding: 6px; - - @include shadow-z2; - - &:hover, - &:focus, - &:active, - &:disabled, - &.disabled { - opacity: 1; - filter: brightness(0.95); - - @include shadow-z3; - } } .btn.btn-fab-small-extended { height: 40px; border-radius: 12px; - background: var(--d-secondary-container); - color: var(--d-on-secondary-container); - - @include shadow-z2; - - &:hover, - &:focus, - &:active, - &:disabled, - &.disabled { - opacity: 1; - filter: brightness(0.95); - - @include shadow-z3; - } } .btn-group { @@ -265,11 +244,11 @@ &:hover, &:focus, &:active { - background: rgba(var(--d-primary-rgb), 0.1); + background: rgba(var(--d-btn-color-rgb), 0.1); } &.active { - background: rgba(var(--d-primary-rgb), 0.2); + background: rgba(var(--d-btn-color-rgb), 0.2); } } } @@ -366,3 +345,15 @@ color: unset; transition: background-color 0s; } + +.btn.d-btn-danger { + --d-btn-color: var(--d-danger); + --d-btn-color-rgb: var(--d-danger-rgb); + --d-on-btn-color: var(--d-on-danger); +} + +.btn.d-btn-success { + --d-btn-color: var(--d-success); + --d-btn-color-rgb: var(--d-success-rgb); + --d-on-btn-color: var(--d-on-success); +} diff --git a/app/views/announcements/_announcement_table.html.erb b/app/views/announcements/_announcement_table.html.erb index 19f8447861..33a6db5525 100644 --- a/app/views/announcements/_announcement_table.html.erb +++ b/app/views/announcements/_announcement_table.html.erb @@ -57,7 +57,7 @@ <% end %> <% end %> <% if policy(announcement).destroy? %> - <%= link_to announcement, method: :delete, data: {confirm: t("general.are_you_sure")}, class: "btn btn-icon btn-icon-filled bg-danger" do %> + <%= link_to announcement, method: :delete, data: {confirm: t("general.are_you_sure")}, class: "btn btn-icon btn-icon-filled d-btn-danger" do %> <% end %> <% end %> diff --git a/app/views/announcements/edit.html.erb b/app/views/announcements/edit.html.erb index d706aaa9c4..a3b1f274e2 100644 --- a/app/views/announcements/edit.html.erb +++ b/app/views/announcements/edit.html.erb @@ -11,7 +11,7 @@
<% if policy(@announcement).destroy? %> - <%= link_to @announcement, method: :delete, data: { confirm: t("general.are_you_sure") }, class: "btn btn-filled with-icon bg-danger" do %> + <%= link_to @announcement, method: :delete, data: { confirm: t("general.are_you_sure") }, class: "btn btn-filled with-icon d-btn-danger" do %> <%= t ".destroy" %> <% end %> diff --git a/app/views/api_tokens/_table.html.erb b/app/views/api_tokens/_table.html.erb index a9cf526864..34b5857511 100644 --- a/app/views/api_tokens/_table.html.erb +++ b/app/views/api_tokens/_table.html.erb @@ -15,7 +15,7 @@ <%= token.description %> <%= l token.created_at %> - <%= button_to api_token_path(token), method: :delete, remote: true, class: 'btn btn-icon btn-icon-filled bg-danger' do %> + <%= button_to api_token_path(token), method: :delete, remote: true, class: 'btn btn-icon btn-icon-filled d-btn-danger' do %> <% end %> diff --git a/app/views/auth/confirm_new_user.html.erb b/app/views/auth/confirm_new_user.html.erb index 871e988432..e203e88c71 100644 --- a/app/views/auth/confirm_new_user.html.erb +++ b/app/views/auth/confirm_new_user.html.erb @@ -13,7 +13,7 @@ <%= markdown t(".message_personal_p2") %> <% end %>
- <%= link_to t(".create_new_account"), confirm_new_user_path, method: :post, class: "btn btn-primary" %> + <%= link_to t(".create_new_account"), confirm_new_user_path, method: :post, class: "btn btn-filled" %>
<% @users.each do |user| %> diff --git a/app/views/auth/privacy_prompt.html.erb b/app/views/auth/privacy_prompt.html.erb index a9fadfa319..d54149ee0a 100644 --- a/app/views/auth/privacy_prompt.html.erb +++ b/app/views/auth/privacy_prompt.html.erb @@ -10,10 +10,10 @@
- <%= link_to root_path, class: "btn btn-danger" do %> + <%= link_to root_path, class: "btn d-btn-danger" do %> <%= t ".decline_button" %> <% end %> - <%= link_to privacy_prompt_path, method: :post, class: "btn btn-primary" do %> + <%= link_to privacy_prompt_path, method: :post, class: "btn btn-filled" do %> <%= t ".accept_button" %> <% end %>
diff --git a/app/views/course_members/_course_membership_buttons.html.erb b/app/views/course_members/_course_membership_buttons.html.erb index ccf635aefe..28e436bbc1 100644 --- a/app/views/course_members/_course_membership_buttons.html.erb +++ b/app/views/course_members/_course_membership_buttons.html.erb @@ -11,7 +11,7 @@ remote: true, params: {user: user.id, status: 'unsubscribed'}, title: t('users.index.decline'), - class: 'btn btn-icon btn-icon-filled bg-danger' do %> + class: 'btn btn-icon btn-icon-filled d-btn-danger' do %> <% end %> <% when 'student' %> diff --git a/app/views/courses/edit.html.erb b/app/views/courses/edit.html.erb index 9a470fd39b..25aa16258d 100644 --- a/app/views/courses/edit.html.erb +++ b/app/views/courses/edit.html.erb @@ -34,7 +34,7 @@ <% if policy(@course).destroy? %>
- <%= link_to @course, method: :delete, data: {confirm: t("general.are_you_sure")}, class: "btn btn-filled bg-danger", title: t(".delete.button") do %> + <%= link_to @course, method: :delete, data: {confirm: t("general.are_you_sure")}, class: "btn btn-filled d-btn-danger", title: t(".delete.button") do %> <%= t('.delete.button') %> <% end %>
diff --git a/app/views/judges/index.html.erb b/app/views/judges/index.html.erb index a801f9e635..41ff795294 100644 --- a/app/views/judges/index.html.erb +++ b/app/views/judges/index.html.erb @@ -37,7 +37,7 @@ <% end %> <% end %> <% if policy(judge).destroy? %> - <%= link_to judge, method: :delete, data: {confirm: t("general.are_you_sure")}, class: "btn btn-icon btn-icon-filled bg-danger" do %> + <%= link_to judge, method: :delete, data: {confirm: t("general.are_you_sure")}, class: "btn btn-icon btn-icon-filled d-btn-danger" do %> <% end %> <% end %> diff --git a/app/views/labels/_labels_table.html.erb b/app/views/labels/_labels_table.html.erb index 27023c47d5..65352227c1 100644 --- a/app/views/labels/_labels_table.html.erb +++ b/app/views/labels/_labels_table.html.erb @@ -24,7 +24,7 @@ <% end %> <% end %> <% if policy(Label).destroy? %> - <%= link_to label, method: :delete, data: {confirm: t("general.are_you_sure")}, class: "btn btn-icon btn-icon-filled bg-danger" do %> + <%= link_to label, method: :delete, data: {confirm: t("general.are_you_sure")}, class: "btn btn-icon btn-icon-filled d-btn-danger" do %> <% end %> <% end %> diff --git a/app/views/notifications/_notifications_table.html.erb b/app/views/notifications/_notifications_table.html.erb index ea2c0e974e..5a81e34e03 100644 --- a/app/views/notifications/_notifications_table.html.erb +++ b/app/views/notifications/_notifications_table.html.erb @@ -23,7 +23,7 @@ - + diff --git a/app/views/programming_languages/index.html.erb b/app/views/programming_languages/index.html.erb index dba74ae6e8..d75525d58f 100644 --- a/app/views/programming_languages/index.html.erb +++ b/app/views/programming_languages/index.html.erb @@ -65,7 +65,7 @@ <% end %> <% end %> <% if policy(programming_language).destroy? %> - <%= link_to programming_language, method: :delete, data: {confirm: t("general.are_you_sure")}, class: "btn btn-icon btn-icon-filled bg-danger" do %> + <%= link_to programming_language, method: :delete, data: {confirm: t("general.are_you_sure")}, class: "btn btn-icon btn-icon-filled d-btn-danger" do %> <% end %> <% end %> diff --git a/app/views/repositories/_repository_admin_buttons.html.erb b/app/views/repositories/_repository_admin_buttons.html.erb index 096ecae7ce..647c078f77 100644 --- a/app/views/repositories/_repository_admin_buttons.html.erb +++ b/app/views/repositories/_repository_admin_buttons.html.erb @@ -1,7 +1,7 @@ <%# We don't user user.repository_admin?, otherwise every zeus would show up as admin in the non-admin list %> <% is_repository_admin = user.repositories.include?(repository) %> <% if is_repository_admin && show_delete_button %> - <% elsif !is_repository_admin %> diff --git a/app/views/repositories/_repository_course_buttons.html.erb b/app/views/repositories/_repository_course_buttons.html.erb index 23f62c64c7..1835918bc4 100644 --- a/app/views/repositories/_repository_course_buttons.html.erb +++ b/app/views/repositories/_repository_course_buttons.html.erb @@ -1,6 +1,6 @@ <% is_allowed = course.usable_repositories.include?(repository) %> <% if is_allowed && show_delete_button %> - <% elsif !is_allowed %> diff --git a/app/views/repositories/index.html.erb b/app/views/repositories/index.html.erb index b5710719a2..c81c242eb6 100644 --- a/app/views/repositories/index.html.erb +++ b/app/views/repositories/index.html.erb @@ -55,7 +55,7 @@ <% end %> <% end %> <% if policy(repository).destroy? %> - <%= link_to repository, method: :delete, data: {confirm: t("general.are_you_sure")}, class: "btn btn-icon btn-icon-filled bg-danger", title: t(".delete") do %> + <%= link_to repository, method: :delete, data: {confirm: t("general.are_you_sure")}, class: "btn btn-icon btn-icon-filled d-btn-danger", title: t(".delete") do %> <% end %> <% end %> diff --git a/app/views/rights_requests/_requests_table.html.erb b/app/views/rights_requests/_requests_table.html.erb index a5ab093dcb..d187f67461 100644 --- a/app/views/rights_requests/_requests_table.html.erb +++ b/app/views/rights_requests/_requests_table.html.erb @@ -27,10 +27,10 @@ <% end %> - <%= link_to approve_rights_request_path(request), remote: true, method: :post, class: "btn btn-icon btn-icon-filled bg-success", title: t(".approve") do %> + <%= link_to approve_rights_request_path(request), remote: true, method: :post, class: "btn btn-icon btn-icon-filled d-btn-success", title: t(".approve") do %> <% end %> - <%= link_to reject_rights_request_path(request), remote: true, method: :post, class: "btn btn-icon btn-icon-filled bg-danger", title: t(".reject") do %> + <%= link_to reject_rights_request_path(request), remote: true, method: :post, class: "btn btn-icon btn-icon-filled d-btn-danger", title: t(".reject") do %> <% end %> diff --git a/app/views/score_items/_exercise.html.erb b/app/views/score_items/_exercise.html.erb index 0126c910c4..4d88cf0b35 100644 --- a/app/views/score_items/_exercise.html.erb +++ b/app/views/score_items/_exercise.html.erb @@ -41,7 +41,7 @@ method: :delete, remote: true, data: { confirm: t('general.are_you_sure') }, - class: 'btn btn-icon btn-icon-filled bg-danger' do %> + class: 'btn btn-icon btn-icon-filled d-btn-danger' do %> <% end %> diff --git a/app/views/series/_course_series_table.html.erb b/app/views/series/_course_series_table.html.erb index 64e598e7f5..0f44653864 100644 --- a/app/views/series/_course_series_table.html.erb +++ b/app/views/series/_course_series_table.html.erb @@ -61,7 +61,7 @@ confirm += " " + t('series.delete.confirm_evaluation') end %> - <%= link_to s, method: :delete, data: {confirm: confirm}, class: "btn btn-icon btn-icon-filled bg-danger", title: t("series.delete.title") do %> + <%= link_to s, method: :delete, data: {confirm: confirm}, class: "btn btn-icon btn-icon-filled d-btn-danger", title: t("series.delete.title") do %> <% end %> <% end %> diff --git a/app/views/series/index.html.erb b/app/views/series/index.html.erb index 4974478d6e..9e34d6d123 100644 --- a/app/views/series/index.html.erb +++ b/app/views/series/index.html.erb @@ -25,7 +25,7 @@ <% end %> <% end %> <% if policy(series).destroy? %> - <%= link_to series, method: :delete, data: {confirm: t("general.are_you_sure")}, class: "btn btn-icon btn-icon-filled bg-danger" do %> + <%= link_to series, method: :delete, data: {confirm: t("general.are_you_sure")}, class: "btn btn-icon btn-icon-filled d-btn-danger" do %> <% end %> <% end %>