fix(plugins/plugin-client-common): tweaks to WatchPane layout and typ…

…ogrpahy Fixes #4549
kubernetes-sigs · May 13, 2020 · a716bdc · a716bdc
1 parent b3bd998
commit a716bdc
Show file tree

Hide file tree

Showing 16 changed files with 199 additions and 168 deletions.
diff --git a/plugins/plugin-client-common/src/components/Content/Table/PaginatedTable.tsx b/plugins/plugin-client-common/src/components/Content/Table/PaginatedTable.tsx
@@ -77,7 +77,7 @@ export type State = ToolbarProps & {
 
 export function getBreadcrumbsFromTable(response: KuiTable, prefixBreadcrumbs: BreadcrumbView[]) {
   const titleBreadcrumb: BreadcrumbView[] = response.title
-    ? [{ label: response.title, className: 'kui--data-table-title' }]
+    ? [{ label: response.title, className: 'kui--data-table-title', isCurrentPage: true }]
     : []
 
   const breadcrumbs = (prefixBreadcrumbs || [])

diff --git a/plugins/plugin-client-common/src/components/Views/WatchPane.tsx b/plugins/plugin-client-common/src/components/Views/WatchPane.tsx
@@ -47,7 +47,7 @@ const strings = i18n('plugin-client-common')
  *
  */
 export const enum Height {
-  Split = 'calc(100% - 9em - 2 * 0.5em)', // remember to add 2 * $pane-gap
+  Split = 'calc(100% - 8em - 2 * 0.5em)', // remember to add 2 * $pane-gap
   NotSplit = '100%'
 }
 

diff --git a/plugins/plugin-client-common/src/components/spi/Breadcrumb/impl/Carbon.tsx b/plugins/plugin-client-common/src/components/spi/Breadcrumb/impl/Carbon.tsx
@@ -29,17 +29,20 @@ export default class CarbonBreadcrumb extends React.PureComponent<Props> {
 
     return (
       <Breadcrumb noTrailingSlash={breadcrumbs.length > 1}>
-        {breadcrumbs.map((_, idx) => (
-          <BreadcrumbItem
-            href="#"
-            key={idx}
-            className={[_.className, _.deemphasize && 'kui--secondary-breadcrumb'].filter(_ => _).join(' ')}
-            isCurrentPage={idx === currentPageIdx}
-            onClick={_.command && (() => this.props.repl.pexec(_.command))}
-          >
-            {_.command ? <a href="#">{_.label}</a> : <span>{_.label}</span>}
-          </BreadcrumbItem>
-        ))}
+        {breadcrumbs.map((_, idx) => {
+          const onClick = _.command && (() => this.props.repl.pexec(_.command))
+          return (
+            <BreadcrumbItem
+              href={onClick ? '#' : undefined}
+              key={idx}
+              className={[_.className, _.deemphasize && 'kui--secondary-breadcrumb'].filter(_ => _).join(' ')}
+              isCurrentPage={idx === currentPageIdx}
+              onClick={onClick}
+            >
+              {_.command ? <a href="#">{_.label}</a> : <span>{_.label}</span>}
+            </BreadcrumbItem>
+          )
+        })}
       </Breadcrumb>
     )
   }

diff --git a/plugins/plugin-client-common/src/components/spi/Breadcrumb/impl/PatternFly.tsx b/plugins/plugin-client-common/src/components/spi/Breadcrumb/impl/PatternFly.tsx
@@ -28,23 +28,26 @@ export default class PatternflyBreadcrumb extends React.PureComponent<Props> {
 
     return (
       <Breadcrumb>
-        {this.props.breadcrumbs.map((_, idx) => (
-          <BreadcrumbItem
-            to="#"
-            key={idx}
-            className={[
-              _.className,
-              _.deemphasize && 'kui--secondary-breadcrumb',
-              idx === currentPageIdx && 'kui--current-page-breadcrumb'
-            ]
-              .filter(_ => _)
-              .join(' ')}
-            isActive={idx === this.props.breadcrumbs.length - 1}
-            onClick={_.command && (() => this.props.repl.pexec(_.command))}
-          >
-            {_.label}
-          </BreadcrumbItem>
-        ))}
+        {this.props.breadcrumbs.map((_, idx) => {
+          const onClick = _.command && (() => this.props.repl.pexec(_.command))
+          return (
+            <BreadcrumbItem
+              to={onClick ? '#' : undefined}
+              key={idx}
+              className={[
+                _.className,
+                _.deemphasize && 'kui--secondary-breadcrumb',
+                idx === currentPageIdx && 'kui--current-page-breadcrumb'
+              ]
+                .filter(_ => _)
+                .join(' ')}
+              isActive={idx === this.props.breadcrumbs.length - 1}
+              onClick={onClick}
+            >
+              {_.label}
+            </BreadcrumbItem>
+          )
+        })}
       </Breadcrumb>
     )
   }

diff --git a/plugins/plugin-client-common/web/css/static/carbon-overrides-common.css b/plugins/plugin-client-common/web/css/static/carbon-overrides-common.css
@@ -58,18 +58,21 @@ a.kui-new-tab__plus:active,
 
 body[kui-theme-style] .bx--link {
   font-weight: 600;
-  color: var(--color-brand-01);
   /* text-decoration: underline; */
   transition-duration: 250ms;
   pointer-events: unset;
   touch-action: unset;
-}
-body[kui-theme-style] .bx--link:not([href]),
-body[kui-theme-style] .bx--link:visited {
-  color: var(--color-brand-01);
-}
-body[kui-theme-style] .bx--link:hover {
-  color: var(--color-hover-primary-text);
+  color: var(--color-text-01);
+
+  &[href] {
+    color: var(--color-brand-01);
+  }
+  &:visited {
+    color: var(--color-text-01);
+  }
+  &:hover {
+    color: var(--color-hover-primary-text);
+  }
 }
 
 .repl-block.processing .repl-prompt-right-element-status-icon .kui--icon-processing svg circle.bx--loading__stroke-kui {

diff --git a/plugins/plugin-client-common/web/css/static/sidecar-main.css b/plugins/plugin-client-common/web/css/static/sidecar-main.css
@@ -400,11 +400,8 @@
   font-size: 0.875em;
   padding-left: 1em;
 
-  .sidecar-bottom-stripe-button:first-child {
-    margin-left: 0.5em;
-  }
-  .sidecar-bottom-stripe-button:last-child {
-    margin-right: 0.5em;
+  .sidecar-bottom-stripe-button:nth-child(2) {
+    margin-right: 1em;
   }
 }
 

diff --git a/plugins/plugin-client-common/web/css/static/split-pane.scss b/plugins/plugin-client-common/web/css/static/split-pane.scss
@@ -1,50 +1,54 @@
+/*
+ * Copyright 2020 IBM Corporation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+$size: 0.25em;
+$opacity: 0.1;
+$opacity-hover: 0.2;
+$border-width: 1px;
+$border-color: transparent;
+$border-color-hover: var(--color-base04);
+$background-color: var(--color-base06);
+
 .Resizer {
   & {
-    background: #000;
-    opacity: 0.2;
+    opacity: $opacity;
     z-index: 1;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    -moz-background-clip: padding;
-    -webkit-background-clip: padding;
     background-clip: padding-box;
   }
 
   &:hover {
-    -webkit-transition: all 2s ease;
-    transition: all 2s ease;
+    transition: all 0.5s ease;
+    opacity: $opacity-hover;
   }
 
   &.horizontal {
-    height: 0.875em;
-    margin: -5px 0;
-    border-top: 5px solid rgba(255, 255, 255, 0);
-    border-bottom: 5px solid rgba(255, 255, 255, 0);
-    cursor: row-resize;
+    height: $size;
+    border-top: $border-width solid $border-color;
+    border-bottom: $border-width solid $border-color;
     width: 100%;
-    &.disabled {
-      display: none;
-    }
-  }
-
-  &.horizontal:hover {
-    border-top: 5px solid rgba(0, 0, 0, 0.5);
-    border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+    cursor: row-resize;
   }
 
   &.vertical {
-    width: 0.875em;
-    margin: 0 -5px;
-    border-left: 5px solid rgba(255, 255, 255, 0);
-    border-right: 5px solid rgba(255, 255, 255, 0);
+    width: $size;
+    border-left: $border-width solid $border-color;
+    border-right: $border-width solid $border-color;
     cursor: col-resize;
   }
 
-  &.vertical:hover {
-    border-left: 5px solid rgba(0, 0, 0, 0.5);
-    border-right: 5px solid rgba(0, 0, 0, 0.5);
-  }
   &.disabled {
     cursor: not-allowed;
   }
@@ -56,8 +60,14 @@
   &.horizontal {
     display: flex;
     flex-direction: column;
-    background: var(--color-ui-05);
-    border-color: var(--color-ui-01);
+    background: $background-color;
+
+    &.disabled {
+      display: none;
+    }
+    &:hover {
+      border-color: $border-color-hover;
+    }
   }
   .resizer-thumb-fill {
     flex: 1;
@@ -80,20 +90,6 @@
     /* see https://github.com/IBM/kui/issues/3914 */
     position: unset !important;
   }
-
-  &.kui--sidecar-closed,
-  &.kui--sidecar-minimized {
-    .Resizer {
-      display: none;
-    }
-  }
-
-  &.kui--sidecar-minimized {
-    .Pane2 {
-      width: 0% !important;
-      opacity: 0.925;
-    }
-  }
 }
 
 @media (max-width: 44rem) {

diff --git a/plugins/plugin-client-common/web/css/static/ui.css b/plugins/plugin-client-common/web/css/static/ui.css
@@ -953,60 +953,6 @@ body.oops-total-catastrophe #restart-needed-warning {
   text-transform: capitalize;
 }
 
-/* usage */
-.usage-error-wrapper {
-  color: var(--color-text-01);
-  font-weight: normal;
-}
-.usage-error-wrapper .marked-content {
-  /* marked markdown renderer section */
-  white-space: normal;
-  font-size: 1em;
-  max-width: 45em;
-  border-left: 3px solid var(--color-ui-03);
-  padding: 0.375em;
-  background-color: var(--color-base01);
-}
-.usage-error-wrapper .marked-content p {
-  /* marked markdown renderer paragraphs */
-  margin: 0.25em 0;
-  white-space: pre-wrap;
-}
-.usage-error-wrapper .bx--breadcrumb-item .bx--link {
-  letter-spacing: 2px;
-}
-.usage-error-wrapper .hideable {
-  margin: 2em 0;
-  color: var(--color-text-01);
-}
-.usage-error-wrapper h3,
-.usage-error-wrapper h4 {
-  font-weight: 400;
-  font-size: 1.125em;
-  color: var(--color-brand-01);
-  font-family: var(--font-sans-serif);
-}
-.usage-error-wrapper h4 {
-  text-transform: capitalize;
-  margin: 0 0 0.375em;
-}
-.usage-error-wrapper .log-lines .log-line {
-  /* usage docs tend to be multi-line */
-  height: unset;
-}
-.usage-error-wrapper .log-lines .log-line .log-field {
-  /* used in tandem with height: unset */
-  padding-top: 0.875em;
-  padding-bottom: 0.875em;
-  background-color: var(--color-ui-02);
-}
-.usage-error-wrapper h4 {
-  margin: 1.33em 0 0.375em;
-}
-.usage-error-wrapper .example-command-text {
-  color: var(--color-name);
-}
-
 /* markdown */
 .page-content {
   flex: 1;

diff --git a/plugins/plugin-client-common/web/scss/components/Breadcrumb/Carbon.scss b/plugins/plugin-client-common/web/scss/components/Breadcrumb/Carbon.scss
@@ -50,9 +50,13 @@ body[kui-theme-style] nav[aria-label='Breadcrumb'] {
         font-size: inherit;
         font-size: unset;
         font-weight: normal;
-        color: var(--color-brand-01);
         overflow: unset;
         line-height: unset;
+        color: var(--color-text-01);
+
+        &[href] {
+          color: var(--color-brand-01);
+        }
       }
 
       &:not(.kui--secondary-breadcrumb) .bx--link {

diff --git a/plugins/plugin-client-common/web/scss/components/Breadcrumb/Patternfly.scss b/plugins/plugin-client-common/web/scss/components/Breadcrumb/Patternfly.scss
@@ -42,21 +42,25 @@ body[kui-theme-style] nav[aria-label='Breadcrumb'] {
       &.kui--secondary-breadcrumb {
         /* see https://github.com/IBM/kui/issues/4431 */
         overflow: hidden;
+        font-weight: normal;
+        color: var(--color-text-02);
 
         .pf-c-breadcrumb__link {
-          color: var(--color-text-02);
-
           /* see https://github.com/IBM/kui/issues/4431 */
+          color: var(--color-text-02);
           overflow-x: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
         }
       }
 
       &:not(.kui--secondary-breadcrumb) {
-        &.kui--current-page-breadcrumb .pf-c-breadcrumb__link {
-          font-weight: 700;
-          color: var(--color-text-01);
+        &.kui--current-page-breadcrumb {
+          &.pf-c-breadcrumb__link,
+          & .pf-c-breadcrumb__link {
+            font-weight: 700;
+            color: var(--color-text-01);
+          }
         }
 
         .pf-c-breadcrumb__link {