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

Improve editor toolbar styles, tidy up md editor

This commit is contained in:
Samuel Georges 2015-07-29 20:29:02 +10:00
parent 934f77a1f3
commit fae4a4b65c
7 changed files with 59 additions and 502 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
modules/backend/formwidgets/markdowneditor/assets/css/markdowneditor.css
View File

@ -45,204 +45,4 @@
position: relative;
margin: 15px;
}
.field-markdowneditor .editor-toolbar {
position: relative;
top: 0;
left: 0;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
font-size: 14px !important;
line-height: 1 !important;
background: #dddddd;
border: none;
z-index: 410 !important;
}
.field-markdowneditor .editor-toolbar:before,
.field-markdowneditor .editor-toolbar:after {
content: " ";
display: table;
}
.field-markdowneditor .editor-toolbar:after {
clear: both;
}
.field-markdowneditor .editor-toolbar > li:first-child > a {
border-top-left-radius: 5px;
}
.field-markdowneditor .editor-toolbar > li > a.editor-btn-fullscreen {
border-top-right-radius: 5px;
}
.field-markdowneditor .editor-toolbar > li {
vertical-align: top;
display: inline-block;
margin: 0 !important;
padding: 0 !important;
outline: none;
list-style: none !important;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.field-markdowneditor .editor-toolbar > li.editor-btn-right {
float: right;
margin-right: 2px;
}
.field-markdowneditor .editor-toolbar > li > a {
display: block;
color: #404040;
text-align: center;
font-size: 14px;
padding: 9px 10px;
outline: none;
border: none;
text-decoration: none;
cursor: pointer;
zoom: 1;
width: 20px;
line-height: 20px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.field-markdowneditor .editor-toolbar > li > a:hover {
outline: none;
background-color: #999999;
color: #ffffff;
}
.field-markdowneditor .editor-toolbar > li > a:hover i:before {
color: #fff;
}
.field-markdowneditor .editor-toolbar > li > a:active,
.field-markdowneditor .editor-toolbar > li > a.redactor-act {
outline: none;
background-color: #404040;
color: #ffffff;
}
.field-markdowneditor .editor-toolbar > li > a.oc-button {
padding: 9px 8px 8px 12px;
}
.field-markdowneditor .editor-toolbar > li > a.redactor-button-disabled {
opacity: .3;
}
.field-markdowneditor .editor-toolbar > li > a.redactor-button-disabled:hover {
color: #333;
outline: none;
background-color: transparent !important;
cursor: default;
}
.field-markdowneditor .md-icon {
font-family: 'MarkdownFont';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.field-markdowneditor .md-icon i:before {
position: relative;
font-size: 14px;
}
.field-markdowneditor .md-video:before {
content: "\e600";
}
.field-markdowneditor .md-unorderedlist:before {
content: "\e601";
}
.field-markdowneditor .md-undo:before {
content: "\e602";
}
.field-markdowneditor .md-underline:before {
content: "\e603";
}
.field-markdowneditor .md-textdirection:before {
content: "\e604";
}
.field-markdowneditor .md-fontcolor:before {
content: "\e605";
}
.field-markdowneditor .md-table:before {
content: "\e606";
}
.field-markdowneditor .md-redo:before {
content: "\e607";
}
.field-markdowneditor .md-quote:before {
content: "\e608";
}
.field-markdowneditor .md-outdent:before {
content: "\e609";
}
.field-markdowneditor .md-orderedlist:before {
content: "\e60a";
}
.field-markdowneditor .md-link:before {
content: "\e60b";
}
.field-markdowneditor .md-horizontalrule:before {
content: "\e60c";
}
.field-markdowneditor .md-italic:before {
content: "\e60d";
}
.field-markdowneditor .md-indent:before {
content: "\e60e";
}
.field-markdowneditor .md-image:before {
content: "\e60f";
}
.field-markdowneditor .md-fullscreen:before {
content: "\e610";
}
.field-markdowneditor .md-normalscreen:before {
content: "\e611";
}
.field-markdowneditor .md-formatting:before {
content: "\e612";
}
.field-markdowneditor .md-fontsize:before {
content: "\e613";
}
.field-markdowneditor .md-fontfamily:before {
content: "\e614";
}
.field-markdowneditor .md-deleted:before {
content: "\e615";
}
.field-markdowneditor .md-html:before {
content: "\e616";
}
.field-markdowneditor .md-clips:before {
content: "\e617";
}
.field-markdowneditor .md-bold:before {
content: "\e618";
}
.field-markdowneditor .md-backcolor:before {
content: "\e619";
}
.field-markdowneditor .md-file:before {
content: "\e61a";
}
.field-markdowneditor .md-alignright:before {
content: "\e61b";
}
.field-markdowneditor .md-alignment:before,
.field-markdowneditor .md-alignleft:before {
content: "\e61c";
}
.field-markdowneditor .md-alignjustify:before {
content: "\e61d";
}
.field-markdowneditor .md-aligncenter:before {
content: "\e61e";
}
.field-markdowneditor .md-gallery:before {
content: "\e61f";
}

204
modules/backend/formwidgets/markdowneditor/assets/less/markdowneditor.less
View File

@ -53,208 +53,4 @@
.editor-preview {
}
//
// Toolbar
//
.editor-toolbar {
position: relative;
top: 0;
left: 0;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
font-size: 14px !important;
line-height: 1 !important;
background: @color-markdowneditor-toolbar;
border: none;
z-index: 410 !important;
.clearfix;
> li:first-child > a {
border-top-left-radius: 5px;
}
> li > a.editor-btn-fullscreen {
border-top-right-radius: 5px;
}
> li {
vertical-align: top;
display: inline-block;
margin: 0 !important;
padding: 0 !important;
outline: none;
list-style: none !important;
.box-sizing(content-box);
}
> li.editor-btn-right {
float: right;
margin-right: 2px;
}
> li > a {
display: block;
color: @color-markdowneditor-toolbar-btn-color;
text-align: center;
font-size: 14px;
padding: 9px 10px;
cursor: pointer;
outline: none;
border: none;
text-decoration: none;
cursor: pointer;
zoom: 1;
width: 20px;
line-height: 20px;
.box-sizing(content-box);
.user-select(none);
}
> li > a {
&:hover {
outline: none;
background-color: @color-markdowneditor-toolbar-btn-bg-hover;
color: @color-markdowneditor-toolbar-btn-color-hover;
}
&:hover i:before {
color: #fff;
}
&:active,
&.redactor-act {
outline: none;
background-color: @color-markdowneditor-toolbar-btn-bg-active;
color: @color-markdowneditor-toolbar-btn-color-hover;
}
}
> li > a.oc-button {
padding: 9px 8px 8px 12px;
}
> li > a.redactor-button-disabled {
opacity: .3;
&:hover {
color: #333;
outline: none;
background-color: transparent !important;
cursor: default;
}
}
}
//
// Icons
//
.md-icon {
font-family: 'MarkdownFont';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.md-icon i:before {
position: relative;
font-size: 14px;
}
.md-video:before {
content: "\e600";
}
.md-unorderedlist:before {
content: "\e601";
}
.md-undo:before {
content: "\e602";
}
.md-underline:before {
content: "\e603";
}
.md-textdirection:before {
content: "\e604";
}
.md-fontcolor:before {
content: "\e605";
}
.md-table:before {
content: "\e606";
}
.md-redo:before {
content: "\e607";
}
.md-quote:before {
content: "\e608";
}
.md-outdent:before {
content: "\e609";
}
.md-orderedlist:before {
content: "\e60a";
}
.md-link:before {
content: "\e60b";
}
.md-horizontalrule:before {
content: "\e60c";
}
.md-italic:before {
content: "\e60d";
}
.md-indent:before {
content: "\e60e";
}
.md-image:before {
content: "\e60f";
}
.md-fullscreen:before {
content: "\e610";
}
.md-normalscreen:before {
content: "\e611";
}
.md-formatting:before {
content: "\e612";
}
.md-fontsize:before {
content: "\e613";
}
.md-fontfamily:before {
content: "\e614";
}
.md-deleted:before {
content: "\e615";
}
.md-html:before {
content: "\e616";
}
.md-clips:before {
content: "\e617";
}
.md-bold:before {
content: "\e618";
}
.md-backcolor:before {
content: "\e619";
}
.md-file:before {
content: "\e61a";
}
.md-alignright:before {
content: "\e61b";
}
.md-alignment:before,
.md-alignleft:before {
content: "\e61c";
}
.md-alignjustify:before {
content: "\e61d";
}
.md-aligncenter:before {
content: "\e61e";
}
.md-gallery:before {
content: "\e61f";
}
}

102
modules/backend/formwidgets/markdowneditor/partials/_markdowneditor.htm
View File

@ -8,88 +8,38 @@
data-control="markdowneditor"
>
<div class="layout control-toolbar edita-toolbar">
<div class="layout-cell toolbar-item">
<div data-control="toolbar">
<div class="dropdown dropdown-fixed">
<button data-toggle="dropdown" class="btn tb-icon tb-formatting"></button>
<ul class="dropdown-menu" data-dropdown-title="Formatting">
<li><a href="#" rel="quote" tabindex="-1" class="oc-icon-quote-right">Quote</a></li>
<li><a href="#" rel="code" tabindex="-1" class="oc-icon-code">Code</a></li>
<li><a href="#" rel="header1" tabindex="-1" class="oc-icon-header">Header 1</a></li>
<li><a href="#" rel="header2" tabindex="-1" class="oc-icon-header">Header 2</a></li>
<li><a href="#" rel="header3" tabindex="-1" class="oc-icon-header">Header 3</a></li>
<li><a href="#" rel="header4" tabindex="-1" class="oc-icon-header">Header 4</a></li>
<li><a href="#" rel="header5" tabindex="-1" class="oc-icon-header">Header 5</a></li>
<li><a href="#" rel="header6" tabindex="-1" class="oc-icon-header">Header 6</a></li>
</ul>
</div>
<button type="button" class="btn tb-icon tb-bold"></button>
<button type="button" class="btn tb-icon tb-italic"></button>
<div class="layout control-toolbar editor-toolbar">
<div class="layout-cell toolbar-item">
<div data-control="toolbar">
<div class="dropdown dropdown-fixed">
<button data-toggle="dropdown" class="btn tb-icon tb-formatting"></button>
<ul class="dropdown-menu" data-dropdown-title="Formatting">
<li><a href="#" rel="quote" tabindex="-1" class="oc-icon-quote-right">Quote</a></li>
<li><a href="#" rel="code" tabindex="-1" class="oc-icon-code">Code</a></li>
<li><a href="#" rel="header1" tabindex="-1" class="oc-icon-header">Header 1</a></li>
<li><a href="#" rel="header2" tabindex="-1" class="oc-icon-header">Header 2</a></li>
<li><a href="#" rel="header3" tabindex="-1" class="oc-icon-header">Header 3</a></li>
<li><a href="#" rel="header4" tabindex="-1" class="oc-icon-header">Header 4</a></li>
<li><a href="#" rel="header5" tabindex="-1" class="oc-icon-header">Header 5</a></li>
<li><a href="#" rel="header6" tabindex="-1" class="oc-icon-header">Header 6</a></li>
</ul>
</div>
<button type="button" disabled class="btn tb-icon tb-bold"></button>
<button type="button" class="btn tb-icon tb-italic"></button>
<button type="button" class="btn tb-icon tb-unorderedlist"></button>
<button type="button" class="btn tb-icon tb-orderedlist"></button>
<button type="button" class="btn tb-icon tb-unorderedlist"></button>
<button type="button" class="btn tb-icon tb-orderedlist"></button>
<button type="button" class="btn tb-icon tb-link"></button>
<button type="button" class="btn tb-icon tb-horizontalrule"></button>
</div>
</div>
<div class="layout-cell toolbar-item width-fix">
<button type="button" class="btn oc-icon-eye"></button>
<button type="button" class="btn oc-icon-expand"></button>
</div>
</div>
<!--
<div class="layout-cell toolbar-item width-fix">
<input placeholder="search..." type="text" name="" value="" class="form-control icon search growable" autocomplete="off"/>
</div>
<div class="layout control-toolbar edita-toolbar">
<div class="layout-cell toolbar-item">
<div data-control="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-primary oc-icon-plus">Create post</button>
<button type="button" class="btn btn-primary oc-icon-copy">Copy</button>
<button type="button" class="btn btn-primary oc-icon-trash">Delete</button>
<button type="button" class="btn btn-primary oc-icon-magic">Publish</button>
<button type="button" class="btn btn-primary oc-icon-off">Unpublish</button>
<button type="button" class="btn btn-primary oc-icon-time">Timer</button>
<button type="button" class="btn btn-primary oc-icon-mail-reply-all">Send by email</button>
<button type="button" class="btn btn-primary oc-icon-hdd">Archive</button>
<button type="button" class="btn tb-icon tb-link"></button>
<button type="button" class="btn tb-icon tb-horizontalrule"></button>
</div>
</div>
<div class="layout-cell toolbar-item width-fix">
<button type="button" class="btn oc-icon-eye"></button>
<button type="button" class="btn oc-icon-expand"></button>
</div>
</div>
</div>
<ul class="editor-toolbar">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="md-icon md-formatting" rel="formatting" tabindex="-1"></a>
<ul class="dropdown-menu" data-dropdown-title="Formatting">
<li><a href="#" rel="quote" tabindex="-1" class="oc-icon-quote-right">Quote</a></li>
<li><a href="#" rel="code" tabindex="-1" class="oc-icon-code">Code</a></li>
<li><a href="#" rel="header1" tabindex="-1" class="oc-icon-header">Header 1</a></li>
<li><a href="#" rel="header2" tabindex="-1" class="oc-icon-header">Header 2</a></li>
<li><a href="#" rel="header3" tabindex="-1" class="oc-icon-header">Header 3</a></li>
<li><a href="#" rel="header4" tabindex="-1" class="oc-icon-header">Header 4</a></li>
<li><a href="#" rel="header5" tabindex="-1" class="oc-icon-header">Header 5</a></li>
<li><a href="#" rel="header6" tabindex="-1" class="oc-icon-header">Header 6</a></li>
</ul>
</li>
<li><a href="#" class="md-icon md-bold" rel="bold" tabindex="-1"></a></li>
<li><a href="#" class="md-icon md-italic" rel="italic" tabindex="-1"></a></li>
<li><a href="#" class="md-icon md-unorderedlist" rel="unorderedlist" tabindex="-1"></a></li>
<li><a href="#" class="md-icon md-orderedlist" rel="orderedlist" tabindex="-1"></a></li>
<li><a href="#" class="md-icon md-link" rel="link" tabindex="-1"></a></li>
<li><a href="#" class="md-icon md-horizontalrule" rel="horizontalrule" tabindex="-1"></a></li>
<li class="editor-btn-right"><a href="#" class="md-icon md-fullscreen editor-btn-fullscreen" rel="fullscreen" tabindex="-1"></a></li>
<li class="editor-btn-right"><a href="#" class="oc-button oc-icon-eye editor-btn-preview" rel="preview" tabindex="-1"></a></li>
</ul>
-->
<div class="editor-write">
<textarea name="<?= $name ?>" id="<?= $this->getId('textarea') ?>"><?= e($value) ?></textarea>
</div>

4
modules/system/assets/ui/js/dropdown.js
View File

@ -127,11 +127,11 @@
$target = $(eventData.relatedTarget)
fixDropdownPosition()
$(window).on('scroll.oc.dropdown', fixDropdownPosition)
$(window).on('scroll.oc.dropdown, resize.oc.dropdown', fixDropdownPosition)
})
$(document).on('hidden.bs.dropdown', '.dropdown.dropdown-fixed', function() {
$(window).off('scroll.oc.dropdown', fixDropdownPosition)
$(window).off('scroll.oc.dropdown, resize.oc.dropdown', fixDropdownPosition)
})
}(window.jQuery);

