From a943708b99c22454314d7079e7c27cdca2441ac6 Mon Sep 17 00:00:00 2001 From: alekseybobkov Date: Fri, 19 Feb 2016 22:12:41 -0800 Subject: [PATCH] UI updates --- modules/backend/ServiceProvider.php | 9 +- modules/backend/assets/css/october.css | 415 +- .../backend/assets/images/dashboard-icon.svg | 20 + .../assets/less/controls/sidenav-tree.less | 107 +- .../assets/less/controls/svg-icons.less | 33 + .../backend/assets/less/core/variables.less | 14 +- .../backend/assets/less/layout/layout.less | 6 +- .../backend/assets/less/layout/mainmenu.less | 201 +- modules/backend/assets/less/october.less | 1 + modules/backend/classes/NavigationManager.php | 2 + modules/backend/controllers/Users.php | 57 +- modules/backend/formwidgets/FileUpload.php | 2 +- .../backend/formwidgets/PermissionEditor.php | 48 + .../codeeditor/assets/css/codeeditor.css | 6 +- .../fileupload/assets/css/fileupload.css | 40 +- .../assets/less/fileupload.base.less | 38 +- .../fileupload/partials/_image_single.htm | 2 +- .../assets/css/permissioneditor.css | 62 + .../assets/less/permissioneditor.less | 86 + .../partials/_permissioneditor.htm | 75 + .../richeditor/assets/css/richeditor.css | 26 +- modules/backend/lang/en/lang.php | 4 +- modules/backend/layouts/_mainmenu.htm | 10 +- modules/backend/models/user/fields.yaml | 4 +- modules/cms/ServiceProvider.php | 4 +- modules/cms/assets/images/cms-icon.svg | 27 + modules/cms/assets/images/media-icon.svg | 22 + modules/cms/lang/en/lang.php | 14 +- .../mediamanager/assets/css/mediamanager.css | 2 +- modules/system/ServiceProvider.php | 3 +- modules/system/assets/css/styles.css | 56 +- modules/system/assets/images/cog-icon.svg | 13 + modules/system/assets/ui/css/storm.css | 12131 ++++++++++++++++ modules/system/assets/ui/less/breadcrumb.less | 12 +- .../system/assets/ui/less/button.base.less | 1 + modules/system/assets/ui/less/button.less | 7 +- .../assets/ui/less/button.variables.less | 8 +- modules/system/assets/ui/less/checkbox.less | 121 +- modules/system/assets/ui/less/form.base.less | 20 +- modules/system/assets/ui/less/form.less | 28 +- .../system/assets/ui/less/form.variables.less | 13 +- .../assets/ui/less/global.variables.less | 8 +- modules/system/assets/ui/less/tab.less | 92 +- modules/system/assets/ui/less/toolbar.less | 2 +- modules/system/assets/ui/storm-min.js | 7 +- modules/system/assets/ui/storm.css | 353 +- 46 files changed, 13499 insertions(+), 713 deletions(-) create mode 100644 modules/backend/assets/images/dashboard-icon.svg create mode 100644 modules/backend/assets/less/controls/svg-icons.less create mode 100644 modules/backend/formwidgets/PermissionEditor.php create mode 100644 modules/backend/formwidgets/permissioneditor/assets/css/permissioneditor.css create mode 100644 modules/backend/formwidgets/permissioneditor/assets/less/permissioneditor.less create mode 100644 modules/backend/formwidgets/permissioneditor/partials/_permissioneditor.htm create mode 100644 modules/cms/assets/images/cms-icon.svg create mode 100644 modules/cms/assets/images/media-icon.svg create mode 100644 modules/system/assets/images/cog-icon.svg create mode 100644 modules/system/assets/ui/css/storm.css diff --git a/modules/backend/ServiceProvider.php b/modules/backend/ServiceProvider.php index ba410e9cb..464a371d5 100644 --- a/modules/backend/ServiceProvider.php +++ b/modules/backend/ServiceProvider.php @@ -66,13 +66,13 @@ class ServiceProvider extends ModuleServiceProvider protected function registerAssetBundles() { CombineAssets::registerCallback(function($combiner) { - $combiner->registerBundle('~/modules/backend/assets/less/october.less'); + // $combiner->registerBundle('~/modules/backend/assets/less/october.less'); $combiner->registerBundle('~/modules/backend/assets/js/october.js'); $combiner->registerBundle('~/modules/backend/widgets/table/assets/js/build.js'); - $combiner->registerBundle('~/modules/backend/formwidgets/datepicker/assets/js/build.js'); - $combiner->registerBundle('~/modules/backend/formwidgets/richeditor/assets/less/richeditor.less'); + // $combiner->registerBundle('~/modules/backend/formwidgets/datepicker/assets/js/build.js'); + // $combiner->registerBundle('~/modules/backend/formwidgets/richeditor/assets/less/richeditor.less'); $combiner->registerBundle('~/modules/backend/formwidgets/richeditor/assets/js/build.js'); - $combiner->registerBundle('~/modules/backend/formwidgets/codeeditor/assets/less/codeeditor.less'); + // $combiner->registerBundle('~/modules/backend/formwidgets/codeeditor/assets/less/codeeditor.less'); $combiner->registerBundle('~/modules/backend/formwidgets/codeeditor/assets/js/build.js'); $combiner->registerBundle('~/modules/backend/formwidgets/fileupload/assets/less/fileupload.less'); }); @@ -88,6 +88,7 @@ class ServiceProvider extends ModuleServiceProvider 'dashboard' => [ 'label' => 'backend::lang.dashboard.menu_label', 'icon' => 'icon-dashboard', + 'iconSvg' => 'modules/backend/assets/images/dashboard-icon.svg', 'url' => Backend::url('backend'), 'permissions' => ['backend.access_dashboard'], 'order' => 1 diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css index ef77339d5..8af167d9b 100644 --- a/modules/backend/assets/css/october.css +++ b/modules/backend/assets/css/october.css @@ -533,7 +533,7 @@ background-repeat: no-repeat; } .sweet-alert .btn-default:focus { - border-color: #e3e3e3; + border-color: #bdc3c7; outline: 0; } .sweet-alert .btn-success:focus { @@ -801,9 +801,9 @@ font-size: 12px; text-align: center; font-weight: 400; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; } .control-filelist ul { padding: 0; @@ -1217,9 +1217,9 @@ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; } .report-widget h3 { font-size: 14px; @@ -2001,14 +2001,23 @@ } } .sidenav-tree { - width: 280px; - background: #34495e; + width: 300px; + background: #31495f; } .sidenav-tree .control-toolbar { - padding: 20px 0 20px 20px; + padding: 0; +} +.sidenav-tree .control-toolbar .toolbar-item { + display: block; } .sidenav-tree .control-toolbar input.form-control { border: none; + outline: none; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: inset -5px 0 3px rgba(0, 0, 0, 0.1); + box-shadow: inset -5px 0 3px rgba(0, 0, 0, 0.1); } .sidenav-tree ul { padding: 0; @@ -2019,33 +2028,46 @@ background: #2b3e50!important; } .sidenav-tree ul.top-level > li[data-status=collapsed] > div.group h3:before { - -webkit-transform: rotate(0deg) translate(3px, 0); - -ms-transform: rotate(0deg) translate(3px, 0); - transform: rotate(0deg) translate(3px, 0); + -webkit-transform: rotate(0deg) translate(2px, -2px); + -ms-transform: rotate(0deg) translate(2px, -2px); + transform: rotate(0deg) translate(2px, -2px); +} +.sidenav-tree ul.top-level > li[data-status=collapsed] > div.group h3:after { + display: none; } .sidenav-tree ul.top-level > li[data-status=collapsed] ul { display: none; } +.sidenav-tree ul.top-level > li > div.group { + position: relative; +} +.sidenav-tree ul.top-level > li > div.group:after { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 10px; + height: 100%; + -webkit-box-shadow: inset -5px 0 3px rgba(0, 0, 0, 0.1); + box-shadow: inset -5px 0 3px rgba(0, 0, 0, 0.1); +} .sidenav-tree ul.top-level > li > div.group h3 { - background: #2b3e50; + background: #2a3e51; color: #ecf0f1; text-transform: uppercase; - font-size: 14px; - padding: 15px 15px 15px 33px; + font-size: 16px; + padding: 22px 15px 21px 40px; margin: 0; position: relative; cursor: pointer; } .sidenav-tree ul.top-level > li > div.group h3:before { - width: 10px; - height: 10px; display: block; position: absolute; - top: 1px; -} -.sidenav-tree ul.top-level > li > div.group h3:before { - left: 13px; - top: 15px; + width: 10px; + height: 10px; + left: 16px; + top: 21px; color: #cfcfcf; font-family: FontAwesome; font-weight: normal; @@ -2053,69 +2075,84 @@ text-decoration: inherit; -webkit-font-smoothing: antialiased; *margin-right: .3em; - content: "\f0da"; - -webkit-transform: rotate(90deg) translate(5px, 0); - -ms-transform: rotate(90deg) translate(5px, 0); - transform: rotate(90deg) translate(5px, 0); + content: "\f105"; + -webkit-transform: rotate(90deg) translate(5px, -3px); + -ms-transform: rotate(90deg) translate(5px, -3px); + transform: rotate(90deg) translate(5px, -3px); -webkit-transition: all 0.1s ease; transition: all 0.1s ease; + font-size: 16px; +} +.sidenav-tree ul.top-level > li > div.group h3:after { + content: ''; + display: block; + width: 0; + height: 0; + border-left: 7.5px solid transparent; + border-right: 7.5px solid transparent; + border-top: 8px solid #2a3e51; + border-bottom-width: 0; + position: absolute; + left: 15px; + bottom: -8px; + z-index: 101; } .sidenav-tree ul.top-level > li > ul li a { display: block; position: relative; - padding: 15px 15px 15px 40px; - background: #3d5265; - margin-bottom: 1px; - color: rgba(255, 255, 255, 0.26); + padding: 25px 25px 25px 60px; + background: transparent; + border-bottom: 1px solid #2a3e51; + color: #ffffff; text-decoration: none!important; } +.sidenav-tree ul.top-level > li > ul li a:after { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 10px; + height: 100%; + -webkit-box-shadow: inset -5px 0 3px rgba(0, 0, 0, 0.1); + box-shadow: inset -5px 0 3px rgba(0, 0, 0, 0.1); +} .sidenav-tree ul.top-level > li > ul li a:hover { text-decoration: none; } .sidenav-tree ul.top-level > li > ul li a i { position: absolute; - left: 15px; - top: 17px; - font-size: 16px; + left: 20px; + top: 24px; + font-size: 22px; } .sidenav-tree ul.top-level > li > ul li a span { display: block; line-height: 150%; } .sidenav-tree ul.top-level > li > ul li a span.header { - color: rgba(255, 255, 255, 0.74); - font-size: 14px; + color: #ffffff; + font-size: 16px; margin-bottom: 5px; } .sidenav-tree ul.top-level > li > ul li a span.description { - color: rgba(255, 255, 255, 0.64); - font-size: 12px; - font-weight: 100; + color: #bdc3c7; + font-size: 15px; } -.sidenav-tree ul.top-level > li > ul li.active a { - background: #34495e; +.sidenav-tree ul.top-level > li > ul li.active a, +.sidenav-tree ul.top-level > li > ul li:hover a { + background: #1f99dc; color: rgba(255, 255, 255, 0.91); } -.sidenav-tree ul.top-level > li > ul li.active a:before { - content: ' '; - position: absolute; - width: 4px; - background: #e67e22; - left: 0; - top: 0; - height: 100%; -} -.sidenav-tree ul.top-level > li > ul li.active a span.header { +.sidenav-tree ul.top-level > li > ul li.active a span.header, +.sidenav-tree ul.top-level > li > ul li:hover a span.header { color: #ffffff; } -.sidenav-tree ul.top-level > li > ul li.active a span.description { +.sidenav-tree ul.top-level > li > ul li.active a span.description, +.sidenav-tree ul.top-level > li > ul li:hover a span.description { color: rgba(255, 255, 255, 0.91); } .sidenav-tree ul.top-level > li > ul li:last-child a { - margin-bottom: 0; -} -.sidenav-tree ul.top-level > li > ul li:hover a { - background-color: #34495e; + border-bottom: none; } .sidenav-tree .back-link { display: none; @@ -2437,6 +2474,25 @@ div.control-scrollpad[data-direction=horizontal] > .scrollpad-scrollbar .drag-ha .autocomplete.dropdown-menu li a { padding: 3px 12px; } +.svg-icon-container img.svg-icon { + display: none; +} +.svg-icon-container.svg-active-effects img.svg-icon { + -webkit-filter: grayscale(100%); + filter: grayscale(100%); + opacity: 0.6; + filter: alpha(opacity=60); +} +.svg-icon-container.svg-active-effects:hover img.svg-icon, +.svg-icon-container.svg-active-effects.active img.svg-icon { + -webkit-filter: none; + filter: none; + opacity: 1; + filter: alpha(opacity=100); +} +html.svg .svg-icon-container i.svg-replace { + display: none; +} @-webkit-keyframes fadeIn { 0% { opacity: 0; @@ -2746,8 +2802,8 @@ body { .control-tabs.primary-tabs > ul.nav-tabs, .control-tabs.primary-tabs > div > ul.nav-tabs, .control-tabs.primary-tabs > div > div > ul.nav-tabs { - margin-left: -20px; - margin-right: -20px; + margin-left: -35px; + margin-right: -35px; } .control-tabs.primary-tabs.tabs-no-inset > ul.nav-tabs, .control-tabs.primary-tabs.tabs-no-inset > div > ul.nav-tabs, @@ -2787,7 +2843,7 @@ body { .layout > .layout-row > .layout-cell .layout-container, .layout > .layout-row > .layout-cell.padded-container, .layout > .layout-row > .layout-cell .padded-container { - padding: 20px 20px 0 20px; + padding: 35px 35px 0 35px; } .layout > .layout-row > .layout-cell.layout-container .container-flush, .layout > .layout-row > .layout-cell .layout-container .container-flush, @@ -2832,7 +2888,7 @@ body { .layout > .layout-row > .layout-cell .layout-container, .layout > .layout-row > .layout-cell.padded-container, .layout > .layout-row > .layout-cell .padded-container { - padding: 20px 20px 0 20px; + padding: 35px 35px 0 35px; } .layout > .layout-row > .layout-cell.layout-container .container-flush, .layout > .layout-row > .layout-cell .layout-container .container-flush, @@ -2885,7 +2941,7 @@ body { .layout > .layout-cell .layout-container, .layout > .layout-cell.padded-container, .layout > .layout-cell .padded-container { - padding: 20px 20px 0 20px; + padding: 35px 35px 0 35px; } .layout > .layout-cell.layout-container .container-flush, .layout > .layout-cell .layout-container .container-flush, @@ -3070,20 +3126,20 @@ body.slim-container .layout .layout-container { body.mainmenu-open { overflow: hidden; } -nav#layout-mainmenu.navbar { +nav#layout-mainmenu { background-color: #111111; padding: 0 0 0 20px; line-height: 0; white-space: nowrap; vertical-align: top; } -nav#layout-mainmenu.navbar a { +nav#layout-mainmenu a { text-decoration: none; } -nav#layout-mainmenu.navbar a:focus { +nav#layout-mainmenu a:focus { background: transparent; } -nav#layout-mainmenu.navbar ul { +nav#layout-mainmenu ul { margin: 0; padding: 0; list-style: none; @@ -3091,95 +3147,165 @@ nav#layout-mainmenu.navbar ul { white-space: nowrap; overflow: hidden; } -nav#layout-mainmenu.navbar ul li { +nav#layout-mainmenu ul li { color: #555555; display: inline-block; vertical-align: top; margin-right: 30px; position: relative; } -nav#layout-mainmenu.navbar ul li:last-child { +nav#layout-mainmenu ul li a { + padding: 19px 0 15px; + display: inline-block; + font-size: 16px; + color: inherit; + outline: none; +} +nav#layout-mainmenu ul li a:hover { + background-color: transparent !important; +} +nav#layout-mainmenu ul li a:active, +nav#layout-mainmenu ul li a:focus { + text-decoration: none; + color: #555555; +} +nav#layout-mainmenu ul li a i { + position: relative; + top: -2px; + line-height: 1; + font-size: 35px; + vertical-align: middle; + margin-right: 10px; +} +nav#layout-mainmenu ul li a i { + font-size: 30px; +} +nav#layout-mainmenu ul li a img.svg-icon { + height: 30px; + width: 30px; + margin-right: 10px; + position: relative; + top: 0; +} +nav#layout-mainmenu ul li:last-child { margin-right: 0; } -nav#layout-mainmenu.navbar ul li.active:after { +nav#layout-mainmenu ul li.active:after { content: ' '; position: absolute; bottom: 0; left: 50%; margin-left: -8.5px; } -nav#layout-mainmenu.navbar ul li.icon { +nav#layout-mainmenu ul li.active a { + font-size: 18px; + padding-top: 13px; + padding-bottom: 8px; +} +nav#layout-mainmenu ul li.active a i { + font-size: 40px; +} +nav#layout-mainmenu ul li.active a img.svg-icon { + height: 40px; + width: 40px; +} +nav#layout-mainmenu ul li.icon { margin-right: 0; } -nav#layout-mainmenu.navbar ul li.icon i { +nav#layout-mainmenu ul li.icon i { margin-right: 0; } -nav#layout-mainmenu.navbar ul li.icon a { +nav#layout-mainmenu ul li.icon a { padding: 14px; } -nav#layout-mainmenu.navbar ul li.power-off i, -nav#layout-mainmenu.navbar ul li.preview i { +nav#layout-mainmenu ul li.power-off i, +nav#layout-mainmenu ul li.preview i { font-size: 20px; } -nav#layout-mainmenu.navbar ul li.power-off a, -nav#layout-mainmenu.navbar ul li.preview a { +nav#layout-mainmenu ul li.power-off a, +nav#layout-mainmenu ul li.preview a { padding: 25px 10px 19px 21px; } -nav#layout-mainmenu.navbar ul li.account { +nav#layout-mainmenu ul li.account { margin-right: 0; } -nav#layout-mainmenu.navbar ul li.account > a { - padding: 20px 20px 9px 10px; +nav#layout-mainmenu ul li.account > a { + padding: 16px 20px 13px 10px; font-size: 18px; position: relative; z-index: 590; } -nav#layout-mainmenu.navbar ul li.account img { +nav#layout-mainmenu ul li.account img { width: 35px; margin-right: 15px; position: relative; - top: -4px; + top: -1px; } -nav#layout-mainmenu.navbar ul li.account ul { +nav#layout-mainmenu ul li.account ul { line-height: 23px; } -nav#layout-mainmenu.navbar ul.nav { +nav#layout-mainmenu ul.nav { display: inline-block; } -nav#layout-mainmenu.navbar .menu-toggle { +nav#layout-mainmenu .menu-toggle { + padding: 19px 0 15px; + display: inline-block; + font-size: 16px; + color: inherit; + outline: none; display: none; } -nav#layout-mainmenu.navbar .toolbar-item { +nav#layout-mainmenu .menu-toggle:hover { + background-color: transparent !important; +} +nav#layout-mainmenu .menu-toggle:active, +nav#layout-mainmenu .menu-toggle:focus { + text-decoration: none; + color: #555555; +} +nav#layout-mainmenu .menu-toggle i { + position: relative; + top: -2px; + line-height: 1; + font-size: 35px; + vertical-align: middle; + margin-right: 10px; +} +nav#layout-mainmenu .toolbar-item { padding-right: 0; } -nav#layout-mainmenu.navbar .toolbar-item:before, -nav#layout-mainmenu.navbar .toolbar-item:after { +nav#layout-mainmenu .toolbar-item:before, +nav#layout-mainmenu .toolbar-item:after { margin-top: 0; } -nav#layout-mainmenu.navbar .toolbar-item:before { +nav#layout-mainmenu .toolbar-item:before { left: -12px; } -nav#layout-mainmenu.navbar .toolbar-item:after { +nav#layout-mainmenu .toolbar-item:after { right: -12px; } -nav#layout-mainmenu.navbar .toolbar-item.scroll-active-before:before { +nav#layout-mainmenu .toolbar-item.scroll-active-before:before { color: #ffffff; } -nav#layout-mainmenu.navbar .toolbar-item.scroll-active-after:after { +nav#layout-mainmenu .toolbar-item.scroll-active-after:after { color: #ffffff; } -nav#layout-mainmenu.navbar ul li .mainmenu-accountmenu { +html.svg nav#layout-mainmenu img.svg-icon, +html.svg .mainmenu-collapsed img.svg-icon { + display: inline-block; +} +nav#layout-mainmenu ul li .mainmenu-accountmenu { position: fixed; - top: 61px; + top: 64px; right: 0; background: #2b3e50; z-index: 590; display: none; } -nav#layout-mainmenu.navbar ul li .mainmenu-accountmenu.active { +nav#layout-mainmenu ul li .mainmenu-accountmenu.active { display: block; } -nav#layout-mainmenu.navbar ul li .mainmenu-accountmenu:after { +nav#layout-mainmenu ul li .mainmenu-accountmenu:after { content: ''; display: block; width: 0; @@ -3191,84 +3317,35 @@ nav#layout-mainmenu.navbar ul li .mainmenu-accountmenu:after { top: -12px; position: absolute; } -nav#layout-mainmenu.navbar ul li .mainmenu-accountmenu ul { +nav#layout-mainmenu ul li .mainmenu-accountmenu ul { float: none; display: block; } -nav#layout-mainmenu.navbar ul li .mainmenu-accountmenu li { +nav#layout-mainmenu ul li .mainmenu-accountmenu li { padding: 0; margin: 0; font-weight: normal; text-align: left; display: block; } -nav#layout-mainmenu.navbar ul li .mainmenu-accountmenu li a { +nav#layout-mainmenu ul li .mainmenu-accountmenu li a { display: block; padding: 12px 30px; text-align: left; } -nav#layout-mainmenu.navbar ul li .mainmenu-accountmenu li:hover { +nav#layout-mainmenu ul li .mainmenu-accountmenu li:hover { background: #3d5265!important; } -nav#layout-mainmenu.navbar ul li .mainmenu-accountmenu li.divider { +nav#layout-mainmenu ul li .mainmenu-accountmenu li.divider { height: 1px; width: 100%; background-color: #4b6372; } @media (max-width: 768px) { - nav#layout-mainmenu.navbar ul li .mainmenu-accountmenu:after { + nav#layout-mainmenu ul li .mainmenu-accountmenu:after { right: 71px; } } -nav#layout-mainmenu.navbar ul li a, -nav#layout-mainmenu .menu-toggle, -.mainmenu-collapsed li a { - padding: 19px 0 15px; - display: inline-block; - font-size: 16px; - color: inherit; - outline: none; -} -nav#layout-mainmenu.navbar ul li a:hover, -nav#layout-mainmenu .menu-toggle:hover, -.mainmenu-collapsed li a:hover { - background-color: transparent !important; -} -nav#layout-mainmenu.navbar ul li a:active, -nav#layout-mainmenu .menu-toggle:active, -.mainmenu-collapsed li a:active, -nav#layout-mainmenu.navbar ul li a:focus, -nav#layout-mainmenu .menu-toggle:focus, -.mainmenu-collapsed li a:focus { - text-decoration: none; - color: #555555; -} -nav#layout-mainmenu.navbar ul li a i, -nav#layout-mainmenu .menu-toggle i, -.mainmenu-collapsed li a i { - position: relative; - top: -2px; - line-height: 1; - font-size: 35px; - vertical-align: middle; - margin-right: 10px; -} -nav#layout-mainmenu.navbar ul li a i { - font-size: 30px; -} -nav#layout-mainmenu.navbar ul li.active a { - font-size: 18px; - padding-top: 16px; - padding-bottom: 13px; -} -nav#layout-mainmenu.navbar ul li.active a i { - font-size: 35px; -} -.mainmenu-collapsed li a i { - width: 40px; - text-align: left; - display: inline-block; -} nav#layout-mainmenu.navbar ul li:hover a:active, .mainmenu-collapsed li:hover a:active, nav#layout-mainmenu.navbar ul li:hover a:focus, @@ -3333,12 +3410,48 @@ body.drag .mainmenu-collapsed ul li:hover { color: #555555; } .mainmenu-collapsed > div ul li a { + padding: 19px 0 15px; + display: inline-block; + font-size: 16px; + color: inherit; + outline: none; white-space: nowrap; display: block; padding: 15px 20px; } .mainmenu-collapsed > div ul li a:hover { + background-color: transparent !important; + } + .mainmenu-collapsed > div ul li a:active, + .mainmenu-collapsed > div ul li a:focus { text-decoration: none; + color: #555555; + } + .mainmenu-collapsed > div ul li a i { + position: relative; + top: -2px; + line-height: 1; + font-size: 35px; + vertical-align: middle; + margin-right: 10px; + } + .mainmenu-collapsed > div ul li a:hover { + text-decoration: none; + } + .mainmenu-collapsed > div ul li a img.svg-icon { + margin-right: 10px; + position: relative; + top: -3px; + width: 30px; + height: 30px; + } + .mainmenu-collapsed > div ul li a i { + width: 40px; + text-align: left; + display: inline-block; + } + .mainmenu-collapsed > div ul li.active a { + padding: 9px 20px 11px 20px; } .mainmenu-collapsed .scroll-marker { position: absolute; @@ -3395,7 +3508,7 @@ body.mainmenu-open .mainmenu-collapsed ul { } } #layout-sidenav { - background-color: #34495e; + background-color: #31495f; position: absolute; height: 100%; width: 100%; @@ -4400,7 +4513,7 @@ html.csstransitions body.outer.preload .outer-form-container { } .fancy-layout .field-richeditor { border: none; - border-left: 1px solid #e0e0e0 !important; + border-left: 1px solid #bdc3c7 !important; } .fancy-layout .field-richeditor, .fancy-layout .field-richeditor .redactor_box, diff --git a/modules/backend/assets/images/dashboard-icon.svg b/modules/backend/assets/images/dashboard-icon.svg new file mode 100644 index 000000000..bf6976e2b --- /dev/null +++ b/modules/backend/assets/images/dashboard-icon.svg @@ -0,0 +1,20 @@ + + + + dashboard-icon + Created with Sketch. + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/modules/backend/assets/less/controls/sidenav-tree.less b/modules/backend/assets/less/controls/sidenav-tree.less index 52fc0600a..458c42ea8 100644 --- a/modules/backend/assets/less/controls/sidenav-tree.less +++ b/modules/backend/assets/less/controls/sidenav-tree.less @@ -1,12 +1,31 @@ +.sidenav-tree-shadow-element() { + content: ''; + position: absolute; + height: 100%; + top: 0; + right: 0; + width: 10px; + height: 100%; + .box-shadow(inset -5px 0 3px rgba(0,0,0,0.1)); +} + .sidenav-tree { - width: 280px; + width: 300px; background: @color-sidebarnav-bg; .control-toolbar { - padding: 20px 0 20px 20px; + padding: 0; + + .toolbar-item { + display: block; + } input.form-control { border: none; + outline: none; + + .border-radius(0); + .box-shadow(inset -5px 0 3px rgba(0,0,0,0.1)); } } @@ -22,8 +41,16 @@ ul.top-level > li { &[data-status=collapsed] { - > div.group h3:before { - .transform(~'rotate(0deg) translate(3px, 0)'); + > div.group { + h3 { + &:before { + .transform(~'rotate(0deg) translate(2px, -2px)'); + } + + &:after { + display: none; + } + } } ul { @@ -32,31 +59,42 @@ } > div.group { + position: relative; + + &:after { + .sidenav-tree-shadow-element(); + } + h3 { background: @color-sidebarnav-tree-group-bg; color: @color-sidebarnav-tree-group; text-transform: uppercase; - font-size: 14px; - padding: 15px 15px 15px 33px; + font-size: 16px; + padding: 22px 15px 21px 40px; margin: 0; position: relative; cursor: pointer; &:before { - width: 10px; - height: 10px; display: block; position: absolute; - top: 1px; + width: 10px; + height: 10px; + left: 16px; + top: 21px; + color: @color-list-arrow; + .icon(@angle-right); + .transform(~'rotate(90deg) translate(5px, -3px)'); + .transition(all 0.1s ease); + font-size: 16px; } - &:before { - left: 13px; - top: 15px; - color: @color-list-arrow; - .icon(@caret-right); - .transform(~'rotate(90deg) translate(5px, 0)'); - .transition(all 0.1s ease); + &:after { + .triangle(down, 15px, 8px, @color-sidebarnav-tree-group-bg); + position: absolute; + left: 15px; + bottom: -8px; + z-index: 101; } } } @@ -66,21 +104,25 @@ a { display: block; position: relative; - padding: 15px 15px 15px 40px; + padding: 25px 25px 25px 60px; background: @color-sidebarnav-tree-inactive-bg; - margin-bottom: 1px; + border-bottom: 1px solid @color-sidebarnav-tree-group-bg; color: @color-sidebarnav-tree-inactive-text; text-decoration: none!important; + &:after { + .sidenav-tree-shadow-element(); + } + &:hover { text-decoration: none; } i { position: absolute; - left: 15px; - top: 17px; - font-size: 16px; + left: 20px; + top: 24px; + font-size: 22px; } span { @@ -89,32 +131,21 @@ &.header { color: @color-sidebarnav-tree-inactive-header; - font-size: 14px; + font-size: 16px; margin-bottom: 5px; } &.description { color: @color-sidebarnav-tree-inactive-desc; - font-size: 12px; - font-weight: 100; + font-size: 15px; } } } - &.active a { + &.active a, &:hover a { background: @color-sidebarnav-tree-active-bg; color: @color-sidebarnav-tree-active-text; - &:before { - content: ' '; - position: absolute; - width: 4px; - background: @color-sidebarnav-tree-active-marker; - left: 0; - top: 0; - height: 100%; - } - span.header { color: @color-sidebarnav-tree-active-header; } @@ -125,11 +156,7 @@ } &:last-child a { - margin-bottom: 0; - } - - &:hover a { - background-color: @color-sidebarnav-tree-active-bg; + border-bottom: none; } } } diff --git a/modules/backend/assets/less/controls/svg-icons.less b/modules/backend/assets/less/controls/svg-icons.less new file mode 100644 index 000000000..6e82b8917 --- /dev/null +++ b/modules/backend/assets/less/controls/svg-icons.less @@ -0,0 +1,33 @@ +.svg-icon-container { + img.svg-icon { + // SVG icons are invisible until SVG support is detected + // with JavaScript to reduce flickering on page load. + // This should be overridden in a specific control, + // inside html.svg {} + display: none; + } + + &.svg-active-effects { + img.svg-icon { + -webkit-filter: grayscale(100%); + filter: grayscale(100%); + .opacity(0.6); + } + + &:hover, &.active { + img.svg-icon { + -webkit-filter: none; + filter: none; + .opacity(1); + } + } + } +} + +html.svg { + .svg-icon-container { + i.svg-replace { + display: none; + } + } +} diff --git a/modules/backend/assets/less/core/variables.less b/modules/backend/assets/less/core/variables.less index 08c4af0a8..eb0201180 100644 --- a/modules/backend/assets/less/core/variables.less +++ b/modules/backend/assets/less/core/variables.less @@ -29,7 +29,7 @@ @color-footer-border: #dfdfdf; @color-footer-text: #666666; -@color-sidebarnav-bg: #34495e; +@color-sidebarnav-bg: #31495F; @color-sidebarnav-active-text: #ffffff; @color-sidebarnav-active-icon: #ffffff; @color-sidebarnav-inactive-text: rgba(255,255,255,.35); @@ -38,13 +38,13 @@ @color-sidebarnav-counter-text: #ffffff; @color-sidebarnav-tree-group: #ecf0f1; -@color-sidebarnav-tree-group-bg: #2b3e50; -@color-sidebarnav-tree-inactive-header: rgba(255,255,255,.74); -@color-sidebarnav-tree-inactive-desc: rgba(255,255,255,.64); -@color-sidebarnav-tree-inactive-text: rgba(255,255,255,.26); +@color-sidebarnav-tree-group-bg: #2A3E51; +@color-sidebarnav-tree-inactive-header: #ffffff; +@color-sidebarnav-tree-inactive-desc: #BDC3C7; +@color-sidebarnav-tree-inactive-text: #ffffff; @color-sidebarnav-tree-active-header: #ffffff; -@color-sidebarnav-tree-inactive-bg: #3d5265; -@color-sidebarnav-tree-active-bg: #34495e; +@color-sidebarnav-tree-inactive-bg: transparent; +@color-sidebarnav-tree-active-bg: #1F99DC; @color-sidebarnav-tree-active-text: rgba(255,255,255,.91); @color-sidebarnav-tree-active-marker: #e67e22; @color-sidebarnav-back-link-bg: #2b3e50; diff --git a/modules/backend/assets/less/layout/layout.less b/modules/backend/assets/less/layout/layout.less index da8c8491e..7bc367fcd 100644 --- a/modules/backend/assets/less/layout/layout.less +++ b/modules/backend/assets/less/layout/layout.less @@ -50,8 +50,8 @@ body { .control-tabs.primary-tabs { > ul.nav-tabs, > div > ul.nav-tabs, > div > div > ul.nav-tabs { - margin-left: -20px; - margin-right: -20px; + margin-left: -35px; + margin-right: -35px; } &.tabs-no-inset { @@ -78,7 +78,7 @@ body { &.width-300 { width: 300px; } &.layout-container, .layout-container, &.padded-container, .padded-container { - padding: 20px 20px 0 20px; + padding: 35px 35px 0 35px; // Container to sit flush to the element above .container-flush { diff --git a/modules/backend/assets/less/layout/mainmenu.less b/modules/backend/assets/less/layout/mainmenu.less index 3682a49e4..3d37278f2 100644 --- a/modules/backend/assets/less/layout/mainmenu.less +++ b/modules/backend/assets/less/layout/mainmenu.less @@ -6,7 +6,33 @@ body.mainmenu-open { overflow: hidden; } -nav#layout-mainmenu.navbar { +.main-menu-item-link() { + padding: 19px 0 15px; + display: inline-block; + font-size: 16px; + color: inherit; + outline: none; + + &:hover { + background-color: transparent !important; + } + + &:active, &:focus { + text-decoration: none; + color: @color-mainmenu-inactive; + } + + i { + position: relative; + top: -2px; + line-height: 1; + font-size: 35px; + vertical-align: middle; + margin-right: 10px; + } +} + +nav#layout-mainmenu { background-color: @color-mainmenu; padding: 0 0 0 20px; line-height: 0; @@ -35,7 +61,25 @@ nav#layout-mainmenu.navbar { margin-right: 30px; position: relative; - &:last-child { margin-right: 0; } + a { + .main-menu-item-link(); + + i { + font-size: 30px; + } + + img.svg-icon { + height: 30px; + width: 30px; + margin-right: 10px; + position: relative; + top: 0; + } + } + + &:last-child { + margin-right: 0; + } &.active { &:after { @@ -45,24 +89,50 @@ nav#layout-mainmenu.navbar { left: 50%; margin-left: -8.5px; } + + a { + font-size: 18px; + padding-top: 13px; + padding-bottom: 8px; + + i { + font-size: 40px; + } + + img.svg-icon { + height: 40px; + width: 40px; + } + } } &.icon { margin-right: 0; - i { margin-right: 0; } - a { padding: 14px; } + + i { + margin-right: 0; + } + + a { + padding: 14px; + } } &.power-off, &.preview { - i { font-size: 20px; } - a { padding: 25px 10px 19px 21px; } + i { + font-size: 20px; + } + + a { + padding: 25px 10px 19px 21px; + } } &.account { margin-right: 0; > a { - padding: 20px 20px 9px 10px; + padding: 16px 20px 13px 10px; font-size: 18px; position: relative; z-index: 590; @@ -72,7 +142,7 @@ nav#layout-mainmenu.navbar { width: 35px; margin-right: 15px; position: relative; - top: -4px; + top: -1px; } ul { @@ -81,9 +151,15 @@ nav#layout-mainmenu.navbar { } } - &.nav { display: inline-block; } + &.nav { + display: inline-block; + } + } + + .menu-toggle { + .main-menu-item-link(); + display: none; } - .menu-toggle { display: none; } .toolbar-item { padding-right: 0; @@ -91,17 +167,37 @@ nav#layout-mainmenu.navbar { &:before, &:after { margin-top: 0; } - &:before { left: -12px; } - &:after { right: -12px; } - &.scroll-active-before:before { color: @color-mainmenu-active; } - &.scroll-active-after:after { color: @color-mainmenu-active; } + &:before { + left: -12px; + } + + &:after { + right: -12px; + } + + &.scroll-active-before:before { + color: @color-mainmenu-active; + } + + &.scroll-active-after:after { + color: @color-mainmenu-active; + } } } -nav#layout-mainmenu.navbar ul li .mainmenu-accountmenu { +html.svg { + nav#layout-mainmenu, + .mainmenu-collapsed { + img.svg-icon { + display: inline-block; + } + } +} + +nav#layout-mainmenu ul li .mainmenu-accountmenu { position: fixed; - top: 61px; + top: 64px; right: 0; background: @color-accountmenu-bg; z-index: 590; @@ -154,57 +250,6 @@ nav#layout-mainmenu.navbar ul li .mainmenu-accountmenu { } } -nav#layout-mainmenu.navbar ul li a, -nav#layout-mainmenu .menu-toggle, -.mainmenu-collapsed li a { - padding: 19px 0 15px; - display: inline-block; - font-size: 16px; - color: inherit; - outline: none; - - &:hover { - background-color: transparent !important; - } - - &:active, &:focus { - text-decoration: none; - color: @color-mainmenu-inactive; - } - - i { - position: relative; - top: -2px; - line-height: 1; - font-size: 35px; - vertical-align: middle; - margin-right: 10px; - } -} - -nav#layout-mainmenu.navbar ul li { - a { - i { - font-size: 30px; - } - } - &.active a { - font-size: 18px; - padding-top: 16px; - padding-bottom: 13px; - - i { - font-size: 35px; - } - } -} - -.mainmenu-collapsed li a i { - width: 40px; - text-align: left; - display: inline-block; -} - nav#layout-mainmenu.navbar ul li:hover, .mainmenu-collapsed li:hover { a { @@ -277,6 +322,8 @@ body.drag { color: @color-mainmenu-inactive; a { + .main-menu-item-link(); + white-space: nowrap; display: block; padding: 15px 20px; @@ -284,6 +331,24 @@ body.drag { &:hover { text-decoration: none; } + + img.svg-icon { + margin-right: 10px; + position: relative; + top: -3px; + width: 30px; + height: 30px; + } + + i { + width: 40px; + text-align: left; + display: inline-block; + } + } + + &.active a { + padding: 9px 20px 11px 20px; } } } @@ -303,4 +368,4 @@ body.mainmenu-open .mainmenu-collapsed ul { @media (min-width: @menu-breakpoint-min) { #layout-canvas {position: static!important;} .mainmenu-collapsed {display: none!important;} -} +} \ No newline at end of file diff --git a/modules/backend/assets/less/october.less b/modules/backend/assets/less/october.less index d5090ad21..be5dea606 100644 --- a/modules/backend/assets/less/october.less +++ b/modules/backend/assets/less/october.less @@ -36,6 +36,7 @@ @import "controls/namevaluelist.less"; @import "controls/scrollpad.less"; @import "controls/autocomplete.less"; +@import "controls/svg-icons.less"; // // October Storm UI diff --git a/modules/backend/classes/NavigationManager.php b/modules/backend/classes/NavigationManager.php index 907ec2b01..53d625b1e 100644 --- a/modules/backend/classes/NavigationManager.php +++ b/modules/backend/classes/NavigationManager.php @@ -34,6 +34,7 @@ class NavigationManager 'code' => null, 'label' => null, 'icon' => null, + 'iconSvg' => null, 'url' => null, 'permissions' => [], 'order' => 500, @@ -45,6 +46,7 @@ class NavigationManager 'label' => null, 'icon' => null, 'url' => null, + 'iconSvg' => null, 'counter' => null, 'counterLabel'=> null, 'order' => -1, diff --git a/modules/backend/controllers/Users.php b/modules/backend/controllers/Users.php index 8b68e7cf3..cc13b3c64 100644 --- a/modules/backend/controllers/Users.php +++ b/modules/backend/controllers/Users.php @@ -100,7 +100,7 @@ class Users extends Controller /* * Add permissions tab */ - $form->addTabFields($this->generatePermissionFields()); + $form->addTabFields($this->generatePermissionsField()); /* * Mark default groups @@ -114,52 +114,21 @@ class Users extends Controller } /** - * Generates an array of form fields to assign permissions provided - * by the system. + * Adds the permissions editor widget to the form. * @return array */ - protected function generatePermissionFields() + protected function generatePermissionsField() { - $permissionFields = []; - - foreach (BackendAuth::listTabbedPermissions() as $tab => $permissions) { - - $fieldName = 'permissions_'.snake_case($tab).'_section'; - $fieldConfig = [ - 'label' => $tab, - 'type' => 'section', + return [ + 'permissions' => [ 'tab' => 'backend::lang.user.permissions', - 'containerAttributes' => [ - 'data-field-collapsible' => 1 - ], - ]; - - $permissionFields[$fieldName] = $fieldConfig; - - foreach ($permissions as $permission) { - $fieldName = 'permissions['.$permission->code.']'; - $fieldConfig = [ - 'label' => $permission->label, - 'comment' => $permission->comment, - 'type' => 'balloon-selector', - 'options' => [ - 1 => 'backend::lang.user.allow', - 0 => 'backend::lang.user.inherit', - -1 => 'backend::lang.user.deny', - ], - 'trigger' => [ - 'action' => 'disable', - 'field' => 'is_superuser', - 'condition' => 'checked' - ], - 'span' => 'auto', - 'tab' => 'backend::lang.user.permissions', - ]; - - $permissionFields[$fieldName] = $fieldConfig; - } - } - - return $permissionFields; + 'type' => 'Backend\FormWidgets\PermissionEditor', + 'trigger' => [ + 'action' => 'disable', + 'field' => 'is_superuser', + 'condition' => 'checked' + ] + ] + ]; } } diff --git a/modules/backend/formwidgets/FileUpload.php b/modules/backend/formwidgets/FileUpload.php index 7bcc47601..7e6712a97 100644 --- a/modules/backend/formwidgets/FileUpload.php +++ b/modules/backend/formwidgets/FileUpload.php @@ -119,7 +119,7 @@ class FileUpload extends FormWidgetBase $this->vars['fileList'] = $fileList = $this->getFileList(); $this->vars['singleFile'] = $fileList->first(); $this->vars['displayMode'] = $this->getDisplayMode(); - $this->vars['emptyIcon'] = $this->getConfig('emptyIcon', 'icon-plus'); + $this->vars['emptyIcon'] = $this->getConfig('emptyIcon', 'icon-upload'); $this->vars['imageHeight'] = $this->imageHeight; $this->vars['imageWidth'] = $this->imageWidth; $this->vars['acceptedFileTypes'] = $this->getAcceptedFileTypes(true); diff --git a/modules/backend/formwidgets/PermissionEditor.php b/modules/backend/formwidgets/PermissionEditor.php new file mode 100644 index 000000000..4947ffdc2 --- /dev/null +++ b/modules/backend/formwidgets/PermissionEditor.php @@ -0,0 +1,48 @@ +prepareVars(); + return $this->makePartial('permissioneditor'); + } + + /** + * Prepares the list data + */ + public function prepareVars() + { + $this->vars['permissions'] = BackendAuth::listTabbedPermissions(); + $this->vars['baseFieldName'] = $this->formField->getName(); + $this->vars['permissionsData'] = $this->formField->getValueFromData($this->model); + } + + /** + * {@inheritDoc} + */ + protected function loadAssets() + { + $this->addCss('css/permissioneditor.css', 'core'); + } +} diff --git a/modules/backend/formwidgets/codeeditor/assets/css/codeeditor.css b/modules/backend/formwidgets/codeeditor/assets/css/codeeditor.css index 6db32c2f9..2e7ea90c1 100644 --- a/modules/backend/formwidgets/codeeditor/assets/css/codeeditor.css +++ b/modules/backend/formwidgets/codeeditor/assets/css/codeeditor.css @@ -1,12 +1,12 @@ -.field-codeeditor{width:100%;position:relative;border:2px solid #e0e0e0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px} +.field-codeeditor{width:100%;position:relative;border:2px solid #bdc3c7;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px} .field-codeeditor textarea{opacity:0;filter:alpha(opacity=0)} -.field-codeeditor.editor-focus{border:2px solid #808c8d} +.field-codeeditor.editor-focus{border:2px solid #1f99dc} .field-codeeditor.size-tiny{min-height:50px} .field-codeeditor.size-small{min-height:100px} .field-codeeditor.size-large{min-height:200px} .field-codeeditor.size-huge{min-height:250px} .field-codeeditor.size-giant{min-height:350px} -.field-codeeditor .ace_search{font-family:'Open Sans',Arial,sans-serif;font-size:14px;color:#333333;z-index:603} +.field-codeeditor .ace_search{font-family:sans-serif;font-size:14px;color:#333333;z-index:603} .field-codeeditor .editor-code{-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px} .field-codeeditor .editor-toolbar{position:absolute;top:10px;right:10px;z-index:600} .field-codeeditor .editor-toolbar > ul,.field-codeeditor .editor-toolbar ul > li{list-style-type:none;padding:0;margin:0} diff --git a/modules/backend/formwidgets/fileupload/assets/css/fileupload.css b/modules/backend/formwidgets/fileupload/assets/css/fileupload.css index 71a0bb55d..bb63377f6 100644 --- a/modules/backend/formwidgets/fileupload/assets/css/fileupload.css +++ b/modules/backend/formwidgets/fileupload/assets/css/fileupload.css @@ -4,7 +4,7 @@ .field-fileupload .upload-object .icon-container i{color:#95a5a6;display:inline-block} .field-fileupload .upload-object .icon-container div{display:table-cell;text-align:center;vertical-align:middle} .field-fileupload .upload-object .icon-container.image > div.icon-wrapper{display:none} -.field-fileupload .upload-object h4{font-weight:600;font-size:13px;color:#2b3e50;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:150%;margin:15px 0 5px 0;padding-right:0;-webkit-transition:padding 0.1s;transition:padding 0.1s;position:relative} +.field-fileupload .upload-object h4{font-size:15px;color:#2A3E51;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:150%;margin:15px 0 5px 0;padding-right:0;-webkit-transition:padding 0.1s;transition:padding 0.1s;position:relative} .field-fileupload .upload-object h4 a{position:absolute;right:0;top:0;display:none;font-weight:400} .field-fileupload .upload-object p.size{font-size:12px;color:#95a5a6} .field-fileupload .upload-object p.size strong{font-weight:400} @@ -39,16 +39,18 @@ .fileupload-config-form .file-upload-modal-image-header,.fileupload-config-form .file-upload-modal-image-header img{border-top-right-radius:2px;border-top-left-radius:2px} .fileupload-config-form .file-upload-modal-image-header .close{position:absolute;top:20px;right:20px} .field-fileupload.style-image-multi .upload-button,.field-fileupload.style-image-multi .upload-object{margin:0 10px 10px 0} -.field-fileupload.style-image-multi .upload-button{display:block;float:left;border:2px dotted rgba(0,0,0,0.1);position:relative;outline:none;width:76px;height:76px} +.field-fileupload.style-image-multi .upload-button{display:block;float:left;border:2px dashed #BDC3C7;background-clip:content-box;background-color:#F9F9F9;position:relative;outline:none;width:76px;height:76px} .field-fileupload.style-image-multi .upload-button .upload-button-icon{position:absolute;width:22px;height:22px;top:50%;left:50%;margin-top:-11px;margin-left:-11px} -.field-fileupload.style-image-multi .upload-button .upload-button-icon:before{text-align:center;display:block;font-size:22px;height:22px;width:22px;line-height:22px;color:rgba(0,0,0,0.1)} -.field-fileupload.style-image-multi .upload-button:hover{border:2px dotted rgba(0,0,0,0.2)} -.field-fileupload.style-image-multi .upload-button:hover .upload-button-icon:before{color:#31ac5f;color:rgba(0,0,0,0.2)} -.field-fileupload.style-image-multi .upload-button:focus{border:2px solid rgba(0,0,0,0.3);background:transparent} -.field-fileupload.style-image-multi .upload-button:focus .upload-button-icon:before{color:#31ac5f;color:rgba(0,0,0,0.2)} +.field-fileupload.style-image-multi .upload-button .upload-button-icon:before{text-align:center;display:block;font-size:22px;height:22px;width:22px;line-height:22px;color:#BDC3C7} +.field-fileupload.style-image-multi .upload-button .upload-button-icon.large-icon{width:34px;height:34px;top:50%;left:50%;margin-top:-17px;margin-left:-17px} +.field-fileupload.style-image-multi .upload-button .upload-button-icon.large-icon:before{font-size:34px;height:24px;width:24px;line-height:24px} +.field-fileupload.style-image-multi .upload-button:hover{border:2px dashed #1F99DC} +.field-fileupload.style-image-multi .upload-button:hover .upload-button-icon:before{color:#1F99DC} +.field-fileupload.style-image-multi .upload-button:focus{border:2px dashed #1F99DC} +.field-fileupload.style-image-multi .upload-button:focus .upload-button-icon:before{color:#1F99DC} .field-fileupload.style-image-multi .upload-files-container{margin-left:90px} .field-fileupload.style-image-multi .upload-object{background:#fff;border:1px solid #ecf0f1;width:260px} -.field-fileupload.style-image-multi .upload-object .progress-bar{display:block;width:100%;overflow:hidden;height:5px;background-color:#f5f5f5;border-radius:2px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);position:absolute;bottom:10px;left:0} +.field-fileupload.style-image-multi .upload-object .progress-bar{display:block;width:100%;overflow:hidden;height:5px;background-color:#f5f5f5;border-radius:5px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);position:absolute;bottom:10px;left:0} .field-fileupload.style-image-multi .upload-object .progress-bar .upload-progress{float:left;width:0%;height:100%;line-height:5px;color:#ffffff;background-color:#5fb6f5;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:width 0.6s ease;transition:width 0.6s ease} .field-fileupload.style-image-multi .upload-object .icon-container{border-right:1px solid #f6f8f9;float:left;display:inline-block;overflow:hidden;width:75px;height:75px} .field-fileupload.style-image-multi .upload-object .icon-container i{font-size:35px} @@ -73,17 +75,19 @@ .field-fileupload.style-image-multi .upload-object{margin-right:0;display:block;width:auto} } .field-fileupload.style-image-single.is-populated .upload-button{display:none} -.field-fileupload.style-image-single .upload-button{display:block;float:left;border:2px dotted rgba(0,0,0,0.1);position:relative;outline:none;min-height:100px;min-width:100px} +.field-fileupload.style-image-single .upload-button{display:block;float:left;border:2px dashed #BDC3C7;background-clip:content-box;background-color:#F9F9F9;position:relative;outline:none;min-height:100px;min-width:100px} .field-fileupload.style-image-single .upload-button .upload-button-icon{position:absolute;width:22px;height:22px;top:50%;left:50%;margin-top:-11px;margin-left:-11px} -.field-fileupload.style-image-single .upload-button .upload-button-icon:before{text-align:center;display:block;font-size:22px;height:22px;width:22px;line-height:22px;color:rgba(0,0,0,0.1)} -.field-fileupload.style-image-single .upload-button:hover{border:2px dotted rgba(0,0,0,0.2)} -.field-fileupload.style-image-single .upload-button:hover .upload-button-icon:before{color:#31ac5f;color:rgba(0,0,0,0.2)} -.field-fileupload.style-image-single .upload-button:focus{border:2px solid rgba(0,0,0,0.3);background:transparent} -.field-fileupload.style-image-single .upload-button:focus .upload-button-icon:before{color:#31ac5f;color:rgba(0,0,0,0.2)} +.field-fileupload.style-image-single .upload-button .upload-button-icon:before{text-align:center;display:block;font-size:22px;height:22px;width:22px;line-height:22px;color:#BDC3C7} +.field-fileupload.style-image-single .upload-button .upload-button-icon.large-icon{width:34px;height:34px;top:50%;left:50%;margin-top:-17px;margin-left:-17px} +.field-fileupload.style-image-single .upload-button .upload-button-icon.large-icon:before{font-size:34px;height:24px;width:24px;line-height:24px} +.field-fileupload.style-image-single .upload-button:hover{border:2px dashed #1F99DC} +.field-fileupload.style-image-single .upload-button:hover .upload-button-icon:before{color:#1F99DC} +.field-fileupload.style-image-single .upload-button:focus{border:2px dashed #1F99DC} +.field-fileupload.style-image-single .upload-button:focus .upload-button-icon:before{color:#1F99DC} .field-fileupload.style-image-single .upload-object{padding-bottom:66px} .field-fileupload.style-image-single .upload-object .icon-container{border:1px solid #f6f8f9;background:rgba(255,255,255,0.5)} .field-fileupload.style-image-single .upload-object .icon-container.image img{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;display:block;max-width:100%;height:auto;min-height:100px;min-width:100px} -.field-fileupload.style-image-single .upload-object .progress-bar{display:block;width:100%;overflow:hidden;height:5px;background-color:#f5f5f5;border-radius:2px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);position:absolute;bottom:10px;left:0} +.field-fileupload.style-image-single .upload-object .progress-bar{display:block;width:100%;overflow:hidden;height:5px;background-color:#f5f5f5;border-radius:5px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);position:absolute;bottom:10px;left:0} .field-fileupload.style-image-single .upload-object .progress-bar .upload-progress{float:left;width:0%;height:100%;line-height:5px;color:#ffffff;background-color:#5fb6f5;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:width 0.6s ease;transition:width 0.6s ease} .field-fileupload.style-image-single .upload-object .info{position:absolute;left:0;right:0;bottom:0;height:66px} .field-fileupload.style-image-single .upload-object .meta{position:absolute;bottom:65px;left:0;right:0;margin:0 15px} @@ -103,7 +107,7 @@ .field-fileupload.style-file-multi .upload-object .info h4{padding-right:15px} .field-fileupload.style-file-multi .upload-object .info h4 a{padding:10px 0;right:15px} .field-fileupload.style-file-multi .upload-object .info p.size{position:absolute;top:0;right:0;width:15%;display:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} -.field-fileupload.style-file-multi .upload-object .progress-bar{display:block;width:100%;overflow:hidden;height:5px;background-color:#f5f5f5;border-radius:2px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);position:absolute;top:18px;left:0} +.field-fileupload.style-file-multi .upload-object .progress-bar{display:block;width:100%;overflow:hidden;height:5px;background-color:#f5f5f5;border-radius:5px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);position:absolute;top:18px;left:0} .field-fileupload.style-file-multi .upload-object .progress-bar .upload-progress{float:left;width:0%;height:100%;line-height:5px;color:#ffffff;background-color:#5fb6f5;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:width 0.6s ease;transition:width 0.6s ease} .field-fileupload.style-file-multi .upload-object .meta{position:absolute;top:0;right:0;margin-right:15px;width:15%} .field-fileupload.style-file-multi .upload-object .meta a.drag-handle{top:-2px;bottom:auto;line-height:150%;padding:10px 0} @@ -126,7 +130,7 @@ .field-fileupload.style-file-multi .info p.size{width:25% !important;padding-right:35px !important} .field-fileupload.style-file-multi .meta{width:25% !important} } -.field-fileupload.style-file-single{background-color:#ffffff;border:1px solid #e0e0e0;overflow:hidden;position:relative;padding-right:30px} +.field-fileupload.style-file-single{background-color:#ffffff;border:1px solid #bdc3c7;overflow:hidden;position:relative;padding-right:30px} .field-fileupload.style-file-single .upload-button{position:absolute;top:50%;margin-top:-44px;height:88px;background:transparent;right:-2px;color:#595959} .field-fileupload.style-file-single .upload-button i{font-size:14px} .field-fileupload.style-file-single .upload-button:hover{color:#333333} @@ -140,7 +144,7 @@ .field-fileupload.style-file-single .upload-object .info h4,.field-fileupload.style-file-single .upload-object .info p{display:inline;margin:0;padding:0;font-size:12px;line-height:150%;color:#666666} .field-fileupload.style-file-single .upload-object .info p.size{font-weight:normal} .field-fileupload.style-file-single .upload-object .info p.size:before{content:" - "} -.field-fileupload.style-file-single .upload-object .progress-bar{display:block;width:100%;overflow:hidden;height:5px;background-color:#f5f5f5;border-radius:2px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);position:absolute;top:50%;margin-top:-2px;right:5px} +.field-fileupload.style-file-single .upload-object .progress-bar{display:block;width:100%;overflow:hidden;height:5px;background-color:#f5f5f5;border-radius:5px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);position:absolute;top:50%;margin-top:-2px;right:5px} .field-fileupload.style-file-single .upload-object .progress-bar .upload-progress{float:left;width:0%;height:100%;line-height:5px;color:#ffffff;background-color:#5fb6f5;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:width 0.6s ease;transition:width 0.6s ease} .field-fileupload.style-file-single .upload-object .meta{position:absolute;top:50%;margin-top:-44px;height:88px;right:0;width:15%} .field-fileupload.style-file-single .upload-object .meta .upload-remove-button{position:absolute;top:50%;right:0;height:20px;margin-top:-10px;margin-right:10px;z-index:100} diff --git a/modules/backend/formwidgets/fileupload/assets/less/fileupload.base.less b/modules/backend/formwidgets/fileupload/assets/less/fileupload.base.less index cc2b64286..02ef49db3 100644 --- a/modules/backend/formwidgets/fileupload/assets/less/fileupload.base.less +++ b/modules/backend/formwidgets/fileupload/assets/less/fileupload.base.less @@ -38,7 +38,9 @@ .uploader-block-button() { display: block; float: left; - border: 2px dotted rgba(0,0,0,.1); + border: 2px dashed #BDC3C7; + background-clip: content-box; + background-color: #F9F9F9; position: relative; outline: none; @@ -58,26 +60,39 @@ height: 22px; width: 22px; line-height: 22px; - color: rgba(0,0,0,.1); + color: #BDC3C7; + } + + &.large-icon { + width: 34px; + height: 34px; + top: 50%; + left: 50%; + margin-top: -17px; + margin-left: -17px; + + &:before { + font-size: 34px; + height: 24px; + width: 24px; + line-height: 24px; + } } } &:hover { - border: 2px dotted rgba(0,0,0,.2); + border: 2px dashed #1F99DC; .upload-button-icon:before { - color: @brand-success; - color: rgba(0,0,0,.2); + color: #1F99DC; } } &:focus { - border: 2px solid rgba(0,0,0,.3); - background: transparent; + border: 2px dashed #1F99DC; .upload-button-icon:before { - color: @brand-success; - color: rgba(0,0,0,.2); + color: #1F99DC; } } } @@ -144,9 +159,8 @@ } h4 { - font-weight: 600; - font-size: 13px; - color: #2b3e50; + font-size: 15px; + color: #2A3E51; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/modules/backend/formwidgets/fileupload/partials/_image_single.htm b/modules/backend/formwidgets/fileupload/partials/_image_single.htm index 00acee552..7a0629634 100644 --- a/modules/backend/formwidgets/fileupload/partials/_image_single.htm +++ b/modules/backend/formwidgets/fileupload/partials/_image_single.htm @@ -16,7 +16,7 @@ href="javascript:;" style="" class="upload-button"> - + diff --git a/modules/backend/formwidgets/permissioneditor/assets/css/permissioneditor.css b/modules/backend/formwidgets/permissioneditor/assets/css/permissioneditor.css new file mode 100644 index 000000000..ee1a7d62d --- /dev/null +++ b/modules/backend/formwidgets/permissioneditor/assets/css/permissioneditor.css @@ -0,0 +1,62 @@ +.permissioneditor table { + width: 100%; +} +.permissioneditor table th { + padding: 30px 0 15px; + color: #2a3e51; + font-weight: normal; + border-bottom: 1px solid #dbe1e3; +} +.permissioneditor table th.tab { + font-size: 16px; +} +.permissioneditor table th.permission-type { + font-size: 15px; + text-align: center; +} +.permissioneditor table td { + padding: 10px 0; + vertical-align: top; + border-bottom: 1px solid #ecf0f1; +} +.permissioneditor table td.permission-value { + text-align: center; +} +.permissioneditor table td.permission-name { + font-size: 15px; + color: #555555; +} +.permissioneditor table td p.comment { + margin-top: 5px; + margin-bottom: 0; +} +.permissioneditor table td p.comment:empty { + display: none; +} +.permissioneditor table .custom-radio { + display: inline-block; + padding-left: 0; +} +.permissioneditor table .custom-radio, +.permissioneditor table .custom-radio label { + margin-bottom: 0; +} +.permissioneditor table .custom-radio label { + text-indent: -10000em; + padding: 0 0 0 14px; + margin: 0; + top: 2px; +} +.permissioneditor table .custom-radio label:before { + margin-right: 0; +} +.permissioneditor table tr:last-child td { + border-bottom: none; +} +.permissioneditor table tr:first-child th { + padding-top: 0; +} +.permissioneditor table tr.last-section-row td { + border-bottom: none; + padding-bottom: 0; +} diff --git a/modules/backend/formwidgets/permissioneditor/assets/less/permissioneditor.less b/modules/backend/formwidgets/permissioneditor/assets/less/permissioneditor.less new file mode 100644 index 000000000..74544fb73 --- /dev/null +++ b/modules/backend/formwidgets/permissioneditor/assets/less/permissioneditor.less @@ -0,0 +1,86 @@ +@import "../../../../assets/less/core/boot.less"; + +@color-permissioneditor-section-border: #DBE1E3; +@color-permissioneditor-permission-border: #ECF0F1; + + +.permissioneditor { + table { + width: 100%; + + th { + padding: 30px 0 15px; + color: @color-label; + font-weight: normal; + border-bottom: 1px solid @color-permissioneditor-section-border; + + &.tab { + font-size: 16px; + } + + &.permission-type { + font-size: 15px; + text-align: center; + } + } + + td { + padding: 10px 0; + vertical-align: top; + border-bottom: 1px solid @color-permissioneditor-permission-border; + + &.permission-value{ + text-align: center; + } + + &.permission-name { + font-size: 15px; + color: @color-help-block-text; + } + + p.comment { + margin-top: 5px; + margin-bottom: 0; + + &:empty { + display: none; + } + } + } + + .custom-radio { + display: inline-block;; + padding-left: 0; + + &, label { + margin-bottom: 0; + } + + label { + text-indent: -10000em; + padding: 0 0 0 14px; + margin: 0; + top: 2px; + + &:before { + margin-right: 0; + } + } + } + + tr:last-child td { + border-bottom: none; + } + + tr:first-child th { + padding-top: 0; + } + + tr.last-section-row { + td { + border-bottom: none; + padding-bottom: 0; + } + } + } +} \ No newline at end of file diff --git a/modules/backend/formwidgets/permissioneditor/partials/_permissioneditor.htm b/modules/backend/formwidgets/permissioneditor/partials/_permissioneditor.htm new file mode 100644 index 000000000..68f959550 --- /dev/null +++ b/modules/backend/formwidgets/permissioneditor/partials/_permissioneditor.htm @@ -0,0 +1,75 @@ +
+ + $tabPermissions): ?> + + + + + + + + $permission): + $globalIndex++; + + $permissionValue = array_key_exists($permission->code, $permissionsData) ? + $permissionsData[$permission->code] : 0; + ?> + + + + + + + + +
+ label)) ?> + +

