li {
- position: relative;
-
- span.expand {
- display: none;
- }
+ .transition(width 1s);
> div {
- font-size: 14px;
+ font-size: 13px;
font-weight: 600;
color: @color-treeview-item-title;
background: @color-treeview-item-bg;
- margin-bottom: 1px;
- padding: 16px 16px 15px 51px;
+ border-bottom: 1px solid @color-panel-light;
+ padding: 16px 16px 15px 61px;
position: relative;
+ cursor: pointer;
&:before {
content: ' ';
- background-image: url(../images/treeview-icons.svg);
- background-position: 0px top;
+ background-image: url(../images/treeview-icons.png);
+ background-position: 0px -28px;
background-repeat: no-repeat;
- background-size: 25px auto;
+ background-size: 42px auto;
position: absolute;
width: 21px;
- height: 26px;
- left: 18px;
+ height: 22px;
+ left: 28px;
top: 20px;
}
- > span {
+ span.comment {
display: block;
font-weight: 400;
color: @color-treeview-item-comment;
@@ -44,18 +42,91 @@
text-overflow: ellipsis;
}
- &:hover {
- background-color: @color-treeview-hover-bg;
- color: @color-treeview-hover-text;
+ > span.expand {
+ .hide-text();
+ display: none;
+ position: absolute;
+ left: 0;
+ width: 20px;
+ height: 20px;
+ top: 24px;
+ left: 2px;
+ cursor: pointer;
+ color: @color-treeview-control;
+ .transition(transform 0.1s ease);
&:before {
- background-position: 0px -65px;
- }
+ .icon(@caret-right);
+ line-height: 100%;
+ font-size: 15px;
- > span {
- color: @color-treeview-hover-text;
+ position: relative;
+ left: 8px;
+ top: 2px;
}
}
+
+ > span.drag-handle {
+ .hide-text();
+ .transition(opacity 0.4s);
+
+ position: absolute;
+ right: 10px;
+ bottom: 5px;
+ width: 14px;
+ height: 14px;
+ cursor: move;
+ color: @color-treeview-control;
+ .opacity(0);
+
+ &:before {
+ .icon(@bars);
+ font-size: 14px;
+ }
+ }
+
+ span.borders {
+ font-size: 0;
+ }
+ }
+
+ &.dragged div, > div:hover {
+ background-color: @color-treeview-hover-bg!important;
+ color: @color-treeview-hover-text!important;
+
+ &:before {
+ background-position: 0px -80px;
+ }
+
+ &:after {
+ top: 0!important;
+ bottom: 0!important;
+ }
+
+ span {
+ color: @color-treeview-hover-text!important;
+
+ &.drag-handle {
+ cursor: move;
+ .opacity(1);
+ }
+
+ &.borders {
+ display: none;
+ }
+ }
+ }
+
+ &.dragged {
+ li.has-subitems, &.has-subitems {
+ > div:before {
+ background-position: 0px -52px;
+ }
+ }
+ }
+
+ > ol {
+ padding-left: 20px;
}
&[data-status=collapsed] > ol {
@@ -65,14 +136,120 @@
&.has-subitems {
>div {
&:before {
- background-position: 0 -29px;
+ background-position: 0 0;
width: 23px;
- height: 29px;
- left: 16px;
+ height: 26px;
+ left: 26px;
}
&:hover:before {
- background-position: 0px -95px;
+ background-position: 0px -52px;
+ }
+
+ span.expand {
+ display: block;
+ }
+ }
+ }
+
+ &.placeholder {
+ height: 0;
+ position: relative;
+ border-bottom: 1px dotted #c03f31;
+
+ &:before {
+ .icon(@caret-right);
+ font-size: 23px;
+ color: white;
+ position: absolute;
+ left: -11px;
+ top: -17px;
+ z-index: 1900;
+ }
+
+ &:after {
+ .icon(@caret-right);
+ font-size: 21px;
+ color: #c03f31;
+ position: absolute;
+ left: -10px;
+ top: -14px;
+ z-index: 1901;
+ }
+ }
+
+ &.dragged {
+ position: absolute;
+ z-index: 2000;
+ // width: auto!important;
+ // height: auto!important;
+ .opacity(0.5);
+
+ > div {
+ .border-radius(3px);
+ }
+ }
+
+ &.drop-target {
+ > div {
+ background-color: #2581b8!important;
+ color: @color-treeview-hover-text;
+
+ &:before {
+ background-position: 0px -80px;
+ }
+
+ > span.comment {
+ color: @color-treeview-hover-text;
+ }
+ }
+
+ &.has-subitems > div:before {
+ background-position: 0px -52px;
+ }
+ }
+
+ &[data-status=expanded] > div > span.expand {
+ .transform( ~'rotate(90deg) translate(0, 0)' );
+ }
+
+ &.drag-ghost {
+ background-color: transparent;
+ box-sizing: content-box;
+ }
+
+ &.active {
+ > div {
+ background: @color-list-active;
+
+ &:after {
+ position: absolute;
+ width: 4px;
+ left: 0;
+ top: -1px;
+ bottom: -1px;
+ background: @color-list-active-border;
+ display: block;
+ content: ' ';
+ }
+
+ > span.comment, > span.expand {
+ color: @color-treeview-item-active-comment;
+ }
+
+ > span.borders {
+ &:before, &:after {
+ content: ' ';
+ position: absolute;
+ width: 100%;
+ height: 1px;
+ display: block;
+ left: 0;
+ background-color: @color-list-active;
+ }
+
+ &:before {top: -1px;}
+ &:after {bottom: -1px;}
}
}
}
@@ -84,10 +261,15 @@
> li {
> ol {
> li > div {
- padding-left: 71 + (@max-level - @level)*20px;
+ margin-left: -20-(@max-level - @level)*20px;
+ padding-left: 61+(@max-level - @level + 1)*10px;
&:before {
- margin-left: 20 + (@max-level - @level)*20px;
+ margin-left: (@max-level - @level + 1)*10px;
+ }
+
+ > span.expand {
+ left: 2+(@max-level - @level + 1)*10px;
}
}
@@ -100,47 +282,45 @@
}
}
-.oc-treeview-expand-control {
- .hide-text();
- position: absolute;
- width: 23px;
- height: 23px;
- border-radius: 20px;
- background: @color-treeview-item-bg;
- display: block;
- z-index: 100;
- cursor: pointer;
- .transition(opacity 0.2s);
+// Retina
+@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
+ .control-treeview {
+ ol {
+ > li {
+ > div{
+ &:before {
+ background-position: 0px -79px;
+ background-size: 21px auto;
+ }
+ }
- &.expand-hidden {
- display: none;
- }
+ &.has-subitems > div {
+ &:before {background-position: 0px -52px;}
+ &:hover:before {background-position: 0px -102px;}
+ }
- &.expand-drag-hidden {
- .opacity(0);
- }
+ &.dragged > div, &.dragged li > div, > div:hover {
+ &:before {background-position: 0px -129px;}
+ }
- &:before {
- .icon(@caret-right);
- font-size: 15px;
- position: absolute;
- left: 7px;
- top: 12px;
- color: @color-treeview-expand-icon;
- .transition(all 0.1s ease);
- }
+ &.dragged {
+ li.has-subitems, &.has-subitems {
+ > div:before {
+ background-position: 0px -102px;
+ }
+ }
+ }
- &.hover {
- background-color: @color-treeview-hover-bg;
+ &.drop-target {
+ > div:before {
+ background-position: 0px -129px;
+ }
- &:before {
- color: @color-treeview-hover-text;
- }
- }
-
- &[data-status=expanded] {
- &:before {
- .transform( ~'rotate(90deg) translate(0, 0)' );
+ &.has-subitems > div:before {
+ background-position: 0px -102px;
+ }
+ }
+ }
}
}
}
\ No newline at end of file
diff --git a/modules/backend/assets/less/core/variables.less b/modules/backend/assets/less/core/variables.less
index 81eabb46c..9162120a0 100644
--- a/modules/backend/assets/less/core/variables.less
+++ b/modules/backend/assets/less/core/variables.less
@@ -266,9 +266,10 @@
@color-treeview-item-bg: #ffffff;
@color-treeview-item-title: #2b3e50;
@color-treeview-item-comment: #95a5a6;
-@color-treeview-expand-icon: #33495f;
+@color-treeview-control: #bdc3c7;
@color-treeview-hover-bg: #58b6f7;
@color-treeview-hover-text: #ffffff;
+@color-treeview-item-active-comment: #8f8f8f;
//
// Sizes
diff --git a/modules/backend/formwidgets/richeditor/assets/css/iframe.css b/modules/backend/formwidgets/richeditor/assets/css/iframe.css
index 5d1bac335..9a6c3408d 100644
--- a/modules/backend/formwidgets/richeditor/assets/css/iframe.css
+++ b/modules/backend/formwidgets/richeditor/assets/css/iframe.css
@@ -21,6 +21,8 @@ ol,
table,
dl,
blockquote,
+td,
+th,
pre {
font-size: 14px;
line-height: 1.5rem;
@@ -158,6 +160,9 @@ h5 {
margin-bottom: 10px;
font-size: 1em;
}
+table {
+ width: 100%;
+}
body.redactor_editor_wym {
background: #f4f4f4;
diff --git a/modules/backend/formwidgets/richeditor/assets/css/richeditor.css b/modules/backend/formwidgets/richeditor/assets/css/richeditor.css
index f95f7b789..47ecf62be 100644
--- a/modules/backend/formwidgets/richeditor/assets/css/richeditor.css
+++ b/modules/backend/formwidgets/richeditor/assets/css/richeditor.css
@@ -9,7 +9,7 @@
border-radius: 5px;
}
.field-richeditor.editor-focus {
- border: 1px solid #808c8d;
+ border-color: #808c8d;
}
.field-richeditor.size-tiny textarea {
height: 20px;
@@ -42,3 +42,31 @@
.field-richeditor .redactor_box iframe {
border: none;
}
+.field-richeditor.stretch .redactor_box {
+ display: block;
+ position: relative;
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+}
+.field-richeditor.stretch .redactor_box .redactor_toolbar {
+ display: block;
+ border-bottom: none;
+ position: absolute;
+ top: 0;
+ width: 100%;
+}
+.field-richeditor.stretch .redactor_box .redactor_toolbar > li:first-child:after {
+ position: absolute;
+ content: ' ';
+ width: 100%;
+ height: 1px;
+ left: 0;
+ top: 32px;
+ background-color: #e0e0e0;
+}
+.field-richeditor.stretch .redactor_box iframe {
+ display: block;
+ position: absolute;
+ height: 100%!important;
+}
diff --git a/modules/backend/formwidgets/richeditor/assets/js/richeditor.js b/modules/backend/formwidgets/richeditor/assets/js/richeditor.js
index 6339118fc..f3294cd91 100644
--- a/modules/backend/formwidgets/richeditor/assets/js/richeditor.js
+++ b/modules/backend/formwidgets/richeditor/assets/js/richeditor.js
@@ -44,7 +44,8 @@
*/
var redactorOptions = {
focusCallback: function() { self.$el.addClass('editor-focus') },
- blurCallback: function() { self.$el.removeClass('editor-focus') }
+ blurCallback: function() { self.$el.removeClass('editor-focus') },
+ initCallback: function() { self.build() }
}
if (this.options.stylesheet) {
@@ -59,6 +60,15 @@
this.$textarea.redactor(redactorOptions)
}
+ RichEditor.prototype.build = function() {
+ if (this.$el.hasClass('stretch')) {
+ var $iframe = $('iframe', this.$el),
+ $toolbar = $('.redactor_toolbar', this.$el)
+
+ $iframe.css('padding-top', $toolbar.height())
+ }
+ }
+
// RICHEDITOR PLUGIN DEFINITION
// ============================
diff --git a/modules/backend/formwidgets/richeditor/assets/less/richeditor.less b/modules/backend/formwidgets/richeditor/assets/less/richeditor.less
index dea458577..54dc81578 100644
--- a/modules/backend/formwidgets/richeditor/assets/less/richeditor.less
+++ b/modules/backend/formwidgets/richeditor/assets/less/richeditor.less
@@ -9,7 +9,7 @@
}
&.editor-focus {
- border: 1px solid @color-form-field-border-focus;
+ border-color: @color-form-field-border-focus;
}
&.size-tiny textarea { height: (@size-tiny - @richeditor-toolbar-size); }
@@ -31,4 +31,38 @@
border: none;
}
}
+
+ &.stretch {
+ .redactor_box {
+ display: block;
+ position: relative;
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+
+ .redactor_toolbar {
+ display: block;
+ border-bottom: none;
+ position: absolute;
+ top: 0;
+ width: 100%;
+
+ > li:first-child:after {
+ position: absolute;
+ content: ' ';
+ width: 100%;
+ height: 1px;
+ left: 0;
+ top: 32px;
+ background-color: @color-form-field-border;
+ }
+ }
+
+ iframe {
+ display: block;
+ position: absolute;
+ height: 100%!important;
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/modules/backend/formwidgets/richeditor/partials/_richeditor.htm b/modules/backend/formwidgets/richeditor/partials/_richeditor.htm
index 302b2378a..20d04c351 100644
--- a/modules/backend/formwidgets/richeditor/partials/_richeditor.htm
+++ b/modules/backend/formwidgets/richeditor/partials/_richeditor.htm
@@ -3,7 +3,7 @@
data-fullpage="true"
data-control="richeditor">
diff --git a/modules/cms/classes/CmsCompoundObject.php b/modules/cms/classes/CmsCompoundObject.php
index c37c46d7f..980040c44 100644
--- a/modules/cms/classes/CmsCompoundObject.php
+++ b/modules/cms/classes/CmsCompoundObject.php
@@ -47,6 +47,8 @@ class CmsCompoundObject extends CmsObject
protected $settingsValidationMessages = [];
+ protected $viewBagCache = false;
+
/**
* Loads the object from a file.
* @param \Cms\Classes\Theme $theme Specifies the theme the object belongs to.
@@ -202,6 +204,29 @@ class CmsCompoundObject extends CmsObject
parent::save();
}
+ /**
+ * Returns the configured view bag component.
+ * This method is used only in the back-end and for internal system needs when
+ * the standard way to access components is not an option.
+ * @return \Cms\Classes\ViewBag Returns the view bag component instance.
+ */
+ public function getViewBag()
+ {
+ if ($this->viewBagCache !== false)
+ return $this->viewBagCache;
+
+ $componentName = 'viewBag';
+
+ if (!isset($this->settings['components'][$componentName]))
+ return $this->viewBagCache = null;
+
+ return $this->viewBagCache = ComponentManager::instance()->makeComponent(
+ $componentName,
+ null,
+ $this->settings['components'][$componentName]);
+ }
+
+
/**
* Parses the settings array.
* Child classes can override this method in order to update
diff --git a/modules/cms/classes/Content.php b/modules/cms/classes/Content.php
index 24fb369e6..e9f3d4e22 100644
--- a/modules/cms/classes/Content.php
+++ b/modules/cms/classes/Content.php
@@ -6,7 +6,7 @@
* @package october\cms
* @author Alexey Bobkov, Samuel Georges
*/
-class Content extends CmsObject
+class Content extends CmsCompoundObject
{
protected static $allowedExtensions = ['htm', 'txt', 'md'];
diff --git a/modules/system/traits/PropertyContainer.php b/modules/system/traits/PropertyContainer.php
index 5e9af376f..6bc0a6fe4 100644
--- a/modules/system/traits/PropertyContainer.php
+++ b/modules/system/traits/PropertyContainer.php
@@ -82,7 +82,7 @@ trait PropertyContainer
*/
public function property($name, $default = null)
{
- return isset($this->properties[$name])
+ return array_key_exists($name, $this->properties)
? $this->properties[$name]
: $default;
}