mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 12:05:37 +00:00
Refactor and comment TabSet.js
This commit is contained in:
Naomi Guyer
Ingo Schommer
parent
235e8c8138
commit
618e639526
@ -196,10 +196,10 @@ form.small .field input.text, form.small .field textarea, form.small .field sele
|
||||
.field.remove-splitter { border-bottom: none; box-shadow: none; }
|
||||
|
||||
/** ---------------------------------------------------- Buttons ---------------------------------------------------- */
|
||||
.cms .button-no-style button, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button { background: none; border: none; display: block; margin: 0; outline: none; color: #0073c1; font-weight: normal; width: 210px; /* same as width of surrounding panel */ text-align: left; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; text-shadow: none; margin-left: -10px; }
|
||||
.cms .button-no-style button.ss-ui-action-destructive, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button.ss-ui-action-destructive { color: #c22730; }
|
||||
.cms .button-no-style button span, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button span { padding-left: 0; padding-right: 0; }
|
||||
.cms .button-no-style button:hover, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button:hover, .cms .button-no-style button:focus, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button:focus, .cms .button-no-style button:active, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button:active { outline: none; background: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none; }
|
||||
.cms .button-no-style button, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel button { background: none; border: none; display: block; margin: 0; outline: none; color: #0073c1; font-weight: normal; width: 210px; /* same as width of surrounding panel */ text-align: left; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; text-shadow: none; margin-left: -10px; }
|
||||
.cms .button-no-style button.ss-ui-action-destructive, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel button.ss-ui-action-destructive { color: #c22730; }
|
||||
.cms .button-no-style button span, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel button span { padding-left: 0; padding-right: 0; }
|
||||
.cms .button-no-style button:hover, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel button:hover, .cms .button-no-style button:focus, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel button:focus, .cms .button-no-style button:active, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel button:active { outline: none; background: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none; }
|
||||
.cms .Actions > *, .cms .cms-actions-row > * { display: block; float: left; margin-right: 8px; }
|
||||
.cms .Actions > *:last-child, .cms .cms-actions-row > *:last-child { margin-right: 0; }
|
||||
.cms .Actions { min-height: 30px; overflow: auto; padding: 8px 12px; }
|
||||
@ -1011,45 +1011,45 @@ visible. Added and removed with js in TabSet.js */ }
|
||||
.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel #PageType ul li { padding: 4px 5px; }
|
||||
.cms .ss-ui-action-tabset .last .ss-ui-action-tab { right: -1px; left: auto; }
|
||||
.cms .cms-content-actions .Actions { overflow: visible; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset ul.ui-tabs-nav { margin: 0; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset ul.ui-tabs-nav li a.ui-tabs-anchor { font-weight: normal; font-size: 13px; line-height: 24px; padding-right: 25px; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset ul.ui-tabs-nav li a.ui-tabs-anchor:after { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1189px no-repeat; width: 16px; height: 16px; content: ""; display: inline-block; margin-left: 6px; border-bottom: 0; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset ul.ui-tabs-nav li a.ui-tabs-anchor:hover:after { border-bottom: 0; background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1163px no-repeat; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset ul.ui-tabs-nav li.ui-state-active a.ui-tabs-anchor:after { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1215px no-repeat; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset ul.ui-tabs-nav li.ui-state-active a.ui-tabs-anchor:hover:after { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1137px no-repeat; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel { overflow: hidden; *zoom: 1; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; /* Restyle for smaller area*/ background-color: #eceff1; border: 1px solid #ccc; border-bottom: 1px solid #eceff1; clear: both; display: block; position: absolute; top: -204px; width: 190px; /* same width as buttons within panel */ z-index: 1; padding: 10px; margin: 0; margin-top: 1px; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel h3, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel h4, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel h5 { font-weight: bold; line-height: 16px; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel h3 { font-size: 13px; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel h4 { font-size: 12px; margin: 5px 0; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .ui-widget-content { background: none; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field { /* Fields are more compressed in some areas compared to the main content editing window so the below alters the internal spacing of the fields so we can move that spacing to between the form fields rather than padding */ border-bottom: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field label { float: none; width: auto; font-size: 12px; padding: 0 8px 4px 0; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field label.extra-details { overflow: hidden; margin-top: 10px; display: block; color: #9d9d9d; font-style: italic; font-weight: normal; font-size: 1em; float: left; text-shadow: none; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field label.extra-details.fill:before { color: #fff; content: '?'; font-size: 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 3px; padding-right: 3px; display: block; float: left; text-shadow: none; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; background-color: #b7b7b7; width: 15px; height: 15px; margin-right: 5px; margin-bottom: 5px; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field .middleColumn { margin: 0; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field input.text, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field select, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field textarea { padding: 5px; font-size: 11px; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field.checkbox { padding: 0 8px 0; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .field.checkbox input { margin: 2px 0; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .fieldgroup .fieldgroup-field { padding: 0; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .fieldgroup .fieldgroup-field .field { margin: 0; padding: 0; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .cms-content-fields { overflow: visible; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .chzn-container-single { width: 100% !important; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .chzn-container-single .chzn-single { padding: 0 0 0 5px; float: none; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .cms-content-actions, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .cms-preview-controls { padding: 0; height: auto; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .cms-edit-form { width: 100%; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .CompositeField { margin: 0; padding: 0; float: none; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .parent-mode { padding-top: 0; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .treedropdown, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .SelectionGroup li.selected div.field { margin: 10px 0 0 0; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .treedropdown .treedropdownfield-title, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-title { position: absolute; z-index: 2; padding: 5px; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .treedropdown .treedropdownfield-panel, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-panel { margin-top: 11px; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .treedropdown .treedropdownfield-toggle-panel-link, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-toggle-panel-link { background: none; border-left: none; padding: 5px 3px; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .treedropdown .treedropdownfield-toggle-panel-link .ui-icon, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-toggle-panel-link .ui-icon { float: right; opacity: 0.7; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .cms-add-form ul.SelectionGroup { padding-left: 0; padding-right: 0; overflow: visible; border-bottom: none; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .chzn-container-single .chzn-single { padding: 0 0 0 5px; float: none; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button.ss-ui-button:hover, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button.ss-ui-button:focus, .cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel button.ss-ui-button:active { /*text-decoration:underline;*/ background-color: #e0e5e8; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: none; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .cms-sitetree-information { border-bottom: 1px solid #d0d3d5; margin-bottom: 8px; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-tabs-panel .cms-sitetree-information p.meta-info { color: #999; font-size: 11px; line-height: 16px; margin-bottom: 8px; }
|
||||
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .last .ui-tabs-panel.ss-ui-action-tab { right: -1px; left: auto; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset ul.ui-tabs-nav { margin: 0; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset ul.ui-tabs-nav li a.ui-tabs-anchor { font-weight: normal; font-size: 13px; line-height: 24px; padding-right: 25px; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset ul.ui-tabs-nav li a.ui-tabs-anchor:after { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1189px no-repeat; width: 16px; height: 16px; content: ""; display: inline-block; margin-left: 6px; border-bottom: 0; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset ul.ui-tabs-nav li a.ui-tabs-anchor:hover:after { border-bottom: 0; background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1163px no-repeat; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset ul.ui-tabs-nav li.ui-state-active a.ui-tabs-anchor:after { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1215px no-repeat; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset ul.ui-tabs-nav li.ui-state-active a.ui-tabs-anchor:hover:after { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1137px no-repeat; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel { overflow: hidden; *zoom: 1; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; /* Restyle for smaller area*/ background-color: #eceff1; border: 1px solid #ccc; border-bottom: 1px solid #eceff1; clear: both; display: block; position: absolute; top: -204px; width: 190px; /* same width as buttons within panel */ z-index: 1; padding: 10px; margin: 0; margin-top: 1px; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel h3, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel h4, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel h5 { font-weight: bold; line-height: 16px; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel h3 { font-size: 13px; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel h4 { font-size: 12px; margin: 5px 0; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .ui-widget-content { background: none; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .field { /* Fields are more compressed in some areas compared to the main content editing window so the below alters the internal spacing of the fields so we can move that spacing to between the form fields rather than padding */ border-bottom: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .field label { float: none; width: auto; font-size: 12px; padding: 0 8px 4px 0; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .field label.extra-details { overflow: hidden; margin-top: 10px; display: block; color: #9d9d9d; font-style: italic; font-weight: normal; font-size: 1em; float: left; text-shadow: none; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .field label.extra-details.fill:before { color: #fff; content: '?'; font-size: 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 3px; padding-right: 3px; display: block; float: left; text-shadow: none; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; background-color: #b7b7b7; width: 15px; height: 15px; margin-right: 5px; margin-bottom: 5px; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .field .middleColumn { margin: 0; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .field input.text, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .field select, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .field textarea { padding: 5px; font-size: 11px; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .field.checkbox { padding: 0 8px 0; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .field.checkbox input { margin: 2px 0; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .fieldgroup .fieldgroup-field { padding: 0; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .fieldgroup .fieldgroup-field .field { margin: 0; padding: 0; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .cms-content-fields { overflow: visible; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .chzn-container-single { width: 100% !important; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .chzn-container-single .chzn-single { padding: 0 0 0 5px; float: none; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .cms-content-actions, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .cms-preview-controls { padding: 0; height: auto; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .cms-edit-form { width: 100%; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .CompositeField { margin: 0; padding: 0; float: none; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .parent-mode { padding-top: 0; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .treedropdown, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .SelectionGroup li.selected div.field { margin: 10px 0 0 0; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .treedropdown .treedropdownfield-title, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-title { position: absolute; z-index: 2; padding: 5px; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .treedropdown .treedropdownfield-panel, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-panel { margin-top: 11px; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .treedropdown .treedropdownfield-toggle-panel-link, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-toggle-panel-link { background: none; border-left: none; padding: 5px 3px; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .treedropdown .treedropdownfield-toggle-panel-link .ui-icon, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-toggle-panel-link .ui-icon { float: right; opacity: 0.7; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .cms-add-form ul.SelectionGroup { padding-left: 0; padding-right: 0; overflow: visible; border-bottom: none; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .chzn-container-single .chzn-single { padding: 0 0 0 5px; float: none; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel button.ss-ui-button:hover, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel button.ss-ui-button:focus, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel button.ss-ui-button:active { /*text-decoration:underline;*/ background-color: #e0e5e8; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: none; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .cms-sitetree-information { border-bottom: 1px solid #d0d3d5; margin-bottom: 8px; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .cms-sitetree-information p.meta-info { color: #999; font-size: 11px; line-height: 16px; margin-bottom: 8px; }
|
||||
.cms .cms-content-actions .Actions .ss-ui-action-tabset .last .ui-tabs-panel.ss-ui-action-tab { right: -1px; left: auto; }
|
||||
.cms .cms-tree-view-sidebar { min-width: 176px; /* for when the scrollbar is present & find dropdown open */ }
|
||||
.cms .cms-tree-view-sidebar .ss-ui-action-tabset ul.ui-tabs-nav > li { width: auto; }
|
||||
.cms .cms-tree-view-sidebar .ss-ui-action-tabset ul.ui-tabs-nav > li a.tab-nav-link { width: 30px; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 0; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; }
|
||||
|
||||
@ -200,7 +200,7 @@ $border: 1px solid darken(#D9D9D9, 15%);
|
||||
.cms-content-actions .Actions{
|
||||
overflow:visible; //for testing (changed in another branch)
|
||||
|
||||
.rise-up.ss-ui-action-tabset{
|
||||
.ss-ui-action-tabset{
|
||||
ul.ui-tabs-nav {
|
||||
margin: 0;
|
||||
li {
|
||||
|
||||
@ -1,102 +1,20 @@
|
||||
(function($){
|
||||
$.entwine('ss', function($){
|
||||
/**
|
||||
* Lightweight wrapper around jQuery UI tabs.
|
||||
* Lightweight wrapper around jQuery UI tabs for generic tab set-up
|
||||
* and special rules for two other use cases (ss-ui-action-tabset):
|
||||
* * Site tree action tabs (to perform actions on the site tree)
|
||||
* * Actions menu (Edit page actions)
|
||||
*/
|
||||
$('.ss-tabset').entwine({
|
||||
|
||||
/*Custom functionality for special action tabsets*/
|
||||
actionTabs: function(){
|
||||
this.tabs(
|
||||
'option',
|
||||
'collapsible',
|
||||
true
|
||||
).tabs('option', 'active', false);
|
||||
|
||||
//Apply special behaviour to the cms actions row
|
||||
if(this.hasClass('cms-actions-row')){
|
||||
|
||||
/* If actions panel is within the tree, apply active class
|
||||
to help animate open/close on hover
|
||||
Position must be reset else anyone coming from main sitetree
|
||||
will see broken tabs */
|
||||
var container = this.parent().parent();
|
||||
if($(container).hasClass('cms-tree-view-sidebar')){
|
||||
$('.ui-tabs-nav li').hover(function(){
|
||||
$(this).parent().find('li .active').removeClass('active');
|
||||
$(this).find('a').addClass('active');
|
||||
});
|
||||
|
||||
this.tabs({
|
||||
beforeActivate:function(event, ui){
|
||||
var activePanel = ui.newPanel;
|
||||
$(activePanel).attr("style","left : auto; right: auto");
|
||||
$(this).closest('.ss-ui-action-tabset').removeClass('tabset-open').removeClass('tabset-open-last');
|
||||
|
||||
if($(activePanel).length > 0){
|
||||
$(activePanel).parent().addClass('tabset-open');
|
||||
}
|
||||
}
|
||||
});
|
||||
}else{
|
||||
/* If the tabs are in the full site tree view, do some
|
||||
positioning so tabPanel stays with relevent tab */
|
||||
this.tabs({
|
||||
beforeActivate:function(event, ui){
|
||||
var activePanel = ui.newPanel;
|
||||
var activeTab = ui.newTab;
|
||||
$(this).closest('.ss-ui-action-tabset').removeClass('tabset-open').removeClass('tabset-open-last');
|
||||
if($(activePanel).length > 0){
|
||||
if($(activeTab).hasClass("last")){
|
||||
$(activePanel).attr("style","left : auto; right: 0px");
|
||||
$(activePanel).parent().addClass('tabset-open-last');//last needs to be styled differently when open
|
||||
}else{
|
||||
$(activePanel).attr("style","left: "+activeTab.position().left+"px");
|
||||
if($(activeTab).hasClass("first")){
|
||||
$(activePanel).attr("style","left: 0px");
|
||||
$(activePanel).parent().addClass('tabset-open');
|
||||
}else{
|
||||
$(activePanel).attr("style","left: "+activeTab.position().left+"px");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
}else if(this.parents('.cms-content-actions')){
|
||||
var that = this;
|
||||
var closeHandler = function(event){
|
||||
if (!$(event.target).closest(that).length) {
|
||||
that.tabs('option', 'active', false);
|
||||
var frame = $('.cms').find('iframe');
|
||||
frame.each(function(index, iframe){
|
||||
$(iframe).contents().off('click', closeHandler);
|
||||
});
|
||||
$(document).off('click', closeHandler);
|
||||
};
|
||||
}
|
||||
this.tabs({
|
||||
beforeActivate:function(event, ui){
|
||||
var activePanel = ui.newPanel;
|
||||
var activeTab = ui.newTab;
|
||||
var frame = $('.cms').find('iframe');
|
||||
if($(activePanel).length > 0){
|
||||
$(activePanel).attr("style","left: "+activeTab.position().left+"px");
|
||||
}
|
||||
$(document).on('click', closeHandler);
|
||||
//Make sure iframe click also closes tab
|
||||
if(frame.length > 0){
|
||||
frame.each(function(index, iframe){
|
||||
$(iframe).contents().on('click', closeHandler);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
//Check if tabs should open upwards, and adjust
|
||||
this.riseUp();
|
||||
},
|
||||
/******************************************************
|
||||
* Lightweight wrapper around jQuery UI tabs:
|
||||
* * onadd
|
||||
* * onremove
|
||||
* * redrawTabs
|
||||
* * rewriteHashlinks
|
||||
*******************************************************/
|
||||
onadd: function() {
|
||||
// Can't name redraw() as it clashes with other CMS entwine classes
|
||||
this.redrawTabs();
|
||||
@ -106,47 +24,11 @@
|
||||
if(this.data('uiTabs')) this.tabs('destroy');
|
||||
this._super();
|
||||
},
|
||||
riseUp: function(){
|
||||
/* Function checks to see if a tab should be opened upwards
|
||||
(based on space concerns. If true, the rise-up class is applied
|
||||
and the position is calculated and applied to the element */
|
||||
var elHeight = $(this).find('.ui-tabs-panel').outerHeight();
|
||||
var trigger = $(this).find('.ui-tabs-nav').outerHeight();
|
||||
var endOfWindow = ($(window).height() + $(document).scrollTop()) - trigger;
|
||||
var elPos = $(this).find('.ui-tabs-nav').offset().top;
|
||||
var that = this;
|
||||
if(elPos + elHeight >= endOfWindow && elPos - elHeight > 0){
|
||||
this.addClass('rise-up');
|
||||
|
||||
/* Apply position to tab */
|
||||
this.tabs({
|
||||
activate:function(event, ui){
|
||||
var activePanel = ui.newPanel;
|
||||
var activeTab = ui.newTab;
|
||||
if(activeTab.position() != null){
|
||||
var topPosition = -activePanel.outerHeight();
|
||||
var containerSouth = activePanel.parents('.south');
|
||||
if(containerSouth){
|
||||
//If container is the southern panel, make tab appear from the top of the container
|
||||
var padding = activeTab.offset().top - containerSouth.offset().top;
|
||||
topPosition = topPosition-padding;
|
||||
}
|
||||
|
||||
$(activePanel).css('top',topPosition+"px");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}else{
|
||||
this.removeClass('rise-up');
|
||||
}
|
||||
return false;
|
||||
},
|
||||
redrawTabs: function() {
|
||||
this.rewriteHashlinks();
|
||||
this.tabs();
|
||||
|
||||
//Apply special behaviour to action tabs: closed by default, and collapsible
|
||||
//Apply special behaviour to ss-ui-action-tabset
|
||||
if(this.hasClass('ss-ui-action-tabset')){
|
||||
this.actionTabs();
|
||||
}
|
||||
@ -164,6 +46,225 @@
|
||||
if(!matches) return;
|
||||
$(this).attr('href', document.location.href.replace(/#.*/, '') + matches[0]);
|
||||
});
|
||||
},
|
||||
|
||||
/***************************************************
|
||||
* Custom functionality for special action tabsets
|
||||
* * actionTabs
|
||||
* * siteTreeActions
|
||||
* * actionsMenu
|
||||
* * closeTabs
|
||||
* * riseUp
|
||||
***************************************************/
|
||||
|
||||
/*
|
||||
Apply generic rules for action tabs (collapsible, rise, and close),
|
||||
then call specific functions to handle each type of action tab
|
||||
*/
|
||||
actionTabs: function(){
|
||||
var that = this;
|
||||
|
||||
//Set actionTabs to allow closing and be closed by default
|
||||
this.tabs(
|
||||
'option',
|
||||
'collapsible',
|
||||
true
|
||||
).tabs('option', 'active', false);
|
||||
|
||||
|
||||
//Call close function on beforeactivate event
|
||||
this.on( "tabsbeforeactivate", function(event, ui) {
|
||||
that.closeTabs(event, ui);
|
||||
});
|
||||
|
||||
// Call riseUp funciton on befporeactivate to check if tabs should
|
||||
// open upwards (based on available space) and adjust
|
||||
this.on( "tabsbeforeactivate", function(event, ui) {
|
||||
that.riseUp(event, ui);
|
||||
});
|
||||
|
||||
// Apply special behaviour depending on whether tabs are
|
||||
// sitetree actions, or an actionmenu
|
||||
if(this.parents('.cms-content-actions')){
|
||||
this.actionsMenu();
|
||||
} else if(this.hasClass('cms-actions-row')){
|
||||
this.siteTreeActions();
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
* Apply custom rules to the Actions Menu
|
||||
* Currently includes positioning logic
|
||||
*/
|
||||
actionsMenu: function(){
|
||||
this.tabs({
|
||||
beforeActivate:function(event, ui){ //Set options before tab activated (but after clicked)
|
||||
var activePanel = ui.newPanel; //panel about to open
|
||||
var activeTab = ui.newTab; //tab nav item about to become active
|
||||
|
||||
//Set the position of the opening tab (if it exists)
|
||||
if($(activePanel).length > 0){
|
||||
$(activePanel).css('left', activeTab.position().left+"px");
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/*
|
||||
Apply rules to the siteTree actions. These action panels should
|
||||
recieve different positions and classes depending on whether they are
|
||||
appearing in the full page site tree view, or in the sidebar
|
||||
*/
|
||||
siteTreeActions: function(){
|
||||
var that = this;
|
||||
var container = this.parent().parent();
|
||||
|
||||
//Remove open classes on beforeactivate
|
||||
this.on( "tabsbeforeactivate", function(event, ui) {
|
||||
// Remove tabset open classes (last gets a unique class
|
||||
// in the bigger sitetree, so remove this too)
|
||||
$(that).closest('.ss-ui-action-tabset')
|
||||
.removeClass('tabset-open')
|
||||
.removeClass('tabset-open-last');
|
||||
});
|
||||
|
||||
/* Apply specific rules if the actions panel appears in the side-bar
|
||||
* Includes:
|
||||
* * a hover helper class for animation,
|
||||
* * reseting positioning of panels
|
||||
*/
|
||||
if($(container).hasClass('cms-tree-view-sidebar')){
|
||||
/* If actions panel is within the sidebar, apply active class
|
||||
to help animate open/close on hover */
|
||||
$('.ui-tabs-nav li').hover(function(){
|
||||
$(this).parent().find('li .active').removeClass('active');
|
||||
$(this).find('a').addClass('active');
|
||||
});
|
||||
|
||||
/* Reset position of tabs, else anyone going between the large
|
||||
and the small sitetree will see broken tabs */
|
||||
this.tabs({
|
||||
// Note: beforeActivate runs when a tab is clicked,
|
||||
// but before it is visible.
|
||||
beforeActivate:function(event, ui){
|
||||
var activePanel = ui.newPanel; //the new active panel
|
||||
|
||||
//Apply styles with css, to avoid overriding currently applied styles
|
||||
$(activePanel).css({'left': 'auto', 'right': 'auto'}); //reset left and right positioning
|
||||
|
||||
if($(activePanel).length > 0){
|
||||
$(activePanel).parent().addClass('tabset-open');
|
||||
}
|
||||
}
|
||||
});
|
||||
}else{
|
||||
/* If the tabs are in the full site tree view, do some
|
||||
positioning so tabPanel stays with relevent tab */
|
||||
this.tabs({
|
||||
beforeActivate:function(event, ui){
|
||||
var activePanel = ui.newPanel;
|
||||
var activeTab = ui.newTab;
|
||||
|
||||
if($(activePanel).length > 0){
|
||||
if($(activeTab).hasClass("last")){
|
||||
// Align open tab to the right (because opened tab is last)
|
||||
$(activePanel).css({'left': 'auto', 'right': '0px'});
|
||||
|
||||
//last needs to be styled differently when open, so apply a unique class
|
||||
$(activePanel).parent().addClass('tabset-open-last');
|
||||
}else{
|
||||
//Assign position to tabpanel based on position of relivent activeTab item
|
||||
$(activePanel).css('left', activeTab.position().left+"px");
|
||||
|
||||
// If this is the first tab, make sure the position doesn't include border
|
||||
// (hard set position to 0 ), and add the tab-set open class
|
||||
if($(activeTab).hasClass("first")){
|
||||
$(activePanel).css('left',"0px");
|
||||
$(activePanel).parent().addClass('tabset-open');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
* Generic function to close open tabs when something other than
|
||||
* the open tab is clicked. Stores event in a handler, and removes
|
||||
* the bound event once activated. Used by ss-ui-action-tabset.
|
||||
*
|
||||
* Note: Should be called by a tabsbeforeactivate event
|
||||
*/
|
||||
closeTabs: function(event, ui){
|
||||
var that = this;
|
||||
var frame = $('.cms').find('iframe'); //get all iframes on the page
|
||||
|
||||
// Create a handler for the click event so we can close tabs
|
||||
// and easily remove the event once done
|
||||
var closeHandler = function(event){
|
||||
//close open tab
|
||||
if (!$(event.target).closest(that).length) {
|
||||
that.tabs('option', 'active', false); // close tabs
|
||||
|
||||
//remove click event from objects it is bound to (iframe's and document)
|
||||
var frame = $('.cms').find('iframe');
|
||||
frame.each(function(index, iframe){
|
||||
$(iframe).contents().off('click', closeHandler);
|
||||
});
|
||||
$(document).off('click', closeHandler);
|
||||
};
|
||||
}
|
||||
|
||||
//Bind click event to document, and use closeHandler to handle the event
|
||||
$(document).on('click', closeHandler);
|
||||
// Make sure iframe click also closes tab
|
||||
// iframe needs a special case, else the click event will not register here
|
||||
if(frame.length > 0){
|
||||
frame.each(function(index, iframe){
|
||||
$(iframe).contents().on('click', closeHandler);
|
||||
});
|
||||
}
|
||||
},
|
||||
/*****************************************************************
|
||||
* Function riseUp checks to see if a tab should be opened upwards
|
||||
* (based on space concerns). If true, the rise-up class is applied
|
||||
* and a new position is calculated and applied to the element.
|
||||
*
|
||||
* Note: Should be called by a tabsbeforeactivate event
|
||||
******************************************************************/
|
||||
riseUp: function(event, ui){
|
||||
|
||||
// Get the numbers needed to calculate positions
|
||||
var elHeight = $(this).find('.ui-tabs-panel').outerHeight();
|
||||
var trigger = $(this).find('.ui-tabs-nav').outerHeight();
|
||||
var endOfWindow = ($(window).height() + $(document).scrollTop()) - trigger;
|
||||
var elPos = $(this).find('.ui-tabs-nav').offset().top;
|
||||
|
||||
var activePanel = ui.newPanel;
|
||||
var activeTab = ui.newTab;
|
||||
|
||||
if (elPos + elHeight >= endOfWindow && elPos - elHeight > 0){
|
||||
this.addClass('rise-up');
|
||||
|
||||
if (activeTab.position() != null){
|
||||
var topPosition = -activePanel.outerHeight();
|
||||
var containerSouth = activePanel.parents('.south');
|
||||
if (containerSouth){
|
||||
//If container is the southern panel, make tab appear from the top of the container
|
||||
var padding = activeTab.offset().top - containerSouth.offset().top;
|
||||
topPosition = topPosition-padding;
|
||||
}
|
||||
$(activePanel).css('top',topPosition+"px");
|
||||
}
|
||||
} else {
|
||||
//else remove the rise-up class and set top to 0
|
||||
this.removeClass('rise-up');
|
||||
if (activeTab.position() != null){
|
||||
$(activePanel).css('top','0px');
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user