From e41fcee5cbfe1ae08f83a58ab8e387ed00fd2de8 Mon Sep 17 00:00:00 2001 From: Bogdan Plieshka Date: Tue, 28 Apr 2015 19:52:06 +0300 Subject: [PATCH 01/46] MAGETWO-32316: Collapsible Panels - General styles for collapsible panels - Styled Configuration pages collapsible panels --- .../Block/System/Config/Form/Fieldset.php | 4 +- .../view/adminhtml/web/product/product.css | 1 + .../web/css/source/module/_main.less | 1 + .../module/main/_collapsible-blocks.less | 539 ++++++++++++++++++ .../backend/web/css/source/forms/_temp.less | 14 +- .../Magento/backend/web/css/styles-old.less | 518 +---------------- 6 files changed, 556 insertions(+), 521 deletions(-) create mode 100644 app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/main/_collapsible-blocks.less diff --git a/app/code/Magento/Config/Block/System/Config/Form/Fieldset.php b/app/code/Magento/Config/Block/System/Config/Form/Fieldset.php index abcf35b66fb6f..255b15177f97a 100644 --- a/app/code/Magento/Config/Block/System/Config/Form/Fieldset.php +++ b/app/code/Magento/Config/Block/System/Config/Form/Fieldset.php @@ -86,7 +86,7 @@ protected function _getHeaderHtml($element) $html = '
'; } - $html .= '
' . + $html .= '
' . ''; @@ -171,7 +171,7 @@ protected function _getFieldsetCss() /** @var \Magento\Config\Model\Config\Structure\Element\Group $group */ $group = $this->getGroup(); $configCss = $group->getFieldsetCss(); - return 'config collapseable' . ($configCss ? ' ' . $configCss : ''); + return 'config admin__collapsible-block' . ($configCss ? ' ' . $configCss : ''); } /** diff --git a/app/code/Magento/ConfigurableProduct/view/adminhtml/web/product/product.css b/app/code/Magento/ConfigurableProduct/view/adminhtml/web/product/product.css index 4af99352c7abc..450c884cec703 100644 --- a/app/code/Magento/ConfigurableProduct/view/adminhtml/web/product/product.css +++ b/app/code/Magento/ConfigurableProduct/view/adminhtml/web/product/product.css @@ -73,6 +73,7 @@ } #product-variations-matrix > .title { + margin-top: 2rem; margin-bottom: 10px; } diff --git a/app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/_main.less b/app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/_main.less index ce8cabfbf381e..32f42c5055855 100644 --- a/app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/_main.less +++ b/app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/_main.less @@ -13,3 +13,4 @@ @import 'main/_actions-bar.less'; @import 'main/_page-nav.less'; +@import 'main/_collapsible-blocks.less'; diff --git a/app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/main/_collapsible-blocks.less b/app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/main/_collapsible-blocks.less new file mode 100644 index 0000000000000..2862dc9274c13 --- /dev/null +++ b/app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/main/_collapsible-blocks.less @@ -0,0 +1,539 @@ +// /** +// * Copyright © 2015 Magento. All rights reserved. +// * See COPYING.txt for license details. +// */ + +// ToDo UI: Consider all accordions, should be separated + +// +// Variables +// _____________________________________________ + +@collapsible__border-color: @color-gray80; + +@collapsible-title__color: @color-very-dark-gray-black; +@collapsible-title__font-size: 1.7rem; +@collapsible-title__padding-top: 1.9rem; +@collapsible-title__padding-bottom: @collapsible-title__padding-top; +@collapsible-title__hover__color: darken(@collapsible-title__color, 15%); +@collapsible-title__disabled__color: lighten(@collapsible-title__color, 30%); + +@collapsible-title-icon__size: @collapsible-title__font-size; +@collapsible-title-support-text__font-size: 1.4rem; + +@collapsible-sub-block__indent: 4rem; + +@collapsible-content__indent: 2.6rem; + +// +// Mixins +// _____________________________________________ + + +.admin__collapsible-block-wrap() { + border-bottom: 1px solid @collapsible__border-color; +} + + +.admin__collapsible-sub-block-wrap() { + margin-left: @collapsible-sub-block__indent; +} + +.admin__collapsible-content() { + border: 0; + padding: 0 0 @collapsible-content__indent; +} + +.admin__collapsible-title() { + clear: both; + color: @collapsible-title__color; + cursor: pointer; + display: block; + font-size: @collapsible-title__font-size; + font-weight: @font-weight__semibold; + letter-spacing: .025em; + padding: @collapsible-title__padding-top (@collapsible-title-icon__size + 1rem) @collapsible-title__padding-top 0; + position: relative; + text-decoration: none; + transition: color .15s linear; + &:hover { + color: @collapsible-title__hover__color; + } + &:active { + &:before { + .scale(); + } + } + &._disabled, + &.disabled { + color: @collapsible-title__disabled__color; + cursor: default; + } + &:before { + &:extend(.abs-icon all); + position: absolute; + right: 1.3rem; + top: 2.3rem; + font-size: @collapsible-title-icon__size; + content: @icon-expand-open__content; + } +} + +.admin__collapsible-sub-title() { + padding-left: (@collapsible-title-icon__size + 1rem); + padding-right: 0; + &:before { + right: auto; + left: 0; + } +} + +.admin__collapsible-text() { + margin-top: 1rem; + margin-bottom: .5em; +} + +// +// Legacy code +// --------------------------------------------- + +.admin__collapsible-block { + .comment { // ToDo UI: rename to .collapsible-text + .admin__collapsible-text(); + } + // Second level + .admin__collapsible-block { + border: 0; + .entry-edit-head { + > a { + .admin__collapsible-sub-title(); + } + } + } + ~ .admin__collapsible-block { + // ToDo UI: rename to .collapsible-content + .admin__collapsible-content(); + } +} + +.section-config > .admin__collapsible-block > a, +.accordion > dt a, +.accordion .admin__collapsible-block > a { + .admin__collapsible-title(); + > i { + // ToDo UI: change to .collapsible-sub-title + display: block; + font-size: @collapsible-title-support-text__font-size; + font-style: italic; + font-weight: @font-weight__regular; + padding-top: .4rem; + } +} + +.section-config.active > .admin__collapsible-block > a:before, +.accordion > dt.open a:before, +.accordion .admin__collapsible-block.open a:before { + content: @icon-expand-close__content; +} + +.section-config.active > .admin__collapsible-block + input + fieldset, +.accordion > dt + dd.open, +.accordion .admin__collapsible-block.open + input + fieldset { + display: block; + margin: 0; +} + +// +// Accordion +// --------------------------------------------- + +.accordion { + margin: 0 0 .8rem; + padding: 0; + > dt { + + dd { + display: none; + } + + .open { + &:empty { + background: #fff url(../../../../../../web/mui/images/ajax-loader-big.gif) no-repeat center; + height: 100px; + } + } + } + .form-inline { + .config { + td { + padding: 2.2rem 1.5rem 0 0; + } + .scope-label { + padding: 31px 1.5rem 0 0; + } + .value { + padding-right: 4rem; + } + } + > .section-config { + &:last-child { + border-bottom: 0; + } + } + } + .config { + .comment a, + .link-more { + color: #007dbd; + font-size: @font-size__base; + font-weight: 400; + &:focus, + &:hover { + text-decoration: underline; + } + } + legend { + display: none; + } + table { + width: 100%; + } + td { + padding: 2.2rem 1.5rem 0 0; + vertical-align: top; + } + td[colspan] { + padding: 0; + } + input[type="text"], + input[type="password"], + select, + textarea { + width: 100%; + } + input { + &.input-file { + margin-top: 4px; + } + } + select { + &.select-date { + width: 27%; + } + } + .label { + float: none; + width: 33%; + padding-right: 30px; + text-align: right; + font-size: 14px; + font-weight: 600; + color: #303030; + label { + padding-top: 7px; + } + } + .scope-label { + color: #999; + font-size: @font-size__s; + letter-spacing: .05em; + padding: 31px 1.5rem 0 0; + } + .note { + color: #303030; + font-size: 12px; + margin: 5px 0; + a { + color: #007dbd; + font-size: 12px; + font-weight: 400; + &:focus, + &:hover { + text-decoration: underline; + } + } + } + .system-tooltip-box { + position: absolute; + } + .value { + padding-right: 40px; + vertical-align: middle; + width: 44%; + &.with-tooltip { + .tooltip { + position: relative; + top: 0; + left: 0; + right: 0; + bottom: 0; + float: right; + margin: 6px -28px 0 0; + } + .tooltip-content { + padding: 18px; + margin: 0 -17px 10px 0; + right: 0; + bottom: 100%; + width: 239px; + max-width: 239px; + font-size: 13px; + line-height: 1.4; + background: #31302b; + background: rgba(49, 48, 43, .8); + border-radius: 5px; + &:before { + content: ''; + position: absolute; + width: 0; + height: 0; + top: auto; + bottom: -5px; + left: auto; + right: 20px; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid #31302b; + border-bottom: 0; + opacity: .8; + } + } + .help { + position: relative; + width: auto; + margin: 0; + } + } + .checkboxes { + list-style: none; + padding: 0; + margin: -3px 0 0; + li { + margin: 7px 0; + } + input, + label { + vertical-align: middle; + } + label { + margin-left: 5px; + } + } + .label { + padding: 6px 5px 0 1.5rem; + vertical-align: top; + width: auto; + &:first-child { + padding-left: 0; + } + } + } + } + .paypal-selection-simplified { + padding-left: 30px; + } + .paypal-selection { + margin: 10px; + width: 98%; + border-bottom: 2px solid #c0bbaf; + th { + padding: 6px 10px 7px; + } + input[type="checkbox"] { + margin: -4px 7px 0 0; + } + } + .paypal-payment-notice { + margin: 10px; + } + .custom-options { + border: 1px solid #999; + padding: 0 10px; + margin: 0 0 20px; + } +} + +// +// Configuration page accordion +// --------------------------------------------- + +.section-config { + .admin__collapsible-block-wrap(); + .admin__collapsible-block { + tr { + &:last-child { + > td { + > .section-config { + border-bottom-color: transparent; + padding-bottom: 0; + > .config { + padding-bottom: 0; + } + } + } + } + } + } + // Sub blocks + .section-config { + .admin__collapsible-sub-block-wrap(); + .entry-edit-head { + > a { + .admin__collapsible-sub-title(); + } + } + } + &.complex { + .section-config { + &.with-button { + // PayPal connected + &.enabled { + > .entry-edit-head { + &:before { + &:extend(.abs-icon all); + content: @icon-check-mage__content; // ex "\e01e" + color: #fff; + background: #65940a; + font-weight: normal; + padding: 3px; + font-size: 10px; + width: 10px; + height: 10px; + line-height: 10px; + overflow: hidden; + border-radius: 8px; + display: block; + float: left; + margin-left: -25px; + margin-top: 0; + } + } + } + } + } + } + &.config-advanced { + padding-top: @collapsible-content__indent; + .section-config { + padding-top: @collapsible-content__indent; + } + } + &.with-button { + padding: 2rem 0; + &.active { + padding-bottom: 0; + .config-heading { + margin-bottom: 2rem; + } + } + .section-config { + margin-left: 0; + .section-config { + margin-left: @collapsible-sub-block__indent; + } + } + .config-heading { + strong { + display: block; + font-size: @font-size__base; + font-weight: @font-weight__bold; + margin-bottom: .5rem; + } + .button-container { + margin: 1.5rem 0 0; + } + } + .button-container { + line-height: 28px; + a { + margin-left: 20px; + } + } + .action-configure { + &.open { + .state-opened { + visibility: visible; + height: auto; + overflow: auto; + } + .state-closed { + visibility: hidden; + height: 0; + overflow: hidden; + } + } + .state-opened { + visibility: hidden; + height: 0; + overflow: hidden; + } + span { + display: block; + position: relative; + text-align: center; + } + } + } + .config { + padding-bottom: @collapsible-content__indent; + h4 { + color: @collapsible-title__color; + font-size: @collapsible-title__font-size; + font-weight: @font-weight__semibold; + margin-bottom: 0; + padding-top: @collapsible-content__indent; + padding-left: (@collapsible-title-icon__size + 1rem); + } + td { + &.label { + label { + &.enabled { + &:before { + &:extend(.abs-icon all); + content: @icon-check-mage__content; // ex "\e01e" + color: #fff; + background: #65940a; + font-weight: normal; + padding: 3px; + font-size: 10px; + width: 10px; + height: 10px; + line-height: 10px; + overflow: hidden; + border-radius: 8px; + display: block; + float: left; + margin-right: 5px; + } + } + } + } + } + } + > .config { + &.admin__collapsible-block { + display: none; + } + } +} + +// +// Collapsable fieldset-wrapper +// -------------------------------------- + +.collapsable-wrapper { + .admin__collapsible-block-wrap(); + > .fieldset-wrapper-title { + > .title { + .admin__collapsible-title(); + } + } + &.opened { + padding-bottom: 18px; + > .fieldset-wrapper-title { + > .title { + &:before { + content: @icon-expand-close__content; + } + } + } + } +} \ No newline at end of file diff --git a/app/design/adminhtml/Magento/backend/web/css/source/forms/_temp.less b/app/design/adminhtml/Magento/backend/web/css/source/forms/_temp.less index 53a728106a5af..1e0cee275967c 100644 --- a/app/design/adminhtml/Magento/backend/web/css/source/forms/_temp.less +++ b/app/design/adminhtml/Magento/backend/web/css/source/forms/_temp.less @@ -40,18 +40,18 @@ .admin__fieldset-wrapper-title { .extend__clearfix(); - border-bottom: 1px solid @color-gray80; +// border-bottom: 1px solid @color-gray80; margin-bottom: 30px; padding: 14px 0 16px; - strong, .title { - &:extend(h2); - } - .title { - float: left; - margin: .7rem 0 0; + &.active { + ~ .actions { + display: none; + } + } } .actions { + display: block; float: right; } } diff --git a/app/design/adminhtml/Magento/backend/web/css/styles-old.less b/app/design/adminhtml/Magento/backend/web/css/styles-old.less index 55ff2a07a8299..af320c29b1934 100644 --- a/app/design/adminhtml/Magento/backend/web/css/styles-old.less +++ b/app/design/adminhtml/Magento/backend/web/css/styles-old.less @@ -1153,9 +1153,12 @@ input.no-display, margin: 0; padding: 5px 18px 38px; position: relative; + &.collapsable-wrapper { + border-bottom: 1px solid #ccc; + } } - .fieldset-wrapper > .fieldset-wrapper-title, +// .fieldset-wrapper > .fieldset-wrapper-title, .fieldset > .legend { position: static; float: left; @@ -1170,7 +1173,7 @@ input.no-display, float: none; } - .fieldset-wrapper > .fieldset-wrapper-title .title, +// .fieldset-wrapper > .fieldset-wrapper-title .title, .fieldset > .legend span { .style10(); padding: 7px 0 10px; @@ -1182,42 +1185,6 @@ input.no-display, // -------------------------------------- .collapsable-wrapper { padding-bottom: 2px; - > .fieldset-wrapper-title { - border-bottom: 1px solid #cac3b4; - margin-bottom: 0; - > .title { - position: relative; - padding-left: 22px; - cursor: pointer; - float: left; - &:before { - position: absolute; - left: 0; - top: 11px; - font-family: 'MUI-Icons'; - font-size: 16px; - font-style: normal; - speak: none; - font-weight: normal; - -webkit-font-smoothing: antialiased; - content: '\e02a'; // arrow right icon - color: #b2b0ad; - } - &:hover:before { - color: #7e7e7e; - } - } - } - &.opened { - padding-bottom: 18px; - > .fieldset-wrapper-title { - //border-bottom: 1px solid #ededed; - margin-bottom: 18px; - > .title:before { - content: '\e02c'; // arrow down icon - } - } - } } // Fieldset styles in another fieldset @@ -4019,480 +3986,6 @@ input.no-display, border: 1px solid red !important; } - // - // Accordion - // ------------------------ - - .accordion { - margin: 0 0 8px; - padding: 0; - } - - .accordion > dt, - .accordion > dd.open, - .accordion .collapseable, - .section-config.active > .collapseable + input + fieldset, - .accordion .collapseable.open + input + fieldset { - background: #fff; - padding: 5px 18px 2px; - position: relative; - } - - .accordion > dt + dd { - display: none; - } - - .section-config > .config { - &.collapseable { - display: none; - } - } - - .accordion > dt.open, - .section-config.active > .collapseable, - .accordion .collapseable.open { - margin: 0; - border-bottom: 0; - border-radius: 5px 5px 0 0; - } - .section-config.active > .collapseable + input + fieldset, - .accordion > dt + dd.open, - .accordion .collapseable.open + input + fieldset { - padding: 25px 18px 18px; - display: block; - margin-left: 0; - border-top: 0; - border-radius: 0 0 5px 5px; - } - - .section-config > .collapseable > a, - .accordion > dt a, - .accordion .collapseable > a { - .style10(); - display: block; - padding: 7px 0 10px 22px; - text-decoration: none; - position: relative; - cursor: pointer; - border-bottom: 1px solid #cac3b4; - } - - .section-config > .collapseable > a i, - .accordion > dt a i, - .accordion .collapseable > a i { - .style31(); - } - - .section-config > .collapseable > a:before, - .accordion > dt a:before, - .accordion .collapseable > a:before { - position: absolute; - left: 0; - top: 11px; - font-family: 'MUI-Icons'; - font-style: normal; - speak: none; - font-size: 16px; - font-weight: normal; - -webkit-font-smoothing: antialiased; - content: '\e02a'; // arrow right icon - color: #b2b0ad; - } - - .section-config.active > .collapseable > a:before, - .accordion > dt.open a:before, - .accordion .collapseable.open a:before { - content: '\e02c'; // arrow down icon - } - .section-config > .collapseable > a:hover:before, - .accordion > dt a:hover:before, - .accordion .collapseable > a:hover:before { - color: #7e7e7e; - } - - // PayPal connected - - .section-config.complex .section-config.with-button { - padding:20px 15px; - margin:0 -30px 0 -15px; - border-bottom:1px solid #eae6e0; - } - - .section-config.complex tr:last-child .section-config.with-button { - border-bottom:0; - } - - .section-config.complex .section-config.with-button > .entry-edit-head { - padding: 0 0 0 25px; - border:0; - } - - .section-config.complex .section-config.with-button.enabled > .entry-edit-head:before { - content: "\e01e"; - color:#fff; - background: #65940a; - font-family: "MUI-Icons"; - font-weight: normal; - padding:3px; - font-size: 10px; - width:10px; - height:10px; - line-height: 10px; - overflow: hidden; - border-radius: 8px; - display: block; - float:left; - margin-left:-25px; - margin-top:0; - } - - .section-config.complex .section-config.with-button > .config { - margin:10px -10px; - border:1px solid #d1d0ce; - border-radius: 0; - padding:5px 0; - } - .section-config.complex .section-config.with-button > .config > table > tbody > tr > td { - padding:0; - } - - .section-config.complex .section-config.with-button > .config > table > tbody > tr > td > .section-config > .entry-edit-head { - border:0; - border-radius: 0; - margin-bottom:0; - padding:5px 10px 2px; - border-bottom:1px solid #d1d0ce; - background: transparent; - } - .section-config.complex .section-config.with-button > .config > table > tbody > tr > td > .section-config > .entry-edit-head > a { - padding-left: 22px; - } - .section-config.complex .section-config.with-button > .config > table > tbody > tr > td > .section-config > .entry-edit-head > a:before { - left: 0; - } - .section-config.complex .section-config.with-button > .config > table > tbody > tr:last-child > td > .section-config > .entry-edit-head { - border:0; - } - .section-config.complex .section-config.with-button > .config > table > tbody > tr > td > .section-config > .entry-edit-head a { - border-bottom:0; - } - - .section-config.complex .section-config.with-button > .config > table > tbody > tr > td > .section-config > .config { - border:0; - border-bottom:1px solid #d1d0ce; - border-radius: 0; - margin:0; - padding-bottom:50px; - } - .section-config.complex .section-config.with-button > .config > table > tbody > tr:last-child > td > .section-config > .config { - border-bottom:0; - } - - .section-config .config h4 { - padding-left:25%; - font-size: 18px; - } - - .section-config .config td.label label.enabled:before { - content: "\e01e"; - color:#fff; - background: #65940a; - font-family: "MUI-Icons"; - font-weight: normal; - padding:3px; - font-size: 10px; - width:10px; - height:10px; - line-height: 10px; - overflow: hidden; - border-radius: 8px; - display: block; - float:left; - margin-right:5px; - } - - .section-config.complex .section-config.with-button > .config:before { - content:''; - height: 9px; - width: 20px; - overflow: hidden; - display: block; - position: absolute; - bottom: 100%; - left: 50%; - z-index: 2; - margin-left: -10px; - background: url(../images/subconfig-bg.png) no-repeat 0 0; - } - - .section-config.config-advanced { - padding:30px 0 0; - } - .section-config.config-advanced > .entry-edit-head { - border:0; - padding: 0 0 0 25%; - } - .section-config.config-advanced > .entry-edit-head a { - border:0 !important; - } - .section-config.config-advanced > .config { - padding-left:0!important; - padding-right:0!important; - border:0!important; - border-radius: 0!important; - } - - .section-config.config-advanced > .entry-edit-head a { - margin-left:-22px; - } - - - .section-config.with-button .config-heading strong { - display: block; - .style28(); - margin-bottom:5px; - } - - .section-config.with-button .config-heading .button-container { - margin:15px 0 0; - } - .section-config.with-button .button-container { - line-height: 28px; - } - .section-config.with-button .button-container a { - margin-left:20px; - } - - .section-config.with-button .action-configure span { - display: block; - position: relative; - text-align: center; - } - .section-config.with-button .action-configure .state-opened { - visibility: hidden; - height:0; - overflow: hidden; - } - .section-config.with-button .action-configure.open .state-opened { - visibility: visible; - height:auto; - overflow: auto; - } - .section-config.with-button .action-configure.open .state-closed { - visibility: hidden; - height:0; - overflow: hidden; - } - - .accordion > dt + dd { - display: none; - } - - .accordion > dt + .open:empty { - background: #fff url(../mui/images/ajax-loader-big.gif) no-repeat center; - height: 100px; - } - - // TODO: arrange configuration tables - .accordion .collapseable.disabled { - background: #f1f1f1; - } - - .accordion .collapseable.disabled > a { - cursor: not-allowed; - } - - .accordion .collapseable.disabled > a:before { - content: ''; - } - - .accordion .config { - border: 0; - } - - .accordion .config { - .comment a, - .link-more { - .style3(); - } - } - - .accordion .config legend { - display: none; - } - - .accordion .config table { - width: 100%; - } - - .accordion .config .label { - float: none; - width: 33%; - padding-right: 30px; - text-align: right; - font-size: 14px; - font-weight: 600; - color: #303030; - } - - .accordion .config .value .label { - padding: 6px 5px 0 15px; - vertical-align: top; - width: auto; - } - - .accordion .config .value .label:first-child { - padding-left: 0; - } - - .accordion .config .label label { - padding-top: 7px; - } - - .accordion .config td { - background: none; - border: 0; - padding: 22px 15px 0 0; - vertical-align: top; - } - - .accordion .paypal-selection-simplified { - padding-left: 30px; - } - - .accordion .paypal-selection input[type="checkbox"] { - margin: -4px 7px 0 0; - } - - .accordion .config input[type="text"], - .accordion .config input[type="password"], - .accordion .config select, - .accordion .config textarea { - width: 100%; - } - - .accordion .config input.input-file { - margin-top: 4px; - } - - .accordion .config select.select-date { - width: 27%; - } - - .accordion .config .value { - width: 44%; - padding-right: 40px; - .checkboxes { - list-style: none; - padding: 0; - margin: -3px 0 0; - - li { - margin: 7px 0; - } - - input, - label { - vertical-align: middle; - } - - label { - margin-left: 5px; - } - } - } - - .accordion .config .value.with-tooltip { - padding-top:5px; - } - .accordion .config .value.with-tooltip .tooltip { - position: relative; - top:0; - left:0; - right:0; - bottom:0; - float:right; - margin: 6px -28px 0 0; - } - .accordion .config .value.with-tooltip .tooltip-content { - padding: 18px; - margin: 0 -17px 10px 0; - right: 0; - bottom: 100%; - width: 239px; - max-width: 239px; - font-size: 13px; - line-height: 1.4; - background: #31302b; - background: rgba(49, 48, 43, .8); - border-radius: 5px; - } - .accordion .config .value.with-tooltip .tooltip-content:before { - content: ''; - position: absolute; - width: 0; - height: 0; - top: auto; - bottom:-5px; - left:auto; - right: 20px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid #31302b; - border-bottom:0; - opacity: .8; - } - - .accordion .config .value.with-tooltip .help { - position: relative; - width:auto; - margin:0; - } - - .accordion .config .scope-label { - color: #999; - font-size: 12px; - letter-spacing: .05em; - padding: 31px 15px 0 0; - } - - .accordion .config .note { - color: #303030; - font-size: 12px; - margin: 5px 0; - } - - .accordion .config .note a { - .style22(); - } - - .accordion .config .system-tooltip-box { - position: absolute; - } - - .accordion .paypal-selection { - margin: 10px; - width: 98%; - } - - .accordion .paypal-selection th { - padding: 6px 10px 7px; - } - - .accordion .paypal-selection { - border-bottom: 2px solid #c0bbaf; - } - - .accordion .paypal-payment-notice { - margin: 10px; - } - - .accordion .custom-options { - border: 1px solid #999; - padding: 0 10px; - margin: 0 0 20px; - } - // // Sales // -------------------------------------- @@ -4876,6 +4369,7 @@ input.no-display, .adminhtml-system-config-edit { .admin__scope-old { .payflow-settings-notice { + margin-top: 2rem; padding: 10px; .important-label { .style32(); From 8351deedf2dfe192e77118c9d624374536892ff9 Mon Sep 17 00:00:00 2001 From: Bogdan Plieshka Date: Thu, 30 Apr 2015 16:09:03 +0300 Subject: [PATCH 02/46] MAGETWO-32316: Collapsible Panels - Styled Products and Account pages collapsible panels --- .../widget/form/renderer/fieldset.phtml | 6 +- .../templates/product/edit/bundle.phtml | 4 +- .../product/edit/bundle/option.phtml | 4 +- .../catalog/product/attribute/labels.phtml | 4 +- .../catalog/product/edit/options/option.phtml | 7 +- .../view/adminhtml/web/js/custom-options.js | 2 +- .../edit/super/attribute-js-template.phtml | 4 +- .../edit/super/attribute-template.phtml | 4 +- .../catalog/product/edit/super/config.phtml | 4 +- .../templates/product/grouped/container.phtml | 4 +- .../base/web/templates/fieldset/fieldset.html | 9 +- .../module/main/_collapsible-blocks.less | 242 +++++++++++------- .../backend/web/css/source/forms/_temp.less | 15 +- .../Magento/backend/web/css/styles-old.less | 87 +------ .../Product/Attribute/Edit/AttributeForm.php | 2 +- 15 files changed, 207 insertions(+), 191 deletions(-) diff --git a/app/code/Magento/Backend/view/adminhtml/templates/widget/form/renderer/fieldset.phtml b/app/code/Magento/Backend/view/adminhtml/templates/widget/form/renderer/fieldset.phtml index 88470e31c7d16..ed79720277308 100644 --- a/app/code/Magento/Backend/view/adminhtml/templates/widget/form/renderer/fieldset.phtml +++ b/app/code/Magento/Backend/view/adminhtml/templates/widget/form/renderer/fieldset.phtml @@ -38,11 +38,13 @@ if ($isField) { */ ?> -
- > + > getLegend() ?> diff --git a/app/code/Magento/Bundle/view/adminhtml/templates/product/edit/bundle.phtml b/app/code/Magento/Bundle/view/adminhtml/templates/product/edit/bundle.phtml index 3ea591c9a303d..85002f2cdeaae 100644 --- a/app/code/Magento/Bundle/view/adminhtml/templates/product/edit/bundle.phtml +++ b/app/code/Magento/Bundle/view/adminhtml/templates/product/edit/bundle.phtml @@ -17,9 +17,9 @@ if(typeof Bundle=='undefined') {
-
+
- + getTabLabel() ?>
diff --git a/app/code/Magento/Bundle/view/adminhtml/templates/product/edit/bundle/option.phtml b/app/code/Magento/Bundle/view/adminhtml/templates/product/edit/bundle/option.phtml index 15746df355437..930f02bfe5e77 100644 --- a/app/code/Magento/Bundle/view/adminhtml/templates/product/edit/bundle/option.phtml +++ b/app/code/Magento/Bundle/view/adminhtml/templates/product/edit/bundle/option.phtml @@ -10,9 +10,9 @@ ?> - getChildBlock('grid.js')): ?> - getChildHtml('grid.js'); ?> - + +getChildBlock('grid.js')): ?> + getChildHtml('grid.js'); ?> + + diff --git a/app/code/Magento/Backend/view/adminhtml/templates/widget/grid/column_set.phtml b/app/code/Magento/Backend/view/adminhtml/templates/widget/grid/column_set.phtml index 7474b6b0219be..2ba8f456149f4 100644 --- a/app/code/Magento/Backend/view/adminhtml/templates/widget/grid/column_set.phtml +++ b/app/code/Magento/Backend/view/adminhtml/templates/widget/grid/column_set.phtml @@ -20,31 +20,35 @@ $numColumns = sizeof($block->getColumns()); /* foreach ($block->getColumns() as $_column): ?> getHtmlProperty() ?> /> - isHeaderVisible() || $block->isFilterVisible()): ?> + isHeaderVisible()): ?> - isHeaderVisible()): ?> - + isHeaderVisible() || $block->getFilterVisibility()): ?> + getColumns() as $_column): ?> - getHeaderHtmlProperty() ?>> - getHeaderHtml() ?> - + getHeaderHtml() == ' '):?> + getHeaderHtmlProperty() ?>>  + + getHeaderHtml()?> + isFilterVisible()): ?> - - getColumns() as $_column): ?> - getHeaderHtmlProperty() ?>> - getFilterHtml() ?> - - + + getColumns() as $_column): ?> + getHeaderHtmlProperty() ?>> + getFilterHtml() ?> + + + getCollection()->getSize() > 0 && !$block->getIsCollapsed()): ?> getCollection() as $_index => $_item): ?> hasMultipleRows($_item)) :?> @@ -56,7 +60,7 @@ $numColumns = sizeof($block->getColumns()); $_rowspan = $block->getRowspan($_item, $_column); ?> - class="getCssProperty() ?> " + class="getCssProperty() ?> getId() == 'massaction' ? 'data-grid-checkbox-cell': ''?> " > getRowField($_item)) != '' ? $_html : ' ') ?> getColumns()); getMultipleRowColumns($_i) as $_column): ?> getRowField($_i)) != '' ? $_html : ' ') ?> getColumns()); getMultipleRowColumns() as $_column): ?> hasSubtotalsLabel() ? $_column->getSubtotalsLabel() : $_column->getRowField($block->getSubTotals($_item)); @@ -104,7 +108,7 @@ $numColumns = sizeof($block->getColumns()); getColumns() as $_column): ?> shouldRenderCell($_item, $_column)):?> getRowField($_item)) != '' ? $_html : ' ') ?> @@ -122,10 +126,9 @@ $numColumns = sizeof($block->getColumns()); getEmptyText()): ?> - + getEmptyText() ?> + colspan="">getEmptyText() ?> diff --git a/app/code/Magento/Backend/view/adminhtml/templates/widget/grid/export.phtml b/app/code/Magento/Backend/view/adminhtml/templates/widget/grid/export.phtml index 94e11d5377914..05387761a7b59 100644 --- a/app/code/Magento/Backend/view/adminhtml/templates/widget/grid/export.phtml +++ b/app/code/Magento/Backend/view/adminhtml/templates/widget/grid/export.phtml @@ -7,13 +7,14 @@ // @codingStandardsIgnoreFile ?> - - - -getExportButtonHtml() ?> +
+ + + getExportButtonHtml() ?> +
\ No newline at end of file diff --git a/app/code/Magento/Backend/view/adminhtml/templates/widget/grid/extended.phtml b/app/code/Magento/Backend/view/adminhtml/templates/widget/grid/extended.phtml index c8f1b79cf2cca..b266fd638eaf6 100644 --- a/app/code/Magento/Backend/view/adminhtml/templates/widget/grid/extended.phtml +++ b/app/code/Magento/Backend/view/adminhtml/templates/widget/grid/extended.phtml @@ -25,24 +25,25 @@ $numColumns = sizeof($block->getColumns()); ?> getCollection()): ?> canDisplayContainer()): ?> - getGridHeader()): ?> -
-

getGridHeader(); ?>

-
- -
+
getLayout()->getMessagesBlock()->getGroupedHtml() ?> getPagerVisibility() || $block->getExportTypes() || $block->getFilterVisibility()): ?> -
+ getMassactionBlock() && $block->getMassactionBlock()->isAvailable() ?> +
+
+ + getMainButtonsHtml() ? '
' . $block->getMainButtonsHtml() . '
' : ''; ?> + getExportTypes()): ?> -
- +
+ - - - - - - - - +
+ + + +
+ getCollection()->getCurPage() ?> + getCollection()->getLastPageNumber() ?> + 1): ?> + + + + + getUiId('current-page') ?> /> + + + + + + +
+
- getMassactionBlock() && $block->getMassactionBlock()->isAvailable()): ?> - getMassactionBlockHtml() ?> - -
-
- - tags from the code. */ - /* foreach ($block->getColumns() as $_column): ?> - getHtmlProperty() ?> /> - - getHeadersVisibility() || $block->getFilterVisibility()): ?> - - getHeadersVisibility()): ?> - - getColumns() as $_column): ?> - getHeaderHtmlProperty() ?>> - getHeaderHtml() ?> - - - - - getFilterVisibility()): ?> - - getColumns() as $_column): ?> - getHeaderHtmlProperty() ?>>getFilterHtml() ?> - - - - - - getCountTotals()): ?> - - + +
+
+ tags from the code. */ + /* foreach ($block->getColumns() as $_column): ?> + getHtmlProperty() ?> /> + + getHeadersVisibility() || $block->getFilterVisibility()): ?> + + getHeadersVisibility()): ?> + getColumns() as $_column): ?> - + getHeaderHtml() == ' '):?> + + + getHeaderHtml()?> + - + getFilterVisibility()): ?> + + getColumns() as $_column): ?> + + + + + + + getCountTotals()): ?> + + + getColumns() as $_column): ?> + + + + + - - getCollection()->getSize() > 0) && (!$block->getIsCollapsed())): ?> - getCollection() as $_index => $_item): ?> - getRowClass($_item)): ?> - class="" >getColumns() as $_column): - if ($block->shouldRenderCell($_item, $_column)): - $_rowspan = $block->getRowspan($_item, $_column); + + getCollection()->getSize() > 0) && (!$block->getIsCollapsed())): ?> + getCollection() as $_index => $_item): ?> + getRowClass($_item)): ?> + class="" >getColumns() as $_column): + if ($block->shouldRenderCell($_item, $_column)): + $_rowspan = $block->getRowspan($_item, $_column); + ?> + shouldRenderEmptyCell($_item, $_column)): ?> - shouldRenderEmptyCell($_item, $_column)): - ?> - getEmptyCellColspan($_item) ?>" + class="last">getEmptyCellLabel() ?> - - getMultipleRows($_item)): ?> - - - getMultipleRowColumns($_i) as $_column): ?> - - - - - - - shouldRenderSubTotal($_item)): ?> - + endif; + endforeach; ?> + + getMultipleRows($_item)): ?> + + getSubTotalColumns() as $_column): ?> - - - - getEmptyText()): ?> - - - - - -
- hasTotalsLabel()) ? $_column->getTotalsLabel() : $_column->getRowField($_column->getGrid()->getTotals()) ?> - getHeaderHtmlProperty() ?>> 
getHeaderHtmlProperty() ?>> + getFilterHtml() ?> +
+ hasTotalsLabel()) ? $_column->getTotalsLabel() : $_column->getRowField($_column->getGrid()->getTotals()) ?> +
+ class="getCssProperty() ?> + getId() == 'massaction' ? 'data-grid-checkbox-cell': ''?>"> + getRowField($_item)) != '' ? $_html : ' ') ?> + class="getCssProperty() ?> "> - getRowField($_item)) != '' ? $_html : ' ') ?> - getEmptyCellLabel() ?>
- getRowField($_i)) != '' ? $_html : ' ') ?> -
- hasSubtotalsLabel() ? $_column->getSubtotalsLabel() : - $_column->getRowField($block->getSubTotalItem($_item)) - ); - ?> + foreach ($block->getMultipleRowColumns($_i) as $_column): ?> + + getRowField($_i)) != '' ? $_html : ' ') ?>
getEmptyText() ?>
-
- getPagerVisibility()): ?> -
- - - getCollection()->getCurPage() ?> - getCollection()->getLastPageNumber() ?> - - 1): ?> - - - - - - + + - - getCollection()->getLastPageNumber()) ?> - + shouldRenderSubTotal($_item)): ?> + + getSubTotalColumns() as $_column): ?> + + hasSubtotalsLabel() ? $_column->getSubtotalsLabel() : + $_column->getRowField($block->getSubTotalItem($_item)) + ); + ?> + + + + + + getEmptyText()): ?> + + getEmptyText() ?> + + + + - - - - - - getChildBlock('grid.bottom.links')): ?> - getChildHtml('grid.bottom.links') ?> - -
-
canDisplayContainer()): ?>
diff --git a/app/code/Magento/Backend/view/adminhtml/templates/widget/grid/massaction.phtml b/app/code/Magento/Backend/view/adminhtml/templates/widget/grid/massaction.phtml index c759fdb6fac26..901d1f1e1f7db 100644 --- a/app/code/Magento/Backend/view/adminhtml/templates/widget/grid/massaction.phtml +++ b/app/code/Magento/Backend/view/adminhtml/templates/widget/grid/massaction.phtml @@ -7,70 +7,70 @@ // @codingStandardsIgnoreFile ?> -
-
-
- getHideFormElement() !== true):?> -
- - getBlockHtml('formkey')?> - - - - - - - - getApplyButtonHtml() ?> - - getHideFormElement() !== true):?> -
- -
- getItems() as $_item): ?> -
- getBlockName()):?> - getChildHtml($_item->getBlockName());?> - -
- +getSomething(); ?> +
+ + getHideFormElement() !== true):?> +
+ +
+ getBlockHtml('formkey')?> + + + + getApplyButtonHtml() ?> +
+ getHideFormElement() !== true):?> +
+ +
+ getItems() as $_item): ?> +
+ getBlockName()):?> + getChildHtml($_item->getBlockName());?> +
+
-
- + + + getUseSelectAll()):?> + + + + - - - - + - - 0 - +
-
-
- +
diff --git a/app/code/Magento/GroupedProduct/view/adminhtml/templates/product/grouped/list.phtml b/app/code/Magento/GroupedProduct/view/adminhtml/templates/product/grouped/list.phtml index de0a513ca8482..091b9941e00ad 100644 --- a/app/code/Magento/GroupedProduct/view/adminhtml/templates/product/grouped/list.phtml +++ b/app/code/Magento/GroupedProduct/view/adminhtml/templates/product/grouped/list.phtml @@ -32,17 +32,20 @@ -
-
- +
+
diff --git a/app/code/Magento/ImportExport/Block/Adminhtml/Export/Filter.php b/app/code/Magento/ImportExport/Block/Adminhtml/Export/Filter.php index 0dfd086c2d0fe..2c8d678e2d417 100644 --- a/app/code/Magento/ImportExport/Block/Adminhtml/Export/Filter.php +++ b/app/code/Magento/ImportExport/Block/Adminhtml/Export/Filter.php @@ -76,7 +76,7 @@ protected function _getDateFromToHtmlWithValue(Attribute $attribute, $value) $arguments = [ 'name' => $this->getFilterElementName($attribute->getAttributeCode()) . '[]', 'id' => $this->getFilterElementId($attribute->getAttributeCode()), - 'class' => 'input-text input-text-range-date', + 'class' => 'admin__control-text', 'date_format' => $this->_localeDate->getDateFormat( \IntlDateFormatter::SHORT ), @@ -94,11 +94,12 @@ protected function _getDateFromToHtmlWithValue(Attribute $attribute, $value) $toValue = $this->escapeHtml(next($value)); } - return '' . __( + return '' . __( 'From' ) . ': ' . $dateBlock->setValue( $fromValue - )->getHtml() . ' ' . __( + )->getHtml() . '  +' . __( 'To' ) . ': ' . $dateBlock->setId( $dateBlock->getId() . '_to' @@ -182,7 +183,7 @@ protected function _getNumberFromToHtmlWithValue(Attribute $attribute, $value) $toValue = $this->escapeHtml(next($value)); } - return '' . __( + return '' . __( 'From' ) . ': ' . @@ -192,7 +193,7 @@ protected function _getNumberFromToHtmlWithValue(Attribute $attribute, $value) ' value="' . $fromValue . '"/> ' . - '' . + '' . __( 'To' ) . @@ -268,7 +269,7 @@ protected function _prepareColumns() 'sortable' => false, 'index' => 'attribute_id', 'header_css_class' => 'col-id', - 'column_css_class' => 'col-id' + 'column_css_class' => 'col-id data-grid-checkbox-cell' ] ); $this->addColumn( diff --git a/app/code/Magento/Payment/view/adminhtml/templates/info/default.phtml b/app/code/Magento/Payment/view/adminhtml/templates/info/default.phtml index f2db06784d9fa..b4538bd9f23f7 100644 --- a/app/code/Magento/Payment/view/adminhtml/templates/info/default.phtml +++ b/app/code/Magento/Payment/view/adminhtml/templates/info/default.phtml @@ -15,7 +15,7 @@ escapeHtml($block->getMethod()->getTitle()) ?> getSpecificInformation()):?> -
+
$_value):?> diff --git a/app/code/Magento/Reports/view/adminhtml/templates/grid.phtml b/app/code/Magento/Reports/view/adminhtml/templates/grid.phtml index 8d8ee2a1a08b6..14fc3f130fd10 100644 --- a/app/code/Magento/Reports/view/adminhtml/templates/grid.phtml +++ b/app/code/Magento/Reports/view/adminhtml/templates/grid.phtml @@ -12,147 +12,147 @@ $numColumns = sizeof($block->getColumns()); ?> getCollection()): ?> -canDisplayContainer()): ?> + canDisplayContainer()): ?>
- - getLayout()->getMessagesBlock()->getGroupedHtml() ?> - -getStoreSwitcherVisibility() || $block->getDateFilterVisibility()): ?> -
- getChildBlock('grid.export')): ?> -
- getChildHtml('grid.export');?> -
+ + getLayout()->getMessagesBlock()->getGroupedHtml() ?> - getDateFilterVisibility()): ?> -
-
- -
+ getStoreSwitcherVisibility() || $block->getDateFilterVisibility()): ?> +
+
+ getDateFilterVisibility()): ?> +
+ + + + + -
- -
+ + + + + -
- - getRefreshButtonHtml() ?> -
- -
+ $("#getSuffixId('period_date_range') ?>").dateRange({ + dateFormat:"getDateFormat() ?>", + buttonText:"", + from:{ + id:"getSuffixId('period_date_from')?>" + }, + to:{ + id:"getSuffixId('period_date_to')?>" + } + }); + }); + +
+ + getChildBlock('grid.export')): ?> + getChildHtml('grid.export');?> + +
+
-
- -
-
-
escapeHtml($_label)?>:
- +
+
getChildHtml('grid.columnSet'); ?>
-
-canDisplayContainer()): ?> - + }); + diff --git a/app/code/Magento/Sales/view/adminhtml/templates/items/column/qty.phtml b/app/code/Magento/Sales/view/adminhtml/templates/items/column/qty.phtml index 46b39dc3a78af..5cf772879bed1 100644 --- a/app/code/Magento/Sales/view/adminhtml/templates/items/column/qty.phtml +++ b/app/code/Magento/Sales/view/adminhtml/templates/items/column/qty.phtml @@ -8,7 +8,7 @@ ?> getItem()): ?> - +
diff --git a/app/code/Magento/Sales/view/adminhtml/templates/order/create/totals.phtml b/app/code/Magento/Sales/view/adminhtml/templates/order/create/totals.phtml index a309c817ee92f..9bfa7eb2fe636 100644 --- a/app/code/Magento/Sales/view/adminhtml/templates/order/create/totals.phtml +++ b/app/code/Magento/Sales/view/adminhtml/templates/order/create/totals.phtml @@ -10,7 +10,7 @@
-
getQtyOrdered()*1 ?>
+
renderTotals(); ?> renderTotals('footer'); ?> diff --git a/app/code/Magento/Sales/view/adminhtml/templates/order/details.phtml b/app/code/Magento/Sales/view/adminhtml/templates/order/details.phtml index 40f17efc40e9a..196c1d42977c1 100644 --- a/app/code/Magento/Sales/view/adminhtml/templates/order/details.phtml +++ b/app/code/Magento/Sales/view/adminhtml/templates/order/details.phtml @@ -17,7 +17,7 @@ store name = $_order->getStore()->getGroup()->getName() getCustomerFirstname() ? $_order->getCustomerName() : $_order->getBillingAddress()->getName()) ?>
getStore()->getGroup()->getName()) ?>
-
+
diff --git a/app/code/Magento/Sales/view/adminhtml/templates/order/totalbar.phtml b/app/code/Magento/Sales/view/adminhtml/templates/order/totalbar.phtml index f24b3f258aefc..403402bee0a83 100644 --- a/app/code/Magento/Sales/view/adminhtml/templates/order/totalbar.phtml +++ b/app/code/Magento/Sales/view/adminhtml/templates/order/totalbar.phtml @@ -8,7 +8,7 @@ ?> getTotals()) > 0): ?> -
Item
+
getTotals() as $_total): ?>
class="grand-total"> diff --git a/app/code/Magento/Sales/view/adminhtml/templates/order/totals.phtml b/app/code/Magento/Sales/view/adminhtml/templates/order/totals.phtml index 45b816084520b..f0a58fdb85123 100644 --- a/app/code/Magento/Sales/view/adminhtml/templates/order/totals.phtml +++ b/app/code/Magento/Sales/view/adminhtml/templates/order/totals.phtml @@ -10,7 +10,7 @@ getSource(); ?> setPriceDataObject($_source) ?> - +
getChildHtml('main'); ?> getChildHtml('footer'); ?>
diff --git a/app/code/Magento/Sales/view/adminhtml/templates/order/view/info.phtml b/app/code/Magento/Sales/view/adminhtml/templates/order/view/info.phtml index afd5fc24ba3e9..f27dc9bd43456 100644 --- a/app/code/Magento/Sales/view/adminhtml/templates/order/view/info.phtml +++ b/app/code/Magento/Sales/view/adminhtml/templates/order/view/info.phtml @@ -45,7 +45,7 @@ $orderStoreDate = $block->formatDate(
- +
@@ -117,7 +117,7 @@ $orderStoreDate = $block->formatDate(
getAccountEditLink()?>
-
+