Merge pull request #1763 from jasongrout/css2

Fix tabs CSS
jupyter-widgets · Oct 20, 2017 · 3af1317 · 3af1317
2 parents 09c39b1 + 696b896
commit 3af1317
Show file tree

Hide file tree

Showing 4 changed files with 193 additions and 32 deletions.
diff --git a/packages/controls/css/phosphor.css b/packages/controls/css/phosphor.css
@@ -0,0 +1,136 @@
+/* This file has code derived from PhosphorJS CSS files, as noted below. The license for this PhosphorJS code is:
+
+Copyright (c) 2014-2017, PhosphorJS Contributors
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holder nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+*/
+
+ /* The following section is derived from https://github.com/phosphorjs/phosphor/blob/23b9d075ebc5b73ab148b6ebfc20af97f85714c4/packages/widgets/style/widget.css */
+
+.jupyter-widgets .p-Widget {
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  cursor: default;
+}
+
+
+.jupyter-widgets .p-Widget.p-mod-hidden {
+  display: none !important;
+}
+
+/* End widget.css */
+
+/* The following section is derived from https://github.com/phosphorjs/phosphor/blob/23b9d075ebc5b73ab148b6ebfc20af97f85714c4/packages/widgets/style/tabbar.css */
+
+.jupyter-widgets.widget-tab > .p-TabBar {
+  display: flex;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+
+.jupyter-widgets.widget-tab > .p-TabBar[data-orientation='horizontal'] {
+  flex-direction: row;
+}
+
+
+.jupyter-widgets.widget-tab > .p-TabBar[data-orientation='vertical'] {
+  flex-direction: column;
+}
+
+
+.jupyter-widgets.widget-tab > .p-TabBar > .p-TabBar-content {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex: 1 1 auto;
+  list-style-type: none;
+}
+
+
+.jupyter-widgets.widget-tab > .p-TabBar[data-orientation='horizontal'] > .p-TabBar-content {
+  flex-direction: row;
+}
+
+
+.jupyter-widgets.widget-tab > .p-TabBar[data-orientation='vertical'] > .p-TabBar-content {
+  flex-direction: column;
+}
+
+
+.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab {
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+
+.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabIcon,
+.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabCloseIcon {
+  flex: 0 0 auto;
+}
+
+
+.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabLabel {
+  flex: 1 1 auto;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+
+.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab.p-mod-hidden {
+  display: none !important;
+}
+
+
+.jupyter-widgets.widget-tab > .p-TabBar.p-mod-dragging .p-TabBar-tab {
+  position: relative;
+}
+
+
+.jupyter-widgets.widget-tab > .p-TabBar.p-mod-dragging[data-orientation='horizontal'] .p-TabBar-tab {
+  left: 0;
+  transition: left 150ms ease;
+}
+
+
+.jupyter-widgets.widget-tab > .p-TabBar.p-mod-dragging[data-orientation='vertical'] .p-TabBar-tab {
+  top: 0;
+  transition: top 150ms ease;
+}
+
+
+.jupyter-widgets.widget-tab > .p-TabBar.p-mod-dragging .p-TabBar-tab.p-mod-dragging {
+  transition: none;
+}
+
+/* End tabbar.css */
diff --git a/packages/controls/css/widgets-base.css b/packages/controls/css/widgets-base.css
@@ -8,6 +8,7 @@
  * have been defined.
  */
 
+@import "./phosphor.css";
 
 :root {
     --jp-widgets-color: var(--jp-content-font-color1);
@@ -897,20 +898,22 @@
 
 /* Tab Widget */
 
-.jupyter-widgets .p-TabBar {
+.jupyter-widgets.widget-tab {
+    display: flex;
+    flex-direction: column;
+}
+
+.jupyter-widgets.widget-tab > .p-TabBar {
     /* Necessary so that a tab can be shifted down to overlay the border of the box below. */
     overflow-x: visible;
     overflow-y: visible;
 }
 
-.jupyter-widgets.widget-tab .p-TabBar.p-mod-horizontal > .p-TabBar-content {
+.jupyter-widgets.widget-tab > .p-TabBar > .p-TabBar-content {
+    /* Make sure that the tab grows from bottom up */
     align-items: flex-end;
-    margin-bottom: 0;
-}
-
-.jupyter-widgets.widget-tab {
-    display: flex;
-    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
 }
 
 .jupyter-widgets.widget-tab > .widget-tab-contents {
@@ -925,16 +928,12 @@
     overflow: auto;
 }
 
-.jupyter-widgets.widget-tab .widget-tab-contents .widget-tab-child.p-mod-hidden {
-    display: none !important;
-}
-
-.jupyter-widgets.widget-tab .widget-tab-bar.p-TabBar {
+.jupyter-widgets.widget-tab > .p-TabBar {
     font: var(--jp-widgets-font-size) Helvetica, Arial, sans-serif;
-    display: block;
+    min-height: calc(var(--jp-widgets-horizontal-tab-height) + var(--jp-border-width));
 }
 
-.jupyter-widgets.widget-tab .p-TabBar-tab {
+.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab {
     flex: 0 1 var(--jp-widgets-horizontal-tab-width);
     min-width: 35px;
     min-height: calc(var(--jp-widgets-horizontal-tab-height) + var(--jp-border-width));
@@ -948,15 +947,16 @@
     position: relative;
 }
 
-.jupyter-widgets.widget-tab .p-TabBar-tab.p-mod-current {
+.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab.p-mod-current {
     color: var(--jp-ui-font-color0);
     /* We want the background to match the tab content background */
     background: var(--jp-layout-color1);
     min-height: calc(var(--jp-widgets-horizontal-tab-height) + 2 * var(--jp-border-width));
     transform: translateY(var(--jp-border-width));
+    overflow: visible;
 }
 
-.jupyter-widgets.widget-tab .p-TabBar-tab.p-mod-current:before {
+.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab.p-mod-current:before {
     position: absolute;
     top: calc(-1 * var(--jp-border-width));
     left: calc(-1 * var(--jp-border-width));
@@ -966,27 +966,27 @@
     background: var(--jp-brand-color1);
 }
 
-.jupyter-widgets.widget-tab .p-TabBar-tab:first-child {
+.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab:first-child {
     margin-left: 0;
 }
 
-.jupyter-widgets.widget-tab .p-TabBar-tab:hover:not(.p-mod-current) {
+.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab:hover:not(.p-mod-current) {
     background: var(--jp-layout-color1);
     color: var(--jp-ui-font-color1);
 }
 
-.jupyter-widgets.widget-tab.p-mod-closable > .p-TabBar-tabCloseIcon {
+.jupyter-widgets.widget-tab > .p-TabBar .p-mod-closable > .p-TabBar-tabCloseIcon {
     margin-left: 4px;
 }
 
-.jupyter-widgets.widget-tab.p-mod-closable > .p-TabBar-tabCloseIcon:before {
+.jupyter-widgets.widget-tab > .p-TabBar .p-mod-closable > .p-TabBar-tabCloseIcon:before {
     font-family: FontAwesome;
     content: '\f00d'; /* close */
 }
 
-.jupyter-widgets.widget-tab .p-TabBar-tabIcon,
-.jupyter-widgets.widget-tab .p-TabBar-tabLabel,
-.jupyter-widgets.widget-tab .p-TabBar-tabCloseIcon {
+.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabIcon,
+.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabLabel,
+.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabCloseIcon {
     line-height: var(--jp-widgets-horizontal-tab-height);
 }
 

diff --git a/packages/controls/src/phosphor/tabpanel.ts b/packages/controls/src/phosphor/tabpanel.ts
@@ -1,10 +1,35 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) 2014-2017, PhosphorJS Contributors
-|
-| Distributed under the terms of the BSD 3-Clause License.
-|
-| The full license is in the file LICENSE, distributed with this software.
-|----------------------------------------------------------------------------*/
+/* This file has code derived from PhosphorJS. The license for this PhosphorJS code is:
+
+Copyright (c) 2014-2017, PhosphorJS Contributors
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holder nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+*/
+
 import {
   MessageLoop
 } from '@phosphor/messaging';

diff --git a/packages/controls/src/widget_selectioncontainer.ts b/packages/controls/src/widget_selectioncontainer.ts
@@ -358,7 +358,7 @@ class TabView extends DOMWidgetView {
         return this.create_child_view(model).then((view: DOMWidgetView) => {
             let widget = view.pWidget;
             widget.title.label = placeholder.title.label;
-            widget.title.closable = true;
+            widget.title.closable = false;
 
             let i = ArrayExt.firstIndexOf(tabs.widgets, placeholder);
             // insert after placeholder so that if placholder is selected, the