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 1/2] 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;
+ }
+ }
}
}
From d7dedc4649ef0ce4e24616576df971b6d9929ae0 Mon Sep 17 00:00:00 2001
From: Anaketa <g.sambrotta@gmail.com>
Date: Fri, 10 Mar 2017 17:57:18 +0100
Subject: [PATCH 2/2] add show/hide to tooltip
---
.../discourse/components/d-button.js.es6 | 6 ++---
.../controllers/edit-category.js.es6 | 9 +++++++
.../templates/modal/edit-category.hbs | 4 ++-
app/assets/stylesheets/common/base/modal.scss | 26 +++++++++++++++++++
.../common/foundation/helpers.scss | 8 ++++++
app/assets/stylesheets/desktop/modal.scss | 24 +++--------------
app/assets/stylesheets/mobile/modal.scss | 8 +++++-
7 files changed, 60 insertions(+), 25 deletions(-)
diff --git a/app/assets/javascripts/discourse/components/d-button.js.es6 b/app/assets/javascripts/discourse/components/d-button.js.es6
index c2d1086273e..bd606facafd 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'), //if translatedLable = null/empty then noText = true
+ noText: Ember.computed.empty('translatedLabel'),
- @computed("title") //this.get('title')
+ @computed("title")
translatedTitle(title) {
if (title) return I18n.t(title);
},
- @computed("label")//this.get('label')
+ @computed("label")
translatedLabel(label) {
if (label) return I18n.t(label);
},
diff --git a/app/assets/javascripts/discourse/controllers/edit-category.js.es6 b/app/assets/javascripts/discourse/controllers/edit-category.js.es6
index cdc773d592b..da82528ad23 100644
--- a/app/assets/javascripts/discourse/controllers/edit-category.js.es6
+++ b/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');
+ }
}
}
diff --git a/app/assets/javascripts/discourse/templates/modal/edit-category.hbs b/app/assets/javascripts/discourse/templates/modal/edit-category.hbs
index 3a6e67da5c5..7f6063283d1 100644
--- a/app/assets/javascripts/discourse/templates/modal/edit-category.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/edit-category.hbs
@@ -30,10 +30,12 @@
{{else}}
<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">
+ <div class="cannot_delete_reason {{if hiddenTooltip "hidden" ""}}">
{{{model.cannot_delete_reason}}}
</div>
</div>
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 47da3055a18..3eb8868bfa8 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/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;
diff --git a/app/assets/stylesheets/common/foundation/helpers.scss b/app/assets/stylesheets/common/foundation/helpers.scss
index 282255d71e0..2b540dca04b 100644
--- a/app/assets/stylesheets/common/foundation/helpers.scss
+++ b/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;
+}
diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss
index 01c3ad89e57..33992cfed59 100644
--- a/app/assets/stylesheets/desktop/modal.scss
+++ b/app/assets/stylesheets/desktop/modal.scss
@@ -116,36 +116,20 @@
}
}
}
+
.disable_info_wrap {
- position: relative;
- display: inline-block;
- float: right;
margin-top: -70px;
padding-top: 70px;
- padding-left: 170px;
+ @media all and (min-width: 550px) {
+ 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 {
diff --git a/app/assets/stylesheets/mobile/modal.scss b/app/assets/stylesheets/mobile/modal.scss
index 13e41e2a25c..f94a9facd54 100644
--- a/app/assets/stylesheets/mobile/modal.scss
+++ b/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 {