Merge pull request #4747 from gsambrotta/show-disable-delete-btn-cat

Show disable delete btn cat

app/assets/javascripts/discourse/controllers/edit-category.js.es6

@@ -8,6 +8,7 @@ export default Ember.Controller.extend(ModalFunctionality, {
   saving: false,
   deleting: false,
   panels: null,
+  hiddenTooltip: true,
 
   _initPanels: function() {
     this.set('panels', []);
@@ -16,6 +17,7 @@ export default Ember.Controller.extend(ModalFunctionality, {
   onShow() {
     this.changeSize();
     this.titleChanged();
+    this.set('hiddenTooltip', true);
   },
 
   changeSize: function() {
@@ -101,6 +103,13 @@ export default Ember.Controller.extend(ModalFunctionality, {
           self.set('deleting', false);
         }
       });
+    },
+
+    toggleDeleteTooltip() {
+      // check if is touch device
+      if ( $('html').hasClass('discourse-touch') ) {
+        this.toggleProperty('hiddenTooltip');
+      }
     }
   }
 

app/assets/javascripts/discourse/templates/modal/edit-category.hbs

@@ -28,8 +28,16 @@
                  icon="trash-o"
                  label="category.delete"}}
     {{else}}
-      <div class="cannot_delete_reason">
-        {{{model.cannot_delete_reason}}}
+      <div class="disable_info_wrap">
+        {{d-button disabled=deleteDisabled
+                   class="disable-no-hover"
+                   action="toggleDeleteTooltip"
+                   icon="question-circle"
+                   label="category.delete"}}
+
+        <div class="cannot_delete_reason {{if hiddenTooltip "hidden" ""}}">
+          {{{model.cannot_delete_reason}}}
+        </div>
       </div>
     {{/if}}
   </div>

app/assets/stylesheets/common/base/modal.scss

@@ -332,8 +332,34 @@
       margin-bottom: 10px;
     }
   }
+
+  .disable_info_wrap {
+    position: relative;
+    display: inline-block;
+    float: right;
+
+    .cannot_delete_reason {
+      position: absolute;
+      background: dark-light-choose(scale-color($primary, $lightness: 10%), scale-color($secondary, $lightness: 10%));
+      color: dark-light-choose(scale-color($primary, $lightness: 100%), scale-color($secondary, $lightness: 0%));
+      text-align: center;
+      border-radius: 2px;
+      padding: 12px 8px;
+
+      &::after {
+        top: 100%;
+        left: 57%;
+        border: solid transparent;
+        content: " ";
+        position: absolute;
+        border-top-color: dark-light-choose(scale-color($primary, $lightness: 10%), scale-color($secondary, $lightness: 10%));
+        border-width: 8px;
+      }
+    }
+  }
 }
 
+
 .incoming-email-modal {
   .btn {
     transition: none;

app/assets/stylesheets/common/foundation/helpers.scss

@@ -76,3 +76,11 @@
 .clickable {
   cursor: pointer;
 }
+
+
+// Buttons
+// ---------------------------------------------------
+.disable-no-hover:hover {
+  background: dark-light-choose(scale-color($primary, $lightness: 90%), scale-color($secondary, $lightness: 60%));;
+  color: $primary;
+}

app/assets/stylesheets/desktop/modal.scss

@@ -117,11 +117,26 @@
     }
   }
 
-  .cannot_delete_reason {
-    float: right;
-    text-align: right;
-    max-width: 380px;
-    color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%));
+  .disable_info_wrap {
+    margin-top: -70px;
+    padding-top: 70px;
+    @media all and (min-width: 550px) {
+      padding-left: 170px;
+    }
+
+    .cannot_delete_reason {
+      top: 4px;
+      right: 4px;
+      max-width: 380px;
+      min-width: 300px;
+      display: none;
+    }
+
+    @include hover {
+      .cannot_delete_reason {
+        display: block;
+      }
+    }
   }
 }
 

app/assets/stylesheets/mobile/modal.scss

@@ -38,7 +38,7 @@
   width: 95%;
 }
 
-// we need a little extra room on mobile for the 
+// we need a little extra room on mobile for the
 // stuff inside the footer to fit
 .modal-footer {
   padding-right: 0;
@@ -133,6 +133,12 @@
       }
     }
   }
+
+  .disable_info_wrap .cannot_delete_reason {
+    top: -114px;
+    right: 8px;
+    min-width: 200px;
+  }
 }
 
 .tabbed-modal {