codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2025-03-31 09:09:53 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

FEATURE: maximize button for customization css/html editor

Browse source
This commit is contained in:
Sam 2015-01-02 11:25:15 +11:00
parent 9744802be9
commit 049ae70f94
4 changed files with 110 additions and 49 deletions
app/assets
javascripts/admin
templates
customize_css_html.hbs
views
ace_editor_view.jsadmin_customize_view.js
stylesheets/common/admin
admin_base.scss

80
app/assets/javascripts/admin/templates/customize_css_html.hbs
View file

@ -11,44 +11,54 @@
</div>
{{#if selectedItem}}
<div class='current-style'>
{{text-field class="style-name" value=selectedItem.name}}
<div {{bind-attr class=":current-style view.maximized:maximized"}}>
<div class='wrapper'>
{{text-field class="style-name" value=selectedItem.name}}
<div class='admin-controls'>
<ul class="nav nav-pills">
<li><a {{bind-attr class="view.stylesheetActive:active"}} {{action "selectStylesheet" target="view"}}>{{i18n 'admin.customize.css'}}</a></li>
<li><a {{bind-attr class="view.headerActive:active"}} {{action "selectHeader" target="view"}}>{{i18n 'admin.customize.header'}}</a></li>
<li><a {{bind-attr class="view.footerActive:active"}} {{action "selectFooter" target="view"}}>{{i18n 'admin.customize.footer'}}</a></li>
<li><a {{bind-attr class="view.mobileStylesheetActive:active"}} {{action "selectMobileStylesheet" target="view"}}>{{fa-icon "mobile"}}&nbsp;{{i18n 'admin.customize.css'}}</a></li>
<li><a {{bind-attr class="view.mobileHeaderActive:active"}} {{action "selectMobileHeader" target="view"}}>{{fa-icon "mobile"}}&nbsp;{{i18n 'admin.customize.header'}}</a></li>
<li><a {{bind-attr class="view.mobileFooterActive:active"}} {{action "selectMobileFooter" target="view"}}>{{fa-icon "mobile"}}&nbsp;{{i18n 'admin.customize.footer'}}</a></li>
</ul>
</div>
<div class='admin-controls'>
<ul class="nav nav-pills">
<li><a {{bind-attr class="view.stylesheetActive:active"}} {{action "selectStylesheet" target="view"}}>{{i18n 'admin.customize.css'}}</a></li>
<li><a {{bind-attr class="view.headerActive:active"}} {{action "selectHeader" target="view"}}>{{i18n 'admin.customize.header'}}</a></li>
<li><a {{bind-attr class="view.footerActive:active"}} {{action "selectFooter" target="view"}}>{{i18n 'admin.customize.footer'}}</a></li>
<li><a {{bind-attr class="view.mobileStylesheetActive:active"}} {{action "selectMobileStylesheet" target="view"}}>{{fa-icon "mobile"}}&nbsp;{{i18n 'admin.customize.css'}}</a></li>
<li><a {{bind-attr class="view.mobileHeaderActive:active"}} {{action "selectMobileHeader" target="view"}}>{{fa-icon "mobile"}}&nbsp;{{i18n 'admin.customize.header'}}</a></li>
<li><a {{bind-attr class="view.mobileFooterActive:active"}} {{action "selectMobileFooter" target="view"}}>{{fa-icon "mobile"}}&nbsp;{{i18n 'admin.customize.footer'}}</a></li>
<li class='toggle-maximize'><a {{action "toggleMaximize" target="view"}}>
{{#if view.maximized}}
{{fa-icon "compress"}}
{{else}}
{{fa-icon "expand"}}
{{/if}}
</a>
</ul>
</div>
<div class="admin-container">
{{#if view.stylesheetActive}}{{aceEditor content=selectedItem.stylesheet mode="scss"}}{{/if}}
{{#if view.headerActive}}{{aceEditor content=selectedItem.header mode="html"}}{{/if}}
{{#if view.footerActive}}{{aceEditor content=selectedItem.footer mode="html"}}{{/if}}
{{#if view.mobileStylesheetActive}}{{aceEditor content=selectedItem.mobile_stylesheet mode="scss"}}{{/if}}
{{#if view.mobileHeaderActive}}{{aceEditor content=selectedItem.mobile_header mode="html"}}{{/if}}
{{#if view.mobileFooterActive}}{{aceEditor content=selectedItem.mobile_footer mode="html"}}{{/if}}
</div>
<br>
<div class='status-actions'>
<span>{{i18n 'admin.customize.enabled'}} {{input type="checkbox" checked=selectedItem.enabled}}</span>
{{#unless selectedItem.changed}}
<a class='preview-link' {{bind-attr href="selectedItem.previewUrl"}} target='_blank' title="{{i18n 'admin.customize.explain_preview'}}">{{i18n 'admin.customize.preview'}}</a>
|
<a href="/?preview-style=" target='_blank' title="{{i18n 'admin.customize.explain_undo_preview'}}">{{i18n 'admin.customize.undo_preview'}}</a>
|
<a href="/?preview-style=default" target='_blank' title="{{i18n 'admin.customize.explain_rescue_preview'}}">{{i18n 'admin.customize.rescue_preview'}}</a><br>
{{/unless}}
</div>
<div class="admin-container">
{{#if view.stylesheetActive}}{{aceEditor content=selectedItem.stylesheet mode="scss"}}{{/if}}
{{#if view.headerActive}}{{aceEditor content=selectedItem.header mode="html"}}{{/if}}
{{#if view.footerActive}}{{aceEditor content=selectedItem.footer mode="html"}}{{/if}}
{{#if view.mobileStylesheetActive}}{{aceEditor content=selectedItem.mobile_stylesheet mode="scss"}}{{/if}}
{{#if view.mobileHeaderActive}}{{aceEditor content=selectedItem.mobile_header mode="html"}}{{/if}}
{{#if view.mobileFooterActive}}{{aceEditor content=selectedItem.mobile_footer mode="html"}}{{/if}}
</div>
<div class='admin-footer'>
<div class='status-actions'>
<span>{{i18n 'admin.customize.enabled'}} {{input type="checkbox" checked=selectedItem.enabled}}</span>
{{#unless selectedItem.changed}}
<a class='preview-link' {{bind-attr href="selectedItem.previewUrl"}} target='_blank' title="{{i18n 'admin.customize.explain_preview'}}">{{i18n 'admin.customize.preview'}}</a>
|
<a href="/?preview-style=" target='_blank' title="{{i18n 'admin.customize.explain_undo_preview'}}">{{i18n 'admin.customize.undo_preview'}}</a>
|
<a href="/?preview-style=default" target='_blank' title="{{i18n 'admin.customize.explain_rescue_preview'}}">{{i18n 'admin.customize.rescue_preview'}}</a><br>
{{/unless}}
</div>
<div class='buttons'>
<button {{action "save"}} {{bind-attr disabled="selectedItem.disableSave"}} class='btn'>{{i18n 'admin.customize.save'}}</button>
<span class='saving'>{{selectedItem.savingStatus}}</span>
<a {{action "destroy"}} class='delete-link'>{{i18n 'admin.customize.delete'}}</a>
<div class='buttons'>
<button {{action "save"}} {{bind-attr disabled="selectedItem.disableSave"}} class='btn'>{{i18n 'admin.customize.save'}}</button>
<span class='saving'>{{selectedItem.savingStatus}}</span>
<a {{action "destroy"}} class='delete-link'>{{i18n 'admin.customize.delete'}}</a>
</div>
</div>
</div>
</div>
{{else}}

19
app/assets/javascripts/admin/views/ace_editor_view.js
View file

@ -35,18 +35,19 @@ Discourse.AceEditorView = Discourse.View.extend({
didInsertElement: function() {
var aceEditorView = this;
var self = this;
var initAce = function() {
aceEditorView.editor = ace.edit(aceEditorView.$('.ace')[0]);
aceEditorView.editor.setTheme("ace/theme/chrome");
aceEditorView.editor.setShowPrintMargin(false);
aceEditorView.editor.getSession().setMode("ace/mode/" + (aceEditorView.get('mode')));
aceEditorView.editor.on("change", function() {
aceEditorView.skipContentChangeEvent = true;
aceEditorView.set('content', aceEditorView.editor.getSession().getValue());
aceEditorView.skipContentChangeEvent = false;
self.editor = ace.edit(self.$('.ace')[0]);
self.editor.setTheme("ace/theme/chrome");
self.editor.setShowPrintMargin(false);
self.editor.getSession().setMode("ace/mode/" + (self.get('mode')));
self.editor.on("change", function() {
self.skipContentChangeEvent = true;
self.set('content', self.editor.getSession().getValue());
self.skipContentChangeEvent = false;
});
self.$().data('editor', self.editor);
};
if (window.ace) {

12
app/assets/javascripts/admin/views/admin_customize_view.js
View file

@ -26,7 +26,17 @@ Discourse.AdminCustomizeView = Discourse.View.extend({
selectStylesheet: function() { this.set('selected', 'stylesheet'); },
selectMobileHeader: function() { this.set('selected', 'mobileHeader'); },
selectMobileFooter: function() { this.set('selected', 'mobileFooter'); },
selectMobileStylesheet: function() { this.set('selected', 'mobileStylesheet'); }
selectMobileStylesheet: function() { this.set('selected', 'mobileStylesheet'); },
toggleMaximize: function() {
this.set("maximized", !this.get("maximized"));
Em.run.scheduleOnce('afterRender', this, function(){
$('.ace-wrapper').each(function(){
$(this).data("editor").resize();
});
});
},
},
didInsertElement: function() {

48
app/assets/stylesheets/common/admin/admin_base.scss
View file

@ -33,10 +33,6 @@ td.flaggers td {
margin-bottom: 50px;
.admin-contents {
padding: 8px;
.ace-wrapper {
height: 400px;
}
}
.view-options {
@ -460,6 +456,28 @@ section.details {
// Customise area
.customize {
.admin-footer {
margin-top: 20px;
}
.current-style.maximized {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100000;
background-color: white;
width: 100%;
padding: 0;
margin: 0;
.wrapper {
position: absolute;
top: 20px;
bottom: 10px;
left: 20px;
right: 20px;
}
}
.nav.nav-pills {
margin-left: 10px;
}
@ -470,6 +488,13 @@ section.details {
margin-bottom: 10px;
}
.current-style {
.nav.nav-pills{
position: relative;
}
.toggle-maximize {
position: absolute;
right: -5px;
}
.delete-link {
margin-left: 15px;
margin-top: 5px;
@ -488,6 +513,21 @@ section.details {
height: 400px;
width: 100%;
}
&.maximized {
.admin-container {
position: absolute;
bottom: 50px;
top: 80px;
width: 100%;
}
.admin-footer {
position: absolute;
bottom: 10px;
}
.ace-wrapper {
height: 100%;
}
}
.ace_editor {
position: absolute;
left: 0;