Merge pull request #2692 from weseek/imprv/gw-3282-slack-button

Imprv/gw 3282 slack button

public/images/icons/slack/slack-logo-dark-off.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 448">
+  <defs>
+    <style>.cls-1{fill:#9BA5AF;}</style>
+  </defs>
+  <path class="cls-1" d="M94.12,283.1A47.06,47.06,0,1,1,47.06,236H94.12Zm23.72,0a47.06,47.06,0,1,1,94.12,0V400.94a47.06,47.06,0,1,1-94.12,0Zm47.06-189A47.06,47.06,0,1,1,212,47.06V94.12Zm0,23.72a47.06,47.06,0,0,1,0,94.12H47.06a47.06,47.06,0,0,1,0-94.12Zm189,47.06A47.06,47.06,0,1,1,400.94,212H353.88V164.9Zm-23.72,0a47.06,47.06,0,1,1-94.12,0V47.06a47.06,47.06,0,1,1,94.12,0V164.9Zm-47.06,189A47.06,47.06,0,1,1,236,400.94V353.88Zm0-23.72a47.06,47.06,0,0,1,0-94.12H400.94a47.06,47.06,0,0,1,0,94.12Z"/>
+</svg>

public/images/icons/slack/slack-logo-dark-on.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 448">
+  <defs>
+    <style>.cls-1{fill:#DD80DE;}</style>
+  </defs>
+  <path class="cls-1" d="M94.12,283.1A47.06,47.06,0,1,1,47.06,236H94.12Zm23.72,0a47.06,47.06,0,1,1,94.12,0V400.94a47.06,47.06,0,1,1-94.12,0Zm47.06-189A47.06,47.06,0,1,1,212,47.06V94.12Zm0,23.72a47.06,47.06,0,0,1,0,94.12H47.06a47.06,47.06,0,0,1,0-94.12Zm189,47.06A47.06,47.06,0,1,1,400.94,212H353.88V164.9Zm-23.72,0a47.06,47.06,0,1,1-94.12,0V47.06a47.06,47.06,0,1,1,94.12,0V164.9Zm-47.06,189A47.06,47.06,0,1,1,236,400.94V353.88Zm0-23.72a47.06,47.06,0,0,1,0-94.12H400.94a47.06,47.06,0,0,1,0,94.12Z"/>
+</svg>

public/images/icons/slack/slack-logo-off.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 448">
+  <defs>
+    <style>.cls-1{fill:#9ba5af;}</style>
+  </defs>
+  <path class="cls-1" d="M94.12,283.1A47.06,47.06,0,1,1,47.06,236H94.12Zm23.72,0a47.06,47.06,0,1,1,94.12,0V400.94a47.06,47.06,0,1,1-94.12,0Zm47.06-189A47.06,47.06,0,1,1,212,47.06V94.12Zm0,23.72a47.06,47.06,0,0,1,0,94.12H47.06a47.06,47.06,0,0,1,0-94.12Zm189,47.06A47.06,47.06,0,1,1,400.94,212H353.88V164.9Zm-23.72,0a47.06,47.06,0,1,1-94.12,0V47.06a47.06,47.06,0,1,1,94.12,0V164.9Zm-47.06,189A47.06,47.06,0,1,1,236,400.94V353.88Zm0-23.72a47.06,47.06,0,0,1,0-94.12H400.94a47.06,47.06,0,0,1,0,94.12Z"/>
+</svg>

public/images/icons/slack/slack-logo-on.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 448">
+  <defs>
+    <style>.cls-1{fill:#af30b0;}</style>
+  </defs>
+  <path class="cls-1" d="M94.12,283.1A47.06,47.06,0,1,1,47.06,236H94.12Zm23.72,0a47.06,47.06,0,1,1,94.12,0V400.94a47.06,47.06,0,1,1-94.12,0Zm47.06-189A47.06,47.06,0,1,1,212,47.06V94.12Zm0,23.72a47.06,47.06,0,0,1,0,94.12H47.06a47.06,47.06,0,0,1,0-94.12Zm189,47.06A47.06,47.06,0,1,1,400.94,212H353.88V164.9Zm-23.72,0a47.06,47.06,0,1,1-94.12,0V47.06a47.06,47.06,0,1,1,94.12,0V164.9Zm-47.06,189A47.06,47.06,0,1,1,236,400.94V353.88Zm0-23.72a47.06,47.06,0,0,1,0-94.12H400.94a47.06,47.06,0,0,1,0,94.12Z"/>
+</svg>

src/client/js/components/PageComment/CommentEditor.jsx

@@ -346,6 +346,7 @@ class CommentEditor extends React.Component {
             </label>
             <span className="flex-grow-1" />
             <span className="d-none d-sm-inline">{ this.state.errorMessage && errorMessage }</span>
+
             { this.state.hasSlackConfig
               && (
               <div className="form-inline align-self-center mr-md-2">
@@ -354,6 +355,7 @@ class CommentEditor extends React.Component {
                   slackChannels={commentContainer.state.slackChannels}
                   onEnabledFlagChange={this.onSlackEnabledFlagChange}
                   onChannelChange={this.onSlackChannelsChange}
+                  id="idForComment"
                 />
               </div>
               )

src/client/js/components/SavePageControls.jsx

@@ -92,6 +92,7 @@ class SavePageControls extends React.Component {
               slackChannels={editorContainer.state.slackChannels}
               onEnabledFlagChange={this.slackEnabledFlagChangedHandler}
               onChannelChange={this.slackChannelsChangedHandler}
+              id="idForSavePageControl"
             />
           </div>
           )

src/client/js/components/SlackNotification.jsx

@@ -40,18 +40,19 @@ class SlackNotification extends React.Component {
 
     return (
       <div className="grw-slack-notification">
-        <div className="input-group input-group-sm extended-setting">
-          <label className="input-group-addon bg-light">
-            <img id="slack-mark-white" alt="slack-mark" src="/images/icons/slack/mark-monochrome_white.svg" width="18" height="18" />
-            <img id="slack-mark-black" alt="slack-mark" src="/images/icons/slack/mark-monochrome_black.svg" width="18" height="18" />
-
-            <input
-              type="checkbox"
-              value="1"
-              checked={this.props.isSlackEnabled}
-              onChange={this.updateCheckboxHandler}
-            />
-
+        <div className="input-group extended-setting">
+          <label className="input-group-addon">
+            <div className="custom-control custom-switch custom-switch-lg custom-switch-slack">
+              <input
+                type="checkbox"
+                className="custom-control-input border-0"
+                id={this.props.id}
+                checked={this.props.isSlackEnabled}
+                onChange={this.updateCheckboxHandler}
+              />
+              <label className="custom-control-label" htmlFor={this.props.id}>
+              </label>
+            </div>
           </label>
           <input
             className="form-control"
@@ -79,6 +80,7 @@ SlackNotification.propTypes = {
   slackChannels: PropTypes.string.isRequired,
   onEnabledFlagChange: PropTypes.func,
   onChannelChange: PropTypes.func,
+  id: PropTypes.string.isRequired,
 };
 
 export default withTranslation()(SlackNotification);

src/client/styles/scss/_on-edit.scss

@@ -122,26 +122,6 @@ body.on-edit {
   .grw-editor-navbar-bottom {
     height: $grw-editor-navbar-bottom-height;
 
-    .grw-slack-notification {
-      .input-group-addon {
-        padding: 2px 8px;
-        line-height: 1em;
-        img,
-        input {
-          vertical-align: middle;
-        }
-      }
-      .form-control {
-        width: 80px;
-        @include media-breakpoint-up(sm) {
-          width: 130px;
-        }
-        @include media-breakpoint-up(md) {
-          width: 180px;
-        }
-      }
-    }
-
     .grw-grant-selector {
       @include media-breakpoint-down(sm) {
         .btn .label {

src/client/styles/scss/_override-bootstrap-variables.scss

@@ -89,3 +89,4 @@ $pre-color: dummyinvalildcolor; // disable pre color specification with invalid
 $custom-checkbox-indicator-border-radius: 0px;
 $custom-control-indicator-focus-box-shadow: none;
 $custom-control-indicator-size: 1.2rem;
+

src/client/styles/scss/atoms/_custom_control.scss

@@ -32,3 +32,57 @@ label.custom-control-label {
     }
   }
 }
+
+//lg
+.custom-switch.custom-switch-lg {
+  $custom-control-indicator-size-lg: $custom-control-indicator-size * 1.5;
+  $custom-switch-width-lg: $custom-control-indicator-size-lg * 1.75;
+  $custom-control-gutter-lg: $custom-control-gutter * 1.5;
+  $custom-control-indicator-size-lg: $custom-control-indicator-size * 1.5;
+  $custom-switch-indicator-size-lg: subtract($custom-control-indicator-size-lg, $custom-control-indicator-border-width * 4);
+
+  padding-left: $custom-switch-width-lg + $custom-control-gutter-lg;
+
+  line-height: $custom-control-indicator-size-lg;
+  .custom-control-label {
+    &::before {
+      top: ($font-size-base * $line-height-base - $custom-control-indicator-size-lg) / 2;
+
+      left: -($custom-switch-width-lg + $custom-control-gutter-lg);
+      width: $custom-switch-width-lg;
+      height: $custom-control-indicator-size-lg;
+      border-radius: $custom-control-indicator-size-lg/2;
+    }
+
+    &::after {
+      top: add(($font-size-base * $line-height-base - $custom-control-indicator-size-lg) / 2, $custom-control-indicator-border-width * 2);
+      left: add(-($custom-switch-width-lg + $custom-control-gutter-lg), $custom-control-indicator-border-width * 2);
+      width: $custom-switch-indicator-size-lg;
+      height: $custom-switch-indicator-size-lg;
+      border-radius: $custom-control-indicator-size-lg/2;
+    }
+  }
+
+  .custom-control-input:checked ~ .custom-control-label {
+    &::after {
+      transform: translateX($custom-switch-width-lg - $custom-control-indicator-size-lg);
+    }
+  }
+}
+
+.custom-switch.custom-switch-slack {
+  .custom-control-label {
+    &::before {
+      background-color: $gray-200;
+      border-color: transparent;
+    }
+    &::after {
+      background-size: 15px;
+    }
+  }
+  .input-group-addon {
+    input {
+      vertical-align: middle;
+    }
+  }
+}

src/client/styles/scss/molecules/slack-notification.scss

@@ -0,0 +1,22 @@
+.grw-slack-notification {
+  $input-height-slack: 1.8rem;
+  border-color: $gray-200;
+
+  border-style: solid;
+  border-width: 1px;
+  border-radius: $input-height-slack/2 2px 2px $input-height-slack/2;
+
+  .form-control {
+    height: $input-height-slack;
+    border: transparent;
+    @include media-breakpoint-up(sm) {
+      width: 130px;
+    }
+    @include media-breakpoint-up(md) {
+      width: 180px;
+    }
+  }
+}
+//　TODO デザインの使用が確定して実装、本タスクのスコープ外
+// .grw-slack-notification-xd {
+// }

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

@@ -23,6 +23,7 @@
 
 // molecules
 @import 'molecules/copy-dropdown';
+@import 'molecules/slack-notification';
 
 // growi component
 @import 'admin';

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

@@ -232,6 +232,32 @@ ul.pagination {
   }
 }
 
+.grw-slack-notification {
+  background-color: transparent;
+  $color-slack: #4b144c;
+
+  .custom-control-label {
+    &::before {
+      background-color: $secondary;
+      border-color: transparent;
+    }
+    &::after {
+      background-color: darken($color-slack, 5%);
+      background-image: url(/images/icons/slack/slack-logo-dark-off.svg);
+    }
+  }
+
+  .custom-control-input:checked ~ .custom-control-label {
+    &::before {
+      background-color: lighten($color-slack, 10%);
+    }
+    &::after {
+      background-color: darken($color-slack, 5%);
+      background-image: url(/images/icons/slack/slack-logo-dark-on.svg);
+    }
+  }
+}
+
 /*
  * GROWI HandsontableModal
  */

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

@@ -167,6 +167,30 @@ $table-hover-bg: $bgcolor-table-hover;
   }
 }
 
+.grw-slack-notification {
+  background-color: white;
+  $color-slack: #4b144c;
+
+  .custom-control-label {
+    &::before {
+      background-color: $gray-200;
+      border-color: transparent;
+    }
+    &::after {
+      background-color: white;
+      background-image: url(/images/icons/slack/slack-logo-off.svg);
+    }
+  }
+  .custom-control-input:checked ~ .custom-control-label {
+    &::before {
+      background-color: lighten($color-slack, 60%);
+    }
+    &::after {
+      background-image: url(/images/icons/slack/slack-logo-on.svg);
+    }
+  }
+}
+
 /*
  * GROWI HandsontableModal
  */