Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

create btn, tooltip and style it

This commit is contained in:
Anaketa 2017-03-08 18:59:19 +01:00 committed by giorgia
parent c423544208
commit 63febf391b
3 changed files with 47 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/javascripts/discourse/components/d-button.js.es6
View File

@ -8,14 +8,14 @@ export default Ember.Component.extend({
classNameBindings: [':btn', 'noText'], classNameBindings: [':btn', 'noText'],
attributeBindings: ['disabled', 'translatedTitle:title'], 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) { translatedTitle(title) {
if (title) return I18n.t(title); if (title) return I18n.t(title);
}, },
@computed("label") @computed("label")//this.get('label')
translatedLabel(label) { translatedLabel(label) {
if (label) return I18n.t(label); if (label) return I18n.t(label);
}, },

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

@ -28,8 +28,14 @@
icon="trash-o" icon="trash-o"
label="category.delete"}} label="category.delete"}}
{{else}} {{else}}
<div class="cannot_delete_reason"> <div class="disable_info_wrap">
{{{model.cannot_delete_reason}}} {{d-button disabled=deleteDisabled
icon="question-circle"
label="category.delete"}}
<div class="cannot_delete_reason">
{{{model.cannot_delete_reason}}}
</div>
</div> </div>
{{/if}} {{/if}}
</div> </div>

41
app/assets/stylesheets/desktop/modal.scss
View File

@ -116,12 +116,43 @@
} }
} }
} }
.disable_info_wrap {
.cannot_delete_reason { position: relative;
display: inline-block;
float: right; float: right;
text-align: right; margin-top: -70px;
max-width: 380px; padding-top: 70px;
color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)); 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;
}
}
} }
} }