Improve css and add focus styles (#5420)

* Add styles for focused ant menus * Add disabled styles to clickable button * Improved dashboard header syntax and added focus * Improved CSS syntax * Add interactive styles * Improved anchor dependent styles * Improved styles of widget (gray more/delete btns) * Add interactive style for favorite star * Improved style of delete btn * Make table content fill all space * Added focus and active styles * Scoped query snippets list * Fixed behavior for all major browsers * Replaced button styles with plain button * Scoped items list styles * Added focus styles to ant table * Add plain button (#5419) * Minor syntax improvements * Refactor of Link component (#5418)
2025-12-25 01:03:20 -05:00 · 2021-03-17 14:26:08 -03:00
parent a5ec506b60
commit 0560e2410e
17 changed files with 165 additions and 54 deletions
--- a/client/app/assets/less/ant.less
+++ b/client/app/assets/less/ant.less
@@ -225,6 +225,16 @@
    }
  }

+  &-tbody > tr&-row {
+    &:hover,
+    &:focus,
+    &:focus-within {
+      & > td {
+        background: @table-row-hover-bg;
+      }
+    }
+  }
+
  // Custom styles

  &-headerless &-tbody > tr:first-child > td {
@@ -391,6 +401,18 @@
        left: 0;
      }
    }
+
+    &:focus,
+    &:focus-within {
+      color: @menu-highlight-color;
+    }
+  }
+}
+
+.@{dropdown-prefix-cls}-menu-item {
+  &:focus,
+  &:focus-within {
+    background-color: @item-hover-bg;
  }
 }

