WIP: reconstruct layouts

* on-edit input-group-slack

lib/views/_form.html

@@ -27,11 +27,12 @@
     </div>
 
     <div class="form-inline page-form-setting d-flex" id="page-form-setting" data-slack-configured="{{ slackConfigured() }}">
-      {% if !slackConfigured() %}
-      <span class="input-group input-group-sm extended-setting m-r-5">
-        <span class="input-group-addon">
+      {% if slackConfigured() %}
+      <span class="input-group input-group-sm input-group-slack extended-setting m-r-5">
+        <div class="input-group-addon">
+          <img src="/images/slack/monochrome_black.svg" width="18" height="18">
           <input class="" type="checkbox" name="pageForm[notify][slack][on]" value="1">
-        </span>
+        </div>
         <input class="form-control" type="text" name="pageForm[notify][slack][channel]" value="{{ page.extended.slack|default('') }}" placeholder="slack-channel-name"
           id="page-form-slack-channel"
           data-toggle="popover"

resource/styles/scss/_on-edit.scss

@@ -87,8 +87,14 @@ body.on-edit {
         min-height: 39px;
         border-top: solid 1px transparent;
 
-        .input-group-addon {
-          line-height: 1em;
+        .input-group-slack {
+          .input-group-addon {
+            padding: 2px 8px;
+            line-height: 1em;
+            img, input {
+              vertical-align: middle;
+            }
+          }
         }
       }