29
modules/system/assets/ui/less/toolbar.less
View File

@ -10,7 +10,12 @@
// Toolbars
// --------------------------------------------------
@color-scroll-indicator: #bbbbbb;
@color-scroll-indicator: #bbbbbb;
@color-toolbar-editor-bg: #dddddd;
@color-toolbar-editor-btn-color: #404040;
@color-toolbar-editor-btn-bg-hover: #999999;
@color-toolbar-editor-btn-bg-active: #404040;
@color-toolbar-editor-btn-color-hover: #ffffff;
//
// Toolbars
@ -110,18 +115,11 @@
}
}
@color-toolbar-editor-bg: #dddddd;
@color-toolbar-editor-btn-color: #404040;
@color-toolbar-editor-btn-bg-hover: #999999;
@color-toolbar-editor-btn-bg-active: #404040;
@color-toolbar-editor-btn-color-hover: #ffffff;
//
// Editor toolbar
// --------------------------------------------------
.control-toolbar.edita-toolbar {
.control-toolbar.editor-toolbar {
padding: 0;
background: @color-toolbar-editor-bg;
.border-bottom-radius(0);
@ -131,6 +129,7 @@
margin: 0;
padding: 0;
}
.btn {
text-align: center;
height: 40px;
@ -155,6 +154,17 @@
background-color: @color-toolbar-editor-btn-bg-active;
color: @color-toolbar-editor-btn-color-hover;
}
&.disabled,
&[disabled] {
opacity: .3;
}
}
.dropdown.open {
.btn {
background-color: @color-toolbar-editor-btn-bg-active;
color: @color-toolbar-editor-btn-color-hover;
}
}
.btn[class^="oc-icon-"],
@ -164,7 +174,6 @@
}
}
}
}
//