--- a/client/app/assets/less/inc/base.less
+++ b/client/app/assets/less/inc/base.less
@@ -98,6 +98,10 @@ strong {

 .clickable {
  cursor: pointer;
+
+  button&:disabled {
+    cursor: not-allowed;
+  }
 }

 .resize-vertical {
--- a/client/app/assets/less/inc/edit-in-place.less
+++ b/client/app/assets/less/inc/edit-in-place.less
@@ -1,26 +1,23 @@
-.edit-in-place span {
+.edit-in-place {
  white-space: pre-line;
+  display: inline-block;

  p {
    margin-bottom: 0;
  }
-}

-.edit-in-place span.editable {
-  display: inline-block;
-  cursor: pointer;
-}
+  .editable {
+    display: inline-block;
+    cursor: pointer;

-.edit-in-place span.editable:hover {
-  background: @redash-yellow;
-  border-radius: @redash-radius;
-}
+    &:hover {
+      background: @redash-yellow;
+      border-radius: @redash-radius;
+    }
+  }

-.edit-in-place.active input,
-.edit-in-place.active textarea {
-  display: inline-block;
-}
-
-.edit-in-place {
-  display: inline-block;
+  &.active input,
+  &.active textarea {
+    display: inline-block;
+  }
 }
--- a/client/app/assets/less/inc/table.less
+++ b/client/app/assets/less/inc/table.less
@@ -118,14 +118,19 @@
  color: #d4d4d4;
  transition: all 0.25s ease-in-out;

+  .fa-star {
+    color: @yellow-darker;
+  }
+
  &:hover,
  &:focus {
    color: @yellow-darker;
    cursor: pointer;
-  }

-  .fa-star {
-    color: @yellow-darker;
+    .fa-star {
+      filter: saturate(75%);
+      opacity: 0.75;
+    }
  }
 }

--- a/client/app/assets/less/redash/query.less
+++ b/client/app/assets/less/redash/query.less
@@ -127,11 +127,13 @@ body.fixed-layout {
  }
 }

-a.label-tag {
+.label-tag {
  background: fade(@redash-gray, 15%);
  color: darken(@redash-gray, 15%);

-  &:hover {
+  &:hover,
+  &:focus,
+  &:active {
    color: darken(@redash-gray, 15%);
    background: fade(@redash-gray, 25%);
  }
--- a/client/app/components/HelpTrigger.less
+++ b/client/app/components/HelpTrigger.less
@@ -38,7 +38,8 @@
    border: 2px solid @help-doc-bg;
    display: flex;

-    a {
+    a,
+    .plain-button {
      height: 26px;
      width: 26px;
      display: flex;
--- a/client/app/components/SelectItemsDialog.jsx
+++ b/client/app/components/SelectItemsDialog.jsx
@@ -12,13 +12,16 @@ import LoadingState from "@/components/items-list/components/LoadingState";
 import notification from "@/services/notification";
 import useSearchResults from "@/lib/hooks/useSearchResults";

+import "./SelectItemsDialog.less";
+
 function ItemsList({ items, renderItem, onItemClick }) {
  const renderListItem = useCallback(
    item => {
      const { content, className, isDisabled } = renderItem(item);
+
      return (
        <List.Item
-          className={classNames("p-l-10", "p-r-10", { clickable: !isDisabled, disabled: isDisabled }, className)}
+          className={classNames("select-items-list", "w-100", "p-l-10", "p-r-10", { disabled: isDisabled }, className)}
          onClick={isDisabled ? null : () => onItemClick(item)}>
          {content}
        </List.Item>
--- a/client/app/components/SelectItemsDialog.less
+++ b/client/app/components/SelectItemsDialog.less
@@ -0,0 +1,9 @@
+.select-items-list {
+  &:hover,
+  &:focus,
+  &:focus-within {
+    color: #555;
+    background-color: #f5f5f5;
+    transition: all 150ms ease-in-out;
+  }
+}
--- a/client/app/components/TagsList.less
+++ b/client/app/components/TagsList.less
@@ -13,7 +13,8 @@
      margin: 0;
    }

-    a {
+    a,
+    .plain-button {
      display: block;
      white-space: nowrap;
      cursor: pointer;
@@ -43,5 +44,15 @@
        color: white;
      }
    }
+
+    .ant-menu-item {
+      &:hover,
+      &:active,
+      &:focus,
+      &:focus-within {
+        color: @primary-color;
+        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      }
+    }
  }
 }
--- a/client/app/components/cards-list/CardsList.less
+++ b/client/app/components/cards-list/CardsList.less
@@ -21,7 +21,9 @@
  display: flex;
  align-items: center;

-  &:hover {
+  &:hover,
+  &:focus,
+  &:focus-within {
    box-shadow: rgba(102, 136, 153, 0.15) 0px 4px 9px -3px;
  }

--- a/client/app/components/dashboards/dashboard-widget/Widget.less
+++ b/client/app/components/dashboards/dashboard-widget/Widget.less
@@ -1,13 +1,5 @@
@import (reference, less) "~@/assets/less/inc/variables";

-.tile .t-header .th-title a.query-link {
-  color: rgba(0, 0, 0, 0.5);
-}
-
-.th-title p.hidden-print {
-  margin-bottom: 0;
-}
-
 .widget-wrapper {
  .widget-actions {
    display: flex;
@@ -22,10 +14,19 @@
      line-height: 100%;
      display: block;
      padding: 4px 10px 3px;
-    }

-    .action:hover {
-      background-color: rgba(0, 0, 0, 0.1);
+      &:focus {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+
+      &:hover {
+        background-color: transparent;
+        color: @blue;
+      }
+
+      &:active {
+        filter: brightness(75%);
+      }
    }
  }

@@ -83,7 +84,7 @@
    display: block;
  }

-  a.query-link {
+  .query-link {
    pointer-events: none;
    cursor: move;
  }
@@ -190,10 +191,18 @@
    .th-title {
      padding-right: 23px; // no overlap on RefreshIndicator

-      a {
+      .hidden-print {
+        margin-bottom: 0;
+      }
+
+      .query-link {
        color: fade(@redash-black, 80%);
        font-size: 15px;
        font-weight: 500;
+
+        &:not(.visualization-name) {
+          color: fade(@redash-black, 50%);
+        }
      }
    }

@@ -212,7 +221,10 @@
    padding: 15px;
  }

-  &:hover {
+  &:hover,
+  &:focus,
+  &:active,
+  &:focus-within {
    .widget-menu-regular,
    .btn__refresh {
      opacity: 1 !important;
@@ -240,10 +252,12 @@
      }
    }

-    a {
+    a,
+    .plain-button {
      color: fade(@redash-black, 65%);

-      &:hover {
+      &:hover,
+      &:focus {
        color: fade(@redash-black, 95%);
      }
    }
--- a/client/app/components/empty-state/empty-state.less
+++ b/client/app/components/empty-state/empty-state.less
@@ -86,8 +86,13 @@
    cursor: pointer;
    transition: color @animation-duration-slow;

-    &:hover {
+    &:hover,
+    &:focus {
      color: @text-color;
    }
+
+    &:active {
+      filter: contrast(200%);
+    }
  }
 }
--- a/client/app/pages/dashboards/components/DashboardHeader.less
+++ b/client/app/pages/dashboards/components/DashboardHeader.less
@@ -50,13 +50,16 @@
    margin: 3px 5px 0 5px;
  }

-  .tags-control a {
+  .tags-control > .label-tag {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
  }

-  &:hover {
-    .tags-control a {
+  &:hover,
+  &:focus,
+  &:active,
+  &:focus-within {
+    .tags-control > .label-tag {
      opacity: 1;
    }
  }
--- a/client/app/pages/queries/components/QueryPageHeader.less
+++ b/client/app/pages/queries/components/QueryPageHeader.less
@@ -35,13 +35,16 @@
    vertical-align: middle;
  }

-  .tags-control a {
+  .tags-control > .label-tag {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
  }

-  &:hover {
-    .tags-control a {
+  &:hover,
+  &:focus,
+  &:active,
+  &:focus-within {
+    .tags-control > .label-tag {
      opacity: 1;
    }
  }
--- a/client/app/pages/queries/components/QueryVisualizationTabs.less
+++ b/client/app/pages/queries/components/QueryVisualizationTabs.less
@@ -81,15 +81,24 @@
  }

  .delete-visualization-button {
+    height: 1.5rem;
+    width: 1.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
    margin-left: 5px;
-    cursor: pointer;
    color: #a09797;
    font-size: 11px;
-    padding: 0 4px 1px;
-    &:hover {
+    border-radius: 100%;
+
+    &:hover,
+    &:focus {
      color: white;
      background-color: #ff8080;
-      border-radius: 50%;
+    }
+
+    &:active {
+      filter: brightness(80%);
    }
  }
 }
--- a/client/app/pages/query-snippets/QuerySnippetsList.jsx
+++ b/client/app/pages/query-snippets/QuerySnippetsList.jsx
@@ -167,7 +167,7 @@ class QuerySnippetsList extends React.Component {
          </div>
        )}
        {controller.isLoaded && !controller.isEmpty && (
-          <div className="table-responsive">
+          <div className="table-responsive query-snippets-table">
            <ItemsTable
              items={controller.pageItems}
              columns={this.listColumns}
--- a/client/app/pages/query-snippets/QuerySnippetsList.less
+++ b/client/app/pages/query-snippets/QuerySnippetsList.less
@@ -8,3 +8,24 @@
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
 }
+
+.query-snippets-table {
+  table {
+    height: 1px;
+  }
+
+  .ant-table-row {
+    height: 100%;
+  }
+
+  .ant-table-cell {
+    height: 100%;
+
+    & > .table-main-title {
+      display: inline-flex;
+      align-items: center;
+      height: 100%;
+      width: 100%;
+    }
+  }
+}