From 63febf391bc5c951b0fb55855678408406edbf7f Mon Sep 17 00:00:00 2001
From: Anaketa <g.sambrotta@gmail.com>
Date: Wed, 8 Mar 2017 18:59:19 +0100
Subject: [PATCH] create btn, tooltip and style it

---
 .../discourse/components/d-button.js.es6      |  6 +--
 .../templates/modal/edit-category.hbs         | 10 ++++-
 app/assets/stylesheets/desktop/modal.scss     | 41 ++++++++++++++++---
 3 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/d-button.js.es6 b/app/assets/javascripts/discourse/components/d-button.js.es6
index bd606facafd..c2d1086273e 100644
--- a/app/assets/javascripts/discourse/components/d-button.js.es6
+++ b/app/assets/javascripts/discourse/components/d-button.js.es6
@@ -8,14 +8,14 @@ export default Ember.Component.extend({
   classNameBindings: [':btn', 'noText'],
   attributeBindings: ['disabled', 'translatedTitle:title'],
 
-  noText: Ember.computed.empty('translatedLabel'),
+  noText: Ember.computed.empty('translatedLabel'), //if translatedLable = null/empty then noText = true
 
-  @computed("title")
+  @computed("title") //this.get('title')
   translatedTitle(title) {
     if (title) return I18n.t(title);
   },
 
-  @computed("label")
+  @computed("label")//this.get('label')
   translatedLabel(label) {
     if (label) return I18n.t(label);
   },
diff --git a/app/assets/javascripts/discourse/templates/modal/edit-category.hbs b/app/assets/javascripts/discourse/templates/modal/edit-category.hbs
index fbbafa353f8..3a6e67da5c5 100644
--- a/app/assets/javascripts/discourse/templates/modal/edit-category.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/edit-category.hbs
@@ -28,8 +28,14 @@
                  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
+                   icon="question-circle"
+                   label="category.delete"}}
+
+        <div class="cannot_delete_reason">
+          {{{model.cannot_delete_reason}}}
+        </div>
       </div>
     {{/if}}
   </div>
diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss
index e35b93fa117..01c3ad89e57 100644
--- a/app/assets/stylesheets/desktop/modal.scss
+++ b/app/assets/stylesheets/desktop/modal.scss
@@ -116,12 +116,43 @@
       }
     }
   }
-
-  .cannot_delete_reason {
+  .disable_info_wrap {
+    position: relative;
+    display: inline-block;
     float: right;
-    text-align: right;
-    max-width: 380px;
-    color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%));
+    margin-top: -70px;
+    padding-top: 70px;
+    padding-left: 170px;
+
+    .cannot_delete_reason {
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      max-width: 380px;
+      min-width: 300px;
+      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;
+      display: none;
+
+      &::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;
+      }
+    }
+
+    @include hover {
+      .cannot_delete_reason {
+        display: block;
+      }
+    }
   }
 }