4
modules/system/assets/ui/storm-min.js vendored
View File

@ -1405,8 +1405,8 @@ $(document).on('shown.bs.dropdown','.dropdown.dropdown-fixed',function(event,eve
$dropdown=$('.dropdown-menu',$container)
$target=$(eventData.relatedTarget)
fixDropdownPosition()
$(window).on('scroll.oc.dropdown',fixDropdownPosition)})
$(document).on('hidden.bs.dropdown','.dropdown.dropdown-fixed',function(){$(window).off('scroll.oc.dropdown',fixDropdownPosition)})}(window.jQuery);+function($){'use strict';var dismiss='[data-dismiss="callout"]'
$(window).on('scroll.oc.dropdown, resize.oc.dropdown',fixDropdownPosition)})
$(document).on('hidden.bs.dropdown','.dropdown.dropdown-fixed',function(){$(window).off('scroll.oc.dropdown, resize.oc.dropdown',fixDropdownPosition)})}(window.jQuery);+function($){'use strict';var dismiss='[data-dismiss="callout"]'
var Callout=function(el){$(el).on('click',dismiss,this.close)}
Callout.prototype.close=function(e){var $this=$(this)
var selector=$this.attr('data-target')

16
modules/system/assets/ui/storm.css
View File

File diff suppressed because one or more lines are too long