TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Styling and API improvements to code editor

This commit is contained in:
Sam Georges 2014-08-30 15:03:35 +10:00
parent fcf31b05ae
commit 0acd45e4ca
3 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
modules/backend/formwidgets/codeeditor/assets/css/codeeditor.css
View File

@ -11,7 +11,7 @@
filter: alpha(opacity=0);
}
.field-codeeditor.editor-focus {
border: 2px solid #cccccc;
border: 2px solid #808c8d;
}
.field-codeeditor.size-tiny {
min-height: 50px;
@ -41,7 +41,7 @@
}
.field-codeeditor .editor-toolbar {
position: absolute;
top: 0;
top: 3px;
right: 3px;
z-index: 150;
}
@ -53,15 +53,18 @@
}
.field-codeeditor .editor-toolbar > ul > li {
float: left;
padding: 2px 5px;
height: 25px;
}
.field-codeeditor .editor-toolbar > ul > li > a {
display: block;
height: 25px;
width: 25px;
color: #666;
font-size: 20px;
text-align: center;
text-decoration: none;
}
.field-codeeditor .editor-toolbar > ul > li > a > abbr {
position: absolute;
font: 0/0 a;
color: transparent;
text-shadow: none;

6
modules/backend/formwidgets/codeeditor/assets/js/codeeditor.js
View File

@ -26,7 +26,7 @@
this.$toolbar = this.$el.find('>.editor-toolbar:first')
this.$code = null
this.editor = null
// Toolbar links
this.isFullscreen = false
this.$fullscreenEnable = this.$toolbar.find('li.fullscreen-enable')
@ -221,6 +221,10 @@
return this.editor
}
CodeEditor.prototype.getToolbar = function() {
return this.$toolbar
}
CodeEditor.prototype.toggleFullscreen = function() {
this.$el.toggleClass('editor-fullscreen')
this.$fullscreenEnable.toggle()

13
modules/backend/formwidgets/codeeditor/assets/less/codeeditor.less
View File

@ -30,20 +30,25 @@
.editor-toolbar {
position: absolute;
top: 0;
top: 3px;
right: 3px;
z-index: @codeeditor-zindex;
> ul, ul > li { list-style-type: none; padding: 0; margin: 0; }
> ul > li {
float: left;
padding: 2px 5px;
height: 25px;
}
> ul > li > a {
display: block;
height: 25px;
width: 25px;
color: #666;
font-size: 20px;
text-align: center;
text-decoration: none;
> abbr { .text-hide(); }
> abbr {
position: absolute;
.text-hide();
}
> i {
.opacity(.4);
display: block;