Improve form styling so checkboxes sit more snugly
Style code editor page
This commit is contained in:
Sam Georges
parent
ee27e91c43
commit
c393114c07
|
|
@ -7285,9 +7285,6 @@ label {
|
|||
background: white;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
.form-preview .form-group {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.form-preview > .form-group:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
|
@ -7392,9 +7389,12 @@ label {
|
|||
.form-group.layout-relative {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.form-group.checkbox-field {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.form-group.checkbox-align {
|
||||
padding-left: 23px;
|
||||
margin-top: -21px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
.form-group.no-padding.span-left,
|
||||
.form-group.no-padding.span-right {
|
||||
|
|
@ -7470,6 +7470,7 @@ label {
|
|||
.custom-checkbox,
|
||||
.custom-radio {
|
||||
padding-left: 23px;
|
||||
margin-top: 0;
|
||||
}
|
||||
.custom-checkbox input[type=radio],
|
||||
.custom-radio input[type=radio],
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
$(document).ready(function(){
|
||||
|
||||
var editorEl = $('#editorsettingsCodeeditor'),
|
||||
editor = editorEl.codeEditor('getEditorObject')
|
||||
|
||||
editorEl.height($('#editorSettingsForm').height())
|
||||
|
||||
$('#Form-form-field-EditorSettings-theme').on('change', function(){
|
||||
$('#editorsettingsCodeeditor').codeEditor('setTheme', $(this).val())
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -32,10 +32,6 @@ label {
|
|||
background: white;
|
||||
border: 1px solid #eee;
|
||||
|
||||
.form-group {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
>.form-group:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
|
@ -129,9 +125,13 @@ label {
|
|||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&.checkbox-field {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&.checkbox-align {
|
||||
padding-left: 23px;
|
||||
margin-top: -21px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
&.no-padding {
|
||||
|
|
@ -202,12 +202,13 @@ label {
|
|||
.custom-checkbox,
|
||||
.custom-radio {
|
||||
padding-left: 23px;
|
||||
margin-top: 0;
|
||||
|
||||
input[type=radio],
|
||||
input[type=checkbox] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -27,11 +27,27 @@ class EditorSettings extends Controller
|
|||
{
|
||||
parent::__construct();
|
||||
|
||||
$this->addCss('/modules/backend/formwidgets/codeeditor/assets/css/codeeditor.css', 'core');
|
||||
$this->addJs('/modules/backend/formwidgets/codeeditor/assets/vendor/ace/ace.js', 'core');
|
||||
$this->addJs('/modules/backend/formwidgets/codeeditor/assets/js/codeeditor.js', 'core');
|
||||
$this->addJs('/modules/backend/assets/js/editorsettings/editorsettings.js', 'core');
|
||||
|
||||
BackendMenu::setContext('October.System', 'system', 'settings');
|
||||
}
|
||||
|
||||
public function index()
|
||||
{
|
||||
// Load the editor system settings
|
||||
$editorSettings = EditorSettingsModel::instance();
|
||||
|
||||
$this->vars['showGutter'] = true;
|
||||
$this->vars['theme'] = $editorSettings->theme;
|
||||
$this->vars['wrapWords'] = $editorSettings->use_wrap;
|
||||
$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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
form, fieldset, h5, h6, pre, blockquote, ol, dl, dt, dd, address, dd, dtm, div, td, th, hr {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
font: 62.5% Helvetica, Arial, Tahoma, Verdana, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
optgroup {
|
||||
font-style: normal;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
option {
|
||||
color: #000;
|
||||
}
|
||||
|
|
@ -9,7 +9,32 @@
|
|||
|
||||
<?= Form::open(['class'=>'layout-item stretch layout-column']) ?>
|
||||
|
||||
<?= $this->formRender() ?>
|
||||
<div class="row">
|
||||
<div class="col-md-5" id="editorSettingsForm">
|
||||
<div class="form-preview">
|
||||
<?= $this->formRender() ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
|
||||
<div
|
||||
id="editorsettingsCodeeditor"
|
||||
class="field-codeeditor size-large layout-relative"
|
||||
data-control="codeeditor"
|
||||
data-language="css"
|
||||
data-show-gutter="<?= $showGutter ? 'true' : 'false' ?>"
|
||||
data-wrap-mode="<?= $wrapWords ? 'true' : 'false' ?>"
|
||||
data-theme="<?= $theme ?>"
|
||||
data-margin="<?= $margin ?>"
|
||||
data-font-size="<?= $fontSize ?>"
|
||||
data-tab-size="<?= $tabSize ?>"
|
||||
data-use-soft-tabs="<?= $useSoftTabs ?>"
|
||||
data-vendor-path="<?= URL::to('/modules/backend/formwidgets/codeeditor/assets/vendor/ace') ?>/">
|
||||
<textarea name="editorsettings_codeeditor"><?= e($this->makePartial('example_code')) ?></textarea>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-buttons layout-item fix">
|
||||
<div class="loading-indicator-container">
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@
|
|||
options.vendorPath + '/theme-' + options.theme + '.js'
|
||||
]
|
||||
}, function(){
|
||||
editor.setTheme('ace/theme/'+options.theme)
|
||||
editor.setTheme('ace/theme/' + options.theme)
|
||||
var inline = options.language === 'php'
|
||||
editor.getSession().setMode({path: 'ace/mode/'+options.language, inline: inline})
|
||||
})
|
||||
|
|
@ -136,7 +136,7 @@
|
|||
editor.on('blur', function(){ self.$el.removeClass('editor-focus') })
|
||||
editor.on('focus', function(){ self.$el.addClass('editor-focus') })
|
||||
|
||||
editor.renderer.setScrollMargin(options.margin, options.margin, 0, 0)
|
||||
editor.renderer.setScrollMargin(options.margin, options.margin, 0, 0)
|
||||
editor.renderer.setPadding(options.margin)
|
||||
|
||||
/*
|
||||
|
|
@ -152,9 +152,9 @@
|
|||
|
||||
$(this).attr('title', title)
|
||||
})
|
||||
.tooltip({
|
||||
delay: 500,
|
||||
placement: 'auto',
|
||||
.tooltip({
|
||||
delay: 500,
|
||||
placement: 'auto',
|
||||
html: true
|
||||
})
|
||||
;
|
||||
|
|
@ -178,6 +178,17 @@
|
|||
})
|
||||
}
|
||||
|
||||
CodeEditor.prototype.setTheme = function(theme) {
|
||||
var self = this
|
||||
assetManager.load({
|
||||
js:[
|
||||
this.options.vendorPath + '/theme-' + theme + '.js'
|
||||
]
|
||||
}, function(){
|
||||
self.editor.setTheme('ace/theme/' + theme)
|
||||
})
|
||||
}
|
||||
|
||||
CodeEditor.prototype.getEditorObject = function() {
|
||||
return this.editor
|
||||
}
|
||||
|
|
|
|||
|
|
@ -151,9 +151,7 @@ return [
|
|||
'font_size' => 'Font Size',
|
||||
'tab_size' => 'Indentation Width',
|
||||
'use_hard_tabs' => 'Indent Using Tabs',
|
||||
'use_hard_tabs_comment' => 'Use this checkbox if you would like to use hard tabs instead of spaces.',
|
||||
'use_wrap' => 'Enable Word Wrap',
|
||||
'use_wrap_comment' => 'Use this checkbox if you want your text to wrap instead of overflowing.',
|
||||
'theme' => 'Text Color Scheme',
|
||||
],
|
||||
];
|
||||
|
|
|
|||
|
|
@ -20,10 +20,8 @@ fields:
|
|||
label: backend::lang.editor.use_hard_tabs
|
||||
type: checkbox
|
||||
span: full
|
||||
comment: backend::lang.editor.use_hard_tabs_comment
|
||||
|
||||
use_wrap:
|
||||
label: backend::lang.editor.use_wrap
|
||||
type: checkbox
|
||||
span: full
|
||||
comment: backend::lang.editor.use_wrap_comment
|
||||
Loading…
Reference in New Issue