Merge pull request #2902 from weseek/imprv/three-stranded-button-design-fb

Imprv/three stranded button design fb

src/client/js/components/Navbar/ThreeStrandedButton.jsx

@@ -31,7 +31,7 @@ const ThreeStrandedButton = (props) => {
           className={`btn btn-outline-primary view-button ${btnActive === 'view' && 'active'} ${isBtnDisabled && 'disabled'}`}
           onClick={() => { threeStrandedButtonClickedHandler('view') }}
         >
-          <i className="icon-control-play icon-fw" />
+          <i className="icon-control-play icon-fw grw-three-stranded-button-icon" />
           { t('view') }
         </button>
         <button
@@ -39,7 +39,7 @@ const ThreeStrandedButton = (props) => {
           className={`btn btn-outline-primary edit-button ${btnActive === 'edit' && 'active'} ${isBtnDisabled && 'disabled'}`}
           onClick={() => { threeStrandedButtonClickedHandler('edit') }}
         >
-          <i className="icon-note icon-fw" />
+          <i className="icon-note icon-fw grw-three-stranded-button-icon" />
           { t('Edit') }
         </button>
         <button
@@ -47,7 +47,7 @@ const ThreeStrandedButton = (props) => {
           className={`btn btn-outline-primary hackmd-button ${btnActive === 'hackmd' && 'active'} ${isBtnDisabled && 'disabled'}`}
           onClick={() => { threeStrandedButtonClickedHandler('hackmd') }}
         >
-          <i className="fa fa-fw fa-file-text-o" />
+          <i className="fa fa-fw fa-file-text-o grw-three-stranded-button-icon" />
           { t('hackmd.hack_md') }
         </button>
       </div>

src/client/js/components/TopOfTableContents.jsx

@@ -76,6 +76,7 @@ const TopOfTableContents = (props) => {
           id="seen-user-list"
           data-user-ids-str="{{ page.seenUsers|slice(-15)|default([])|reverse|join(',') }}"
           data-sum-of-seen-users="{{ page.seenUsers.length|default(0) }}"
+          className="grw-seen-user-list ml-1 pl-1"
         >
         </div>
       </div>

src/client/js/components/User/SeenUserList.jsx

@@ -20,7 +20,7 @@ const SeenUserList = (props) => {
   const toggle = () => setPopoverOpen(!popoverOpen);
   const { pageContainer } = props;
   return (
-    <div className="grw-seen-user-list pl-2 ml-2">
+    <>
       <Button id="po-seen-user" color="link" className="px-2">
         <span className="mr-1 footstamp-icon"><FootstampIcon /></span>
         <span className="seen-user-count">{pageContainer.state.countOfSeenUsers}</span>
@@ -32,7 +32,7 @@ const SeenUserList = (props) => {
           </div>
         </PopoverBody>
       </Popover>
-    </div>
+    </>
   );
 };
 

src/client/styles/scss/_mixins.scss

@@ -221,14 +221,71 @@
   transition-duration: 300ms;
 }
 
+@mixin border-vertical($beforeOrAfter, $borderColor, $borderLength, $zIndex: initial, $isBtnGroup: false) {
+  position: relative;
+  @if $isBtnGroup {
+    &:not(:first-child) {
+      margin-left: 0;
+      border-left: none;
+    }
+    &:not(:last-child) {
+      border-right: none;
+    }
+  }
+  &:not(:first-child) {
+    &::#{$beforeOrAfter} {
+      position: absolute;
+      top: calc((100% - #{$borderLength}) / 2);
+      left: 0;
+      z-index: $zIndex;
+      width: 100%;
+      height: $borderLength;
+      margin-left: -0.5px;
+      content: '';
+      border-left: 1px solid $borderColor;
+      transition: border-color 0.15s ease-in-out;
+    }
+  }
+}
+
 @mixin three-stranded-button($textColor, $borderColor, $bgColorHoverAndActive, $bgColor: white) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 70px;
+  padding-right: 0;
+  padding-left: 0;
   color: $textColor;
+  white-space: nowrap;
   background-color: $bgColor;
   border-color: $borderColor;
+
+  @include border-vertical('before', $borderColor, 70%, 1, true);
+
+  &.view-button,
+  &.edit-button {
+    .grw-three-stranded-button-icon {
+      margin-right: -0.25rem;
+    }
+  }
+  &.hackmd-button {
+    font-size: 12px;
+    letter-spacing: -0.6px;
+
+    .grw-three-stranded-button-icon {
+      margin-right: -0.1rem;
+    }
+  }
   &:hover,
   &:active {
     color: $textColor;
     background-color: $bgColorHoverAndActive;
     border-color: $borderColor;
+    &::after {
+      border-color: $bgColorHoverAndActive;
+    }
+  }
+  &:focus {
+    box-shadow: none;
   }
 }

src/client/styles/scss/_toc.scss

@@ -13,8 +13,6 @@
     font-weight: bolder;
   }
   .grw-seen-user-list {
-    border-left: 1px solid;
-
     .btn {
       white-space: nowrap;
     }

src/client/styles/scss/style-app.scss

@@ -69,22 +69,11 @@
   cursor: not-allowed;
 }
 
-.view-button {
-  min-width: 74px;
-}
-
-.edit-button {
-  min-width: 71px;
-}
 // TODO: reactify and replace with `grw-not-available-for-guest`
 .edit-button.edit-button-disabled {
   cursor: not-allowed;
 }
 
-.hackmd-button {
-  min-width: 97px;
-}
-
 .grw-not-available-for-guest {
   cursor: not-allowed !important;
 }

src/client/styles/scss/theme/_apply-colors.scss

@@ -274,7 +274,7 @@ pre:not(.hljs):not(.CodeMirror-line) {
     fill: $color-link;
   }
   .grw-seen-user-list {
-    border-color: $bordercolor-toc;
+    @include border-vertical('before', $bordercolor-toc, 70%);
 
     .btn {
       color: $color-seen-user;

src/client/styles/scss/theme/antarctic.scss

@@ -113,7 +113,7 @@ html[dark] {
   @import 'apply-colors-light';
 
   //Button
-  .grw-three-stranded-button {
+  .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(darken($primary, 10%), lighten($primary, 55%), lighten($primary, 60%));
     }

src/client/styles/scss/theme/default.scss

@@ -105,7 +105,7 @@ html[light] {
   @import 'apply-colors-light';
 
   // Button
-  .grw-three-stranded-button {
+  .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button($primary, lighten($primary, 65%), lighten($primary, 70%));
     }
@@ -208,7 +208,7 @@ html[dark] {
   @import 'apply-colors-dark';
 
   //Button
-  .grw-three-stranded-button {
+  .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(lighten($primary, 30%), lighten($primary, 20%), $primary, darken($primary, 20%));
     }

src/client/styles/scss/theme/future.scss

@@ -90,7 +90,7 @@ html[dark] {
   @import 'apply-colors-dark';
 
   //Button
-  .grw-three-stranded-button {
+  .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(lighten($primary, 10%), $primary, darken($primary, 10%), darken($primary, 20%));
     }

src/client/styles/scss/theme/halloween.scss

@@ -108,7 +108,7 @@ html[dark] {
   @import 'apply-colors-dark';
 
   //Button
-  .grw-three-stranded-button {
+  .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(lighten($primary, 35%), $primary, lighten($primary, 5%), darken($primary, 20%));
     }

src/client/styles/scss/theme/island.scss

@@ -110,7 +110,7 @@ html[dark] {
   }
 
   // Button
-  .grw-three-stranded-button {
+  .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(darken($primary, 50%), lighten($primary, 5%), darken($primary, 5%));
     }

src/client/styles/scss/theme/mono-blue.scss

@@ -89,7 +89,7 @@ html[light] {
     }
   }
   // Button
-  .grw-three-stranded-button {
+  .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button($primary, lighten($primary, 65%), lighten($primary, 70%));
     }
@@ -200,7 +200,7 @@ html[dark] {
   }
 
   // Button
-  .grw-three-stranded-button {
+  .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(lighten($primary, 30%), $primary, darken($primary, 10%), darken($primary, 20%));
     }

src/client/styles/scss/theme/nature.scss

@@ -112,7 +112,7 @@ html[dark] {
   }
 
   // Button
-  .grw-three-stranded-button {
+  .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button($bgcolor-navbar, lighten($bgcolor-navbar, 65%), lighten($bgcolor-navbar, 70%));
     }

src/client/styles/scss/theme/spring.scss

@@ -94,7 +94,7 @@ html[dark] {
   @import 'apply-colors-light';
 
   //Button
-  .grw-three-stranded-button {
+  .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(darken($primary, 50%), lighten($primary, 5%), lighten($primary, 10%));
     }

src/client/styles/scss/theme/wood.scss

@@ -162,7 +162,7 @@ html[dark] {
   }
 
   // Button
-  .grw-three-stranded-button {
+  .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(darken($primary, 30%), lighten($primary, 15%), lighten($primary, 25%));
     }