comment)) ?>

+ 		+
+ + data-radio-color="green" + > + + +
+ 		+
+ + type="radio" + > + + +
+ 		+
+ + type="radio" + data-radio-color="red" + > + + +
+
+
diff --git a/modules/backend/formwidgets/richeditor/assets/css/richeditor.css b/modules/backend/formwidgets/richeditor/assets/css/richeditor.css index 46c47462a..4f6362572 100755 --- a/modules/backend/formwidgets/richeditor/assets/css/richeditor.css +++ b/modules/backend/formwidgets/richeditor/assets/css/richeditor.css @@ -1,29 +1,29 @@ .redactor-editor figure{position:relative} -.redactor-editor figcaption{text-align:center;line-height:20px;font-size:14px} +.redactor-editor figcaption{text-align:center;line-height:22px;font-size:16px} .redactor-editor figure[data-type=table]{clear:both} -.redactor-editor figure[data-type=video]{position:relative;margin-bottom:20px;text-align:center;clear:both} +.redactor-editor figure[data-type=video]{position:relative;margin-bottom:22px;text-align:center;clear:both} .redactor-editor figure[data-type=video] p{margin:0} .redactor-editor figure[data-type=video].oc-figure-full:before{position:relative;padding-bottom:51%;width:100%;height:0;content:"";display:block} .redactor-editor figure[data-type=video].oc-figure-full iframe{width:100%;height:100%;position:absolute;left:0;top:0} -.redactor-editor figure[data-type=image]{position:relative;margin-bottom:20px} +.redactor-editor figure[data-type=image]{position:relative;margin-bottom:22px} .redactor-editor figure[data-type=image] .oc-figure-controls{top:0px} .redactor-editor figure[data-type=image] img{width:100%} .redactor-editor figure[data-type=image].oc-figure-large{width:100%;clear:both} .redactor-editor figure[data-type=image].oc-figure-medium{width:50%} .redactor-editor figure[data-type=image].oc-figure-small{width:33%} -.redactor-editor figure[data-type=quote]{font-family:Georgia,serif;margin-bottom:20px;margin-left:20px;font-style:italic;position:relative;border-left:solid 4px #cccccc;padding-left:20px} +.redactor-editor figure[data-type=quote]{font-family:Georgia,serif;margin-bottom:22px;margin-left:22px;font-style:italic;position:relative;border-left:solid 4px #cccccc;padding-left:22px} .redactor-editor figure[data-type=quote] figcaption{font-weight:bold;text-align:left} .redactor-editor figure[data-type=quote] .oc-figure-controls{margin-left:-5px} .redactor-editor figure[data-type=quote].oc-figure-medium,.redactor-editor figure[data-type=quote].oc-figure-medium blockquote{font-size:20px} .redactor-editor figure[data-type=quote].oc-figure-large,.redactor-editor figure[data-type=quote].oc-figure-large blockquote{font-size:24px} .redactor-editor figure[data-type=quote].oc-figure-right{width:33%} -.redactor-editor figure[data-type=quote].oc-figure-left{width:33%;border-left:none;border-right:solid 4px #cccccc;padding-left:0;padding-right:20px;margin-left:0;margin-right:20px} +.redactor-editor figure[data-type=quote].oc-figure-left{width:33%;border-left:none;border-right:solid 4px #cccccc;padding-left:0;padding-right:22px;margin-left:0;margin-right:22px} .redactor-editor figure[data-type=quote].oc-figure-left .oc-figure-controls{margin-left:0;margin-right:-5px} .redactor-editor figure[data-type=quote] cite{display:block;text-align:left;font-weight:normal} .redactor-editor figure[data-type=quote] cite:before{content:"\2014\00a0"} .redactor-editor figure[data-type=quote] cite:empty:before{opacity:0.4;content:"\2014 Type to add citation (optional)"} .redactor-box figcaption:empty:before{opacity:.4;content:"Type to add caption (optional)"} -.redactor-box .oc-figure-controls{background:#2b3e50 !important;padding:0;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;position:absolute;display:none;white-space:nowrap;left:10px;top:-50px;margin:0 auto;font-family:'Open Sans',Arial,sans-serif;line-height:20px;font-style:normal;z-index:1100;text-align:center} +.redactor-box .oc-figure-controls{background:#2b3e50 !important;padding:0;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;position:absolute;display:none;white-space:nowrap;left:10px;top:-50px;margin:0 auto;font-family:sans-serif;line-height:22px;font-style:normal;z-index:1100;text-align:center} .redactor-box .oc-figure-controls:after{content:' ';left:0;position:absolute;display:block;height:10px;background:rgba(0,0,0,0.1);width:100%;bottom:-10px;opacity:0.1;filter:alpha(opacity=10)} .redactor-box .oc-figure-controls:before{content:'';display:block;width:0;height:0;border-left:8.5px solid transparent;border-right:8.5px solid transparent;border-top:9px solid #2b3e50;border-bottom-width:0;position:absolute;left:14px;bottom:-8px} .redactor-box figure:hover .oc-figure-controls{display:block} @@ -45,14 +45,14 @@ .redactor-box .oc-figure-controls span.oc-figure-controls-arrow-down:before{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f063"} .redactor-box .oc-figure-controls span.oc-figure-controls-resize-full:before{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f065"} .redactor-box .oc-figure-controls span.oc-figure-controls-resize-small:before{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f066"} -.redactor-box .oc-figure-controls span.oc-figure-controls-delete{margin-left:20px} +.redactor-box .oc-figure-controls span.oc-figure-controls-delete{margin-left:22px} .redactor-box .oc-figure-controls span.oc-figure-controls-delete:before{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f014"} .redactor-box .oc-figure-controls span.oc-figure-controls-delete:hover{background:#c63e26} -.redactor-box .oc-figure-controls span.oc-figure-controls-table{width:auto;padding-left:10px;padding-right:10px;text-align:left} +.redactor-box .oc-figure-controls span.oc-figure-controls-table{width:auto;padding-left:11px;padding-right:11px;text-align:left} .redactor-box .oc-figure-controls span.oc-figure-controls-table:before{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f0ce"} -.redactor-box .oc-figure-right{float:right;margin-left:20px} +.redactor-box .oc-figure-right{float:right;margin-left:22px} .redactor-box .oc-figure-right .oc-figure-controls{right:0} -.redactor-box .oc-figure-left{float:left;margin-right:20px} +.redactor-box .oc-figure-left{float:left;margin-right:22px} .redactor-box .oc-dropdown-menu,.redactor-box .oc-dropdown-menu ul{padding:0 !important} .redactor-box .oc-dropdown-menu ul{background-color:#ffffff !important} .redactor-box .oc-dropdown-menu a{text-decoration:none;padding:0 15px !important;color:#39454a !important;text-decoration:none !important;line-height:25px} @@ -223,10 +223,10 @@ to{background-position:0 0} .redactor-editor h5{font-size:16px} .redactor-editor h6{font-size:12px;text-transform:uppercase} .field-flush .field-richeditor,.field-flush .field-richeditor.editor-focus{border:none} -.field-richeditor{border:1px solid #e0e0e0;-webkit-transition:border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;transition:border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s} +.field-richeditor{border:1px solid #bdc3c7;-webkit-transition:border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;transition:border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s} .field-richeditor,.field-richeditor .redactor-box{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px} .field-richeditor .redactor-toolbar{border-top-right-radius:5px;border-top-left-radius:5px} -.field-richeditor.editor-focus{border-color:#808c8d} +.field-richeditor.editor-focus{border-color:#1f99dc} .field-richeditor.size-tiny .redactor-editor{height:20px !important} .field-richeditor.size-small .redactor-editor{height:70px !important} .field-richeditor.size-large .redactor-editor{height:170px !important} @@ -254,7 +254,7 @@ to{background-position:0 0} .field-richeditor.stretch .redactor-box textarea{padding:10px} body .redactor-box-fullscreen{background:#f9f9f9;overflow-y:scroll !important;width:100% !important} body .redactor-box-fullscreen .redactor-editor{background:#fff;max-width:960px;padding:50px 30px !important;margin:20px auto !important;padding:20px;top:0 !important} -.redactor-editor figure[data-ui-block]{display:block;margin:0 0 15px 0;padding:10px 10px 10px 36px;border:2px dotted #bdc3c7;background:white;position:relative;cursor:pointer;color:#6c7071;font:15px 'Open Sans',Arial,sans-serif;font-weight:500;line-height:150%;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px} +.redactor-editor figure[data-ui-block]{display:block;margin:0 0 15px 0;padding:10px 10px 10px 36px;border:2px dotted #bdc3c7;background:white;position:relative;cursor:pointer;color:#6c7071;font:15px sans-serif;font-weight:500;line-height:150%;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px} .redactor-editor figure[data-ui-block]:focus,.redactor-editor figure[data-ui-block].inspector-open{border-color:#2581b8;border-style:solid;outline:none} .redactor-editor figure[data-video],.redactor-editor figure[data-audio]{padding-left:13px} .redactor-editor figure[data-video]:after,.redactor-editor figure[data-audio]:after{content:attr(data-label)} diff --git a/modules/backend/lang/en/lang.php b/modules/backend/lang/en/lang.php index 837137278..550f120d0 100644 --- a/modules/backend/lang/en/lang.php +++ b/modules/backend/lang/en/lang.php @@ -84,14 +84,14 @@ return [ 'full_name' => 'Full Name', 'email' => 'Email', 'groups' => 'Groups', - 'groups_comment' => 'Specify which groups this account should belong to.', + 'groups_comment' => 'Specify which groups the account should belong to. Groups define user permissions, which can be overriden on the user level, on the Permissions tab.', 'avatar' => 'Avatar', 'password' => 'Password', 'password_confirmation' => 'Confirm Password', 'permissions' => 'Permissions', 'account' => 'Account', 'superuser' => 'Super User', - 'superuser_comment' => 'Grants this account unlimited access to all areas.', + 'superuser_comment' => 'Grants this account unlimited access to all areas of the system. Super users can add and manage other users. ', 'send_invite' => 'Send invitation by email', 'send_invite_comment' => 'Sends a welcome message containing login and password information.', 'delete_confirm' => 'Do you really want to delete this administrator?', diff --git a/modules/backend/layouts/_mainmenu.htm b/modules/backend/layouts/_mainmenu.htm index 88311596f..aa242ba48 100644 --- a/modules/backend/layouts/_mainmenu.htm +++ b/modules/backend/layouts/_mainmenu.htm @@ -12,9 +12,15 @@