[TASK] Adjust collapse page tree button 77/38077/5
authorDaniel Sattler <sattler@b13.de>
Mon, 23 Mar 2015 11:38:22 +0000 (12:38 +0100)
committerBenjamin Mack <benni@typo3.org>
Mon, 23 Mar 2015 22:27:07 +0000 (23:27 +0100)
To make the collapse page tree button more visible and usable
for BE User the button size needed to be increased.

Resolves: #65930
Releases: master
Change-Id: I3ee6b9036d7152f04ab49fd82d5cd3d79af93b4c
Reviewed-on: http://review.typo3.org/38077
Reviewed-by: Benjamin Kott <info@bk2k.info>
Tested-by: Benjamin Kott <info@bk2k.info>
Reviewed-by: Andreas Fernandez <andreas.fernandez@aspedia.de>
Tested-by: Andreas Fernandez <andreas.fernandez@aspedia.de>
Reviewed-by: Benjamin Mack <benni@typo3.org>
Tested-by: Benjamin Mack <benni@typo3.org>
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_docheader.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css

index 364f27a..f4c631d 100644 (file)
        background: @body-bg url(../../Images/docheader-split-background.png) left top repeat-x;
 }
 
+
+// override the ExtJS collapse page tree button
+// -------------------------
+
+@module-menu-border-color-lighter: #F5F5F5;
+@module-menu-border-color-light: #C3C3C3;
+
+#typo3-navigationContainer-xcollapsed {
+       width: 24px!important;
+       &:before {
+               content: "";
+               position: absolute;
+               top: 0;
+               width: 8px;
+               height: 100%;
+               background-color: lighten(@module-menu-bg,25%);
+               border-right: 1px solid lighten(@module-menu-border-color,20%);
+               border-left: 1px solid @module-menu-border-color;
+               .box-shadow(3px 0 0 rgba(0,0,0,0.15));
+       }
+}
+
+// center collapse button vertical
+.x-panel-body {
+       .x-layout-cmini-west .x-layout-mini,
+       .x-layout-split-west .x-layout-mini {
+               top: 50%;
+               margin-top: -40px;
+       }
+}
+
+
+// styling for the page tree collapse button
+// this class will be extended from ExtJS CSS Class setup (ExtJS close and open html setup)
+.typo3-btn-collapse-page-tree {
+       height: 80px;
+       width: 14px;
+       border-top-right-radius: 3px;
+       border-bottom-right-radius: 3px;
+       background: none;
+       border: 1px solid @module-menu-border-color-light;
+       border-left: 1px solid @module-menu-border-color-lighter;
+       display: block;
+       font-size: 0;
+       .opacity(1);
+       &:after {
+               font-family: 'FontAwesome';
+               content: "\f0d9";
+               position: absolute;
+               top: 50%;
+               display: block;
+               width: 100%;
+               margin-top: -1px;
+               color: #000;
+               font-size: 12px;
+               vertical-align: middle;
+               text-align: center;
+       }
+}
+
+// close page tree button
+.x-layout-split-west .x-layout-mini {
+       &:extend(.typo3-btn-collapse-page-tree all);
+       margin-left: -2px;
+       background-color: @module-menu-border-color-lighter;
+       &:hover {
+               background-color: darken(@module-menu-border-color-lighter,5%);
+       }
+}
+
+// open page tree button
+.x-layout-cmini-west .x-layout-mini {
+       &:extend(.typo3-btn-collapse-page-tree all);
+       background-color: lighten(@module-menu-bg, 25%);
+       margin-left: 7px;
+       border: 1px solid lighten(@module-menu-border-color, 20%);
+       border-left: 0;
+
+       &:hover {
+               .opacity(1);
+               background-color: lighten(@module-menu-bg,30%);
+       }
+       &:after {
+               margin-top: -9px;
+               color: #fff;
+               content: "\f0da";
+       }
+}
+
+
+
 //
 // ExtJS theme for PageTree
 //
index 95d8d51..cb18923 100644 (file)
@@ -8014,6 +8014,79 @@ div#contentMenu1 {
 #typo3-navigationDummy {
   background: #ffffff url(../../Images/docheader-split-background.png) left top repeat-x;
 }
+#typo3-navigationContainer-xcollapsed {
+  width: 24px!important;
+}
+#typo3-navigationContainer-xcollapsed:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: 8px;
+  height: 100%;
+  background-color: #626262;
+  border-right: 1px solid #444444;
+  border-left: 1px solid #111111;
+  -webkit-box-shadow: 3px 0 0 rgba(0, 0, 0, 0.15);
+  box-shadow: 3px 0 0 rgba(0, 0, 0, 0.15);
+}
+.x-panel-body .x-layout-cmini-west .x-layout-mini,
+.x-panel-body .x-layout-split-west .x-layout-mini {
+  top: 50%;
+  margin-top: -40px;
+}
+.typo3-btn-collapse-page-tree,
+.x-layout-split-west .x-layout-mini,
+.x-layout-cmini-west .x-layout-mini {
+  height: 80px;
+  width: 14px;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  background: none;
+  border: 1px solid #c3c3c3;
+  border-left: 1px solid #f5f5f5;
+  display: block;
+  font-size: 0;
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
+.typo3-btn-collapse-page-tree:after,
+.x-layout-split-west .x-layout-mini:after,
+.x-layout-cmini-west .x-layout-mini:after {
+  font-family: 'FontAwesome';
+  content: "\f0d9";
+  position: absolute;
+  top: 50%;
+  display: block;
+  width: 100%;
+  margin-top: -1px;
+  color: #000;
+  font-size: 12px;
+  vertical-align: middle;
+  text-align: center;
+}
+.x-layout-split-west .x-layout-mini {
+  margin-left: -2px;
+  background-color: #f5f5f5;
+}
+.x-layout-split-west .x-layout-mini:hover {
+  background-color: #e8e8e8;
+}
+.x-layout-cmini-west .x-layout-mini {
+  background-color: #626262;
+  margin-left: 7px;
+  border: 1px solid #444444;
+  border-left: 0;
+}
+.x-layout-cmini-west .x-layout-mini:hover {
+  opacity: 1;
+  filter: alpha(opacity=100);
+  background-color: #6f6f6f;
+}
+.x-layout-cmini-west .x-layout-mini:after {
+  margin-top: -9px;
+  color: #fff;
+  content: "\f0da";
+}
 #typo3-pagetree-topPanelItems {
   background-color: linear-gradient(to bottom, #ebebeb 0%, #cdcdcd 100%);
   background: linear-gradient(to bottom, #ebebeb 0%, #cdcdcd 100%);