From a38d85c1e14bb7c7c7cfceccc287f72fb23e58c0 Mon Sep 17 00:00:00 2001 From: Sam Georges Date: Wed, 11 Jun 2014 22:18:46 +1000 Subject: [PATCH] Complete editor config UI --- modules/backend/assets/css/october.css | 2 +- .../js/editorsettings/editorsettings.js | 61 ++++++++++++++++++- .../backend/assets/less/controls/forms.less | 2 +- .../backend/controllers/EditorSettings.php | 4 +- .../editorsettings/config_form.yaml | 5 -- modules/backend/lang/en/lang.php | 14 +++-- modules/backend/models/EditorSettings.php | 24 +++++--- .../backend/models/editorsettings/fields.yaml | 56 ++++++++++++++--- 8 files changed, 137 insertions(+), 31 deletions(-) diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css index 2b98b5cb4..b23649ad8 100644 --- a/modules/backend/assets/css/october.css +++ b/modules/backend/assets/css/october.css @@ -7390,7 +7390,7 @@ label { padding-bottom: 0; } .form-group.checkbox-field { - padding-bottom: 0; + padding-bottom: 5px; } .form-group.checkbox-align { padding-left: 23px; diff --git a/modules/backend/assets/js/editorsettings/editorsettings.js b/modules/backend/assets/js/editorsettings/editorsettings.js index 07f3b9c9c..dd5adb1af 100644 --- a/modules/backend/assets/js/editorsettings/editorsettings.js +++ b/modules/backend/assets/js/editorsettings/editorsettings.js @@ -1,12 +1,67 @@ $(document).ready(function(){ var editorEl = $('#editorsettingsCodeeditor'), - editor = editorEl.codeEditor('getEditorObject') + editor = editorEl.codeEditor('getEditorObject'), + session = editor.getSession(), + renderer = editor.renderer - editorEl.height($('#editorSettingsForm').height()) + editorEl.height($('#editorSettingsForm').height() - 23) $('#Form-form-field-EditorSettings-theme').on('change', function(){ - $('#editorsettingsCodeeditor').codeEditor('setTheme', $(this).val()) + editorEl.codeEditor('setTheme', $(this).val()) }) + + $('#Form-form-field-EditorSettings-font_size').on('change', function(){ + editor.setFontSize(parseInt($(this).val())) + }) + + $('#Form-form-field-EditorSettings-word_wrap').on('change', function(){ + switch ($(this).val()) { + case "off": + session.setUseWrapMode(false) + renderer.setPrintMarginColumn(80) + break + case "40": + session.setUseWrapMode(true) + session.setWrapLimitRange(40, 40) + renderer.setPrintMarginColumn(40) + break + case "80": + session.setUseWrapMode(true) + session.setWrapLimitRange(80, 80) + renderer.setPrintMarginColumn(80) + break + case "fluid": + session.setUseWrapMode(true) + session.setWrapLimitRange(null, null) + renderer.setPrintMarginColumn(80) + break + } + }) + + $('#Form-form-field-EditorSettings-code_folding').on('change', function(){ + session.setFoldStyle($(this).val()) + }) + + $('#Form-form-field-EditorSettings-tab_size').on('change', function(){ + session.setTabSize($(this).val()) + }) + + $('#Form-form-field-EditorSettings-show_invisibles').on('change', function(){ + editor.setShowInvisibles($(this).is(':checked')) + }) + + $('#Form-form-field-EditorSettings-highlight_active_line').on('change', function(){ + editor.setHighlightActiveLine($(this).is(':checked')) + }) + + $('#Form-form-field-EditorSettings-use_hard_tabs').on('change', function(){ + session.setUseSoftTabs(!$(this).is(':checked')) + }) + + $('#Form-form-field-EditorSettings-show_gutter').on('change', function(){ + renderer.setShowGutter($(this).is(':checked')) + }) + }) diff --git a/modules/backend/assets/less/controls/forms.less b/modules/backend/assets/less/controls/forms.less index aa54d8f4e..d0b8efe8f 100644 --- a/modules/backend/assets/less/controls/forms.less +++ b/modules/backend/assets/less/controls/forms.less @@ -126,7 +126,7 @@ label { } &.checkbox-field { - padding-bottom: 0; + padding-bottom: 5px; } &.checkbox-align { diff --git a/modules/backend/controllers/EditorSettings.php b/modules/backend/controllers/EditorSettings.php index 14dc4ed8f..2a7f76f9a 100644 --- a/modules/backend/controllers/EditorSettings.php +++ b/modules/backend/controllers/EditorSettings.php @@ -1,5 +1,6 @@ vars['showGutter'] = true; $this->vars['theme'] = $editorSettings->theme; - $this->vars['wrapWords'] = $editorSettings->use_wrap; + $this->vars['wrapWords'] = $editorSettings->word_wrap !== 'off'; $this->vars['fontSize'] = $editorSettings->font_size; $this->vars['tabSize'] = $editorSettings->tab_size; $this->vars['useSoftTabs'] = !$editorSettings->use_hard_tabs; $this->vars['margin'] = 0; $this->getClassExtension('Backend.Behaviors.FormController')->update(); + $this->pageTitle = Lang::get('backend::lang.editor.menu_label'); } public function formFindModelObject() diff --git a/modules/backend/controllers/editorsettings/config_form.yaml b/modules/backend/controllers/editorsettings/config_form.yaml index e3c74cf30..46cf0ac8d 100644 --- a/modules/backend/controllers/editorsettings/config_form.yaml +++ b/modules/backend/controllers/editorsettings/config_form.yaml @@ -2,11 +2,6 @@ # Form Behavior Config # =================================== -name: system::lang.email_templates.template form: @/modules/backend/models/editorsettings/fields.yaml modelClass: Backend\Models\EditorSettings defaultRedirect: system/emailtemplates - -update: - redirect: system/emailtemplates - redirectClose: system/emailtemplates diff --git a/modules/backend/lang/en/lang.php b/modules/backend/lang/en/lang.php index 9b607e898..04bc73dd0 100644 --- a/modules/backend/lang/en/lang.php +++ b/modules/backend/lang/en/lang.php @@ -148,10 +148,14 @@ return [ 'editor' => [ 'menu_label' => 'Editor Configuration', 'menu_description' => 'Manage editor configuration.', - 'font_size' => 'Font Size', - 'tab_size' => 'Indentation Width', - 'use_hard_tabs' => 'Indent Using Tabs', - 'use_wrap' => 'Enable Word Wrap', - 'theme' => 'Text Color Scheme', + 'font_size' => 'Font size', + 'tab_size' => 'Tab size', + 'use_hard_tabs' => 'Indent using tabs', + 'code_folding' => 'Code folding', + 'word_wrap' => 'Word wrap', + 'highlight_active_line' => 'Highlight active line', + 'show_invisibles' => 'Show invisible characters', + 'show_gutter' => 'Show gutter', + 'theme' => 'Color scheme', ], ]; diff --git a/modules/backend/models/EditorSettings.php b/modules/backend/models/EditorSettings.php index 717144d28..658dde049 100644 --- a/modules/backend/models/EditorSettings.php +++ b/modules/backend/models/EditorSettings.php @@ -15,10 +15,14 @@ class EditorSettings extends Model public function initSettingsData() { $config = App::make('config'); - $this->font_size = $config->get('editor.font.size', 12); - $this->tab_size = $config->get('editor.tab.size', 4); - $this->use_hard_tabs = $config->get('editor.tab.usehard', false); - $this->use_wrap = $config->get('editor.wrap.enable', false); + $this->font_size = $config->get('editor.font_size', 12); + $this->tab_size = $config->get('editor.tab_size', 4); + $this->use_hard_tabs = $config->get('editor.use_hard_tabs', false); + $this->word_wrap = $config->get('editor.word_wrap', 'off'); + $this->code_folding = $config->get('editor.code_folding', 'manual'); + $this->show_invisibles = $config->get('editor.show_invisibles', true); + $this->highlight_active_line = $config->get('editor.highlight_active_line', true); + $this->show_gutter = $config->get('editor.show_gutter', true); $this->theme = $config->get('editor.theme', static::DEFAULT_THEME); } @@ -26,10 +30,14 @@ class EditorSettings extends Model { $config = App::make('config'); $settings = self::instance(); - $config->set('editor.font.size', $settings->font_size); - $config->set('editor.tab.size', $settings->tab_size); - $config->set('editor.tab.usehard', $settings->use_hard_tabs); - $config->set('editor.wrap.enable', $settings->use_wrap); + $config->set('editor.font_size', $settings->font_size); + $config->set('editor.tab_size', $settings->tab_size); + $config->set('editor.use_hard_tabs', $settings->use_hard_tabs); + $config->set('editor.word_wrap', $settings->word_wrap); + $config->set('editor.code_folding', $settings->code_folding); + $config->set('editor.show_invisibles', $settings->show_invisibles); + $config->set('editor.highlight_active_line', $settings->highlight_active_line); + $config->set('editor.show_gutter', $settings->show_gutter); $config->set('editor.theme', $settings->theme); } diff --git a/modules/backend/models/editorsettings/fields.yaml b/modules/backend/models/editorsettings/fields.yaml index 709610100..fa7c3e124 100644 --- a/modules/backend/models/editorsettings/fields.yaml +++ b/modules/backend/models/editorsettings/fields.yaml @@ -3,25 +3,67 @@ # =================================== fields: + font_size: label: backend::lang.editor.font_size - span: left + span: auto + type: dropdown + options: + 11: 11px + 12: 12px + 13: 13px + 14: 14px + 15: 15px + 16: 16px + + word_wrap: + label: backend::lang.editor.word_wrap + type: dropdown + span: auto + options: + off: Off + 40: 40 Characters + 80: 80 Characters + fluid: Fluid + + code_folding: + label: backend::lang.editor.code_folding + type: dropdown + span: auto + options: + manual: Off + markbegin: Mark begin + markbeginend: Mark begin and end tab_size: label: backend::lang.editor.tab_size - span: right + span: auto + type: dropdown + options: + 2: 2 + 3: 3 + 4: 4 + 5: 5 + 6: 6 + 7: 7 + 8: 8 theme: label: backend::lang.editor.theme type: dropdown - span: full + + show_invisibles: + label: backend::lang.editor.show_invisibles + type: checkbox + + highlight_active_line: + label: backend::lang.editor.highlight_active_line + type: checkbox use_hard_tabs: label: backend::lang.editor.use_hard_tabs type: checkbox - span: full - use_wrap: - label: backend::lang.editor.use_wrap + show_gutter: + label: backend::lang.editor.show_gutter type: checkbox - span: full