Merge pull request #2550 from cameronoelsen/about-dialog

"About JupyterLab" Dialog overhaul

packages/apputils/src/dialog.ts

@@ -314,7 +314,7 @@ namespace Dialog {
     /**
      * The top level text for the dialog.  Defaults to an empty string.
      */
-    title?: string;
+    title?: HeaderType;
 
     /**
      * The main body element for the dialog or a message to display.
@@ -401,6 +401,12 @@ namespace Dialog {
   export
   type ButtonOptions = Partial<IButton>;
 
+  /**
+   * The header input types.
+   */
+  export
+  type HeaderType = HTMLElement | string;
+
   /**
    * The body input types.
    */
@@ -464,7 +470,7 @@ namespace Dialog {
      *
      * @returns A widget for the dialog header.
      */
-    createHeader(title: string): Widget;
+    createHeader(title: HeaderType): Widget;
 
     /**
      * Create the body of the dialog.
@@ -506,13 +512,16 @@ namespace Dialog {
      *
      * @returns A widget for the dialog header.
      */
-    createHeader(title: string): Widget {
-      let header = new Widget();
+    createHeader(title: HeaderType): Widget {
+      let header: Widget;
+      if (typeof title === 'string') {
+        header = new Widget({ node: document.createElement('span') });
+        header.node.textContent = title;
+      } else {
+        header = new Widget({ node: title });
+      }
       header.addClass('jp-Dialog-header');
-      let titleNode = document.createElement('span');
-      titleNode.textContent = title;
-      titleNode.className = 'jp-Dialog-title';
-      header.node.appendChild(titleNode);
+      Styling.styleNode(header.node);
       return header;
     }
 

packages/apputils/style/dialog.css

@@ -80,28 +80,6 @@
 }
 
 
-button.jp-mod-styled.jp-mod-accept {
-  background: var(--jp-brand-color1);
-  color: var(--jp-inverse-ui-font-color0);
-  border: 1px solid var(--jp-brand-color1);
-}
-
-
-button.jp-mod-styled.jp-mod-reject {
-  background: var(--md-grey-500);
-  margin-right: 12px;
-  border: 1px solid var(--md-grey-500);
-  color: var(--jp-inverse-ui-font-color0);
-}
-
-
-button.jp-mod-styled.jp-mod-warn {
-  background: var(--jp-error-color1);
-  color: var(--jp-inverse-ui-font-color0);
-  border: 1px solid var(--jp-error-color1);
-}
-
-
 .jp-Dialog-body > .jp-select-wrapper {
   width: 252px;
   border: var(--jp-border-width) solid var(--jp-border-color1);

packages/help-extension/src/index.ts

@@ -217,23 +217,41 @@ function activate(app: JupyterLab, mainMenu: IMainMenu, palette: ICommandPalette
   commands.addCommand(CommandIDs.about, {
     label: `About ${info.name}`,
     execute: () => {
-      let previewMessage = `alpha (v${info.version})`;
-      let logo = h.span({
-        className: `jp-ImageJupyterLab jp-About-logo`
-      });
-      let subtitle = h.span(
-        {className: 'jp-About-subtitle'},
-        previewMessage
+
+      //Create the header of the about dialog
+      let headerLogo = h.div({className: 'jp-About-header-logo'});
+      let headerWordmark = h.div({className: 'jp-About-header-wordmark'});
+      let release = 'alpha release';
+      let versionNumber = `version: ${info.version}`;
+      let versionInfo = h.span({className: 'jp-About-version-info'},
+        h.span({className: 'jp-About-release'}, release),
+        h.span({className: 'jp-About-version'}, versionNumber)
       );
+      let title = VirtualDOM.realize(h.span({className: 'jp-About-header'},
+        headerLogo,
+        h.div({className: 'jp-About-header-info'},
+          headerWordmark,
+          versionInfo
+        )
+      ));
 
-      let body = VirtualDOM.realize(h.div({ className: 'jp-About' },
-        logo,
-        subtitle
+      //Create the body of the about dialog
+      let jupyterURL = 'https://jupyter.org/about.html';
+      let contributorsURL = 'https://github.com/jupyterlab/jupyterlab/graphs/contributors';
+      let externalLinks = h.span({className: 'jp-About-externalLinks'},
+        h.a({href: contributorsURL, target: '_blank', className: 'jp-Button-flat'}, "CONTRIBUTOR LIST"),
+        h.a({href: jupyterURL, target: '_blank', className: 'jp-Button-flat'}, "ABOUT PROJECT JUPYTER")
+      );
+      let copyright = h.span({className: 'jp-About-copyright'}, "© 2017 Project Jupyter");
+      let body = VirtualDOM.realize(h.div({ className: 'jp-About-body' },
+        externalLinks,
+        copyright
       ));
+
       showDialog({
-        title: `About ${info.name}`,
+        title,
         body,
-        buttons: [Dialog.okButton()]
+        buttons: [Dialog.createButton({label: 'DISMISS', className: 'jp-About-button jp-mod-reject jp-mod-styled'})]
       });
     }
   });

packages/help-extension/style/index.css

@@ -26,38 +26,97 @@
 }
 
 
-.jp-About {
+.jp-About-body {
+  display: flex;
+  font-family: var(--jp-ui-font-family);
   font-size: var(--jp-ui-font-size1);
   color: var(--jp-ui-font-color1);
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  text-align: left;
   flex-direction: column;
-  padding-top: 14px;
-  padding-bottom: 14px;
   width: 100%;
+  min-width: 360px;
+  overflow: visible;
 }
 
 
-.jp-About-logo {
-  flex: 0 0 50px;
-  margin-left: auto;
-  margin-right: auto;
-  width: 100%;
-  background-size: 232px 50px;
+.jp-Dialog .jp-Dialog-content div.jp-About-header-wordmark {
+  flex: 0 0 auto;
+  height: 44px;
+  width: auto;
+  background-image: url(../../theming/style/images/jupyterlab-wordmark.svg);
+  background-size: 196px 50px;
   background-repeat: no-repeat;
-  background-position: center;
-  margin-top: 20px;
+  padding-bottom: 0px;
 }
 
 
-.jp-About-subtitle {
+.jp-About-version-info {
   color: var(--md-grey-600);
   font-size: var(--jp-ui-font-size2);
   width: 200px;
   font-weight: 400;
   letter-spacing: .4px;
   text-align: left;
-  padding-left: 68px;
+  padding-top: 8px;
+  line-height: 1.12;
+}
+
+
+.jp-Dialog .jp-Dialog-content .jp-Dialog-footer .jp-Dialog-button.jp-About-button {
+  margin-right: 0px;
+}
+
+
+.jp-About-release, .jp-About-version {
+  display: block;
+}
+
+
+.jp-About-version {
+  padding-top: 8px;
+}
+
+
+.jp-About-externalLinks {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-top: 12px;
+  margin-bottom: -15px;
 }
+
+
+.jp-About-externalLinks .jp-Button-flat {
+  color: #F37726;
+}
+
+
+.jp-About-copyright {
+  position: relative;
+  bottom: -48px;
+}
+
+
+.jp-About-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+
+.jp-About-header-info {
+  display: flex;
+  flex-direction: column;
+  margin-left: 16px;
+}
+
+
+.jp-About-header-logo {
+  height: 94px;
+  width: 77px;
+  background-image: url(../../theming/style/icons/jupyter/jupyter.svg);
+  background-repeat: no-repeat;
+  background-size: 58px auto;
+  background-position: center;
+}

packages/theming/style/buttons.css

@@ -0,0 +1,60 @@
+/*-----------------------------------------------------------------------------
+| Variables
+|----------------------------------------------------------------------------*/
+
+:root {
+    --jp-flat-button-height: 24px;
+    --jp-flat-button-padding: 8px 12px;
+}
+
+
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+
+button.jp-mod-styled.jp-mod-accept {
+    background: var(--jp-brand-color1);
+    color: var(--jp-inverse-ui-font-color0);
+    border: 1px solid var(--jp-brand-color1);
+}
+
+
+button.jp-mod-styled.jp-mod-reject {
+    background: var(--md-grey-500);
+    margin-right: 12px;
+    border: 1px solid var(--md-grey-500);
+    color: var(--jp-inverse-ui-font-color0);
+}
+
+
+button.jp-mod-styled.jp-mod-warn {
+    background: var(--jp-error-color1);
+    color: var(--jp-inverse-ui-font-color0);
+    border: 1px solid var(--jp-error-color1);
+}
+
+.jp-Button-flat {
+    text-decoration: none;
+    padding: var(--jp-flat-button-padding);
+    color: var(--jp-warn-color1);
+    font-weight: 500;
+    background-color: transparent;
+    height: var(--jp-private-running-shutdown-button-height);
+    line-height: var(--jp-private-running-shutdown-button-height);
+    transition: background-color 0.1s ease;
+    border-radius: 2px;
+}
+
+
+.jp-Button-flat:hover {
+    background-color: rgba(153,153,153,.1);
+}
+
+
+.jp-Button-flat:focus {
+    border: none;
+    box-shadow: none;
+    background-color: rgba(153,153,153,.2);
+}

packages/theming/style/images.css

@@ -14,6 +14,11 @@
 }
 
 
+.jp-ImageJupyterLab-wordmark {
+  background-image: url(images/jupyterlab-wordmark.svg);
+}
+
+
 .jp-ImageNotebook {
   background-image: url(images/notebook.svg);
 }

packages/theming/style/images/jupyterlab-wordmark.svg

@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1860.8 475" style="enable-background:new 0 0 1860.8 475;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#4E4E4E;}
+	.st1{fill:#F37726;}
+</style>
+<title>fulllogo-greytext-orangebody-greymoons (1)</title>
+<desc>Created with Sketch.</desc>
+<g id="Canvas">
+	<g id="logo">
+		<g id="Group" transform="translate(480.136401, 64.271493)">
+			<g id="g">
+				<g id="path" transform="translate(0.000000, 58.875566)">
+					<g id="path0-fill">
+						<g id="path0_fill-link" transform="translate(0.087603, 0.140294)">
+							<path id="path0_fill" class="st0" d="M-426.9,169.8c0,48.7-3.7,64.7-13.6,76.4c-10.8,10-25,15.5-39.7,15.5l3.7,29
+								c22.8,0.3,44.8-7.9,61.9-23.1c17.8-18.5,24-44.1,24-83.3V0H-427v170.1L-426.9,169.8L-426.9,169.8z"/>
+						</g>
+					</g>
+				</g>
+				<g id="path_1_" transform="translate(155.045296, 56.837104)">
+					<g id="path1-fill">
+						<g id="path1_fill-link" transform="translate(1.562453, 1.799842)">
+							<path id="path1_fill" class="st0" d="M-312,148c0,21,0,39.5,1.7,55.4h-31.8l-2.1-33.3h-0.8c-6.7,11.6-16.4,21.3-28,27.9
+								c-11.6,6.6-24.8,10-38.2,9.8c-31.4,0-69-17.7-69-89V0h36.4v112.7c0,38.7,11.6,64.7,44.6,64.7c10.3-0.2,20.4-3.5,28.9-9.4
+								c8.5-5.9,15.1-14.3,18.9-23.9c2.2-6.1,3.3-12.5,3.3-18.9V0.2h36.4V148H-312L-312,148z"/>
+						</g>
+					</g>
+				</g>
+				<g id="path_2_" transform="translate(390.013322, 53.479638)">
+					<g id="path2-fill">
+						<g id="path2_fill-link" transform="translate(1.706458, 0.231425)">
+							<path id="path2_fill" class="st0" d="M-478.6,71.4c0-26-0.8-47-1.7-66.7h32.7l1.7,34.8h0.8c7.1-12.5,17.5-22.8,30.1-29.7
+								c12.5-7,26.7-10.3,41-9.8c48.3,0,84.7,41.7,84.7,103.3c0,73.1-43.7,109.2-91,109.2c-12.1,0.5-24.2-2.2-35-7.8
+								c-10.8-5.6-19.9-13.9-26.6-24.2h-0.8V291h-36v-220L-478.6,71.4L-478.6,71.4z M-442.6,125.6c0.1,5.1,0.6,10.1,1.7,15.1
+								c3,12.3,9.9,23.3,19.8,31.1c9.9,7.8,22.1,12.1,34.7,12.1c38.5,0,60.7-31.9,60.7-78.5c0-40.7-21.1-75.6-59.5-75.6
+								c-12.9,0.4-25.3,5.1-35.3,13.4c-9.9,8.3-16.9,19.7-19.6,32.4c-1.5,4.9-2.3,10-2.5,15.1V125.6L-442.6,125.6L-442.6,125.6z"/>
+						</g>
+					</g>
+				</g>
+				<g id="path_3_" transform="translate(606.740726, 56.837104)">
+					<g id="path3-fill">
+						<g id="path3_fill-link" transform="translate(0.751226, 1.989299)">
+							<path id="path3_fill" class="st0" d="M-440.8,0l43.7,120.1c4.5,13.4,9.5,29.4,12.8,41.7h0.8c3.7-12.2,7.9-27.7,12.8-42.4
+								l39.7-119.2h38.5L-346.9,145c-26,69.7-43.7,105.4-68.6,127.2c-12.5,11.7-27.9,20-44.6,23.9l-9.1-31.1
+								c11.7-3.9,22.5-10.1,31.8-18.1c13.2-11.1,23.7-25.2,30.6-41.2c1.5-2.8,2.5-5.7,2.9-8.8c-0.3-3.3-1.2-6.6-2.5-9.7L-480.2,0.1
+								h39.7L-440.8,0L-440.8,0z"/>
+						</g>
+					</g>
+				</g>
+				<g id="path_4_" transform="translate(822.748104, 0.000000)">
+					<g id="path4-fill">
+						<g id="path4_fill-link" transform="translate(1.464050, 0.378914)">
+							<path id="path4_fill" class="st0" d="M-413.7,0v58.3h52v28.2h-52V196c0,25,7,39.5,27.3,39.5c7.1,0.1,14.2-0.7,21.1-2.5
+								l1.7,27.7c-10.3,3.7-21.3,5.4-32.2,5c-7.3,0.4-14.6-0.7-21.3-3.4c-6.8-2.7-12.9-6.8-17.9-12.1c-10.3-10.9-14.1-29-14.1-52.9
+								V86.5h-31V58.3h31V9.6L-413.7,0L-413.7,0z"/>
+						</g>
+					</g>
+				</g>
+				<g id="path_5_" transform="translate(974.433286, 53.479638)">
+					<g id="path5-fill">
+						<g id="path5_fill-link" transform="translate(0.990034, 0.610339)">
+							<path id="path5_fill" class="st0" d="M-445.8,113c0.8,50,32.2,70.6,68.6,70.6c19,0.6,37.9-3,55.3-10.5l6.2,26.4
+								c-20.9,8.9-43.5,13.1-66.2,12.6c-61.5,0-98.3-41.2-98.3-102.5C-480.2,48.2-444.7,0-386.5,0c65.2,0,82.7,58.3,82.7,95.7
+								c-0.1,5.8-0.5,11.5-1.2,17.2h-140.6H-445.8L-445.8,113z M-339.2,86.6c0.4-23.5-9.5-60.1-50.4-60.1
+								c-36.8,0-52.8,34.4-55.7,60.1H-339.2L-339.2,86.6L-339.2,86.6z"/>
+						</g>
+					</g>
+				</g>
+				<g id="path_6_" transform="translate(1201.961058, 53.479638)">
+					<g id="path6-fill">
+						<g id="path6_fill-link" transform="translate(1.179640, 0.705068)">
+							<path id="path6_fill" class="st0" d="M-478.6,68c0-23.9-0.4-44.5-1.7-63.4h31.8l1.2,39.9h1.7c9.1-27.3,31-44.5,55.3-44.5
+								c3.5-0.1,7,0.4,10.3,1.2v34.8c-4.1-0.9-8.2-1.3-12.4-1.2c-25.6,0-43.7,19.7-48.7,47.4c-1,5.7-1.6,11.5-1.7,17.2v108.3h-36V68
+								L-478.6,68z"/>
+						</g>
+					</g>
+				</g>
+			</g>
+		</g>
+	</g>
+</g>
+<path id="jupyterlab" class="st1" d="M1352.3,326.2h37V28h-37V326.2z M1604.8,326.2c-2.5-13.9-3.4-31.1-3.4-48.7v-76
+	c0-40.7-15.1-83.1-77.3-83.1c-25.6,0-50,7.1-66.8,18.1l8.4,24.4c14.3-9.2,34-15.1,53-15.1c41.6,0,46.2,30.2,46.2,47v4.2
+	c-78.6-0.4-122.3,26.5-122.3,75.6c0,29.4,21,58.4,62.2,58.4c29,0,50.9-14.3,62.2-30.2h1.3l2.9,25.6H1604.8z M1565.7,257.7
+	c0,3.8-0.8,8-2.1,11.8c-5.9,17.2-22.7,34-49.2,34c-18.9,0-34.9-11.3-34.9-35.3c0-39.5,45.8-46.6,86.2-45.8V257.7z M1698.5,326.2
+	l1.7-33.6h1.3c15.1,26.9,38.7,38.2,68.1,38.2c45.4,0,91.2-36.1,91.2-108.8c0.4-61.7-35.3-103.7-85.7-103.7
+	c-32.8,0-56.3,14.7-69.3,37.4h-0.8V28h-36.6v245.7c0,18.1-0.8,38.6-1.7,52.5H1698.5z M1704.8,208.2c0-5.9,1.3-10.9,2.1-15.1
+	c7.6-28.1,31.1-45.4,56.3-45.4c39.5,0,60.5,34.9,60.5,75.6c0,46.6-23.1,78.1-61.8,78.1c-26.9,0-48.3-17.6-55.5-43.3
+	c-0.8-4.2-1.7-8.8-1.7-13.4V208.2z"/>
+</svg>

packages/theming/style/index.css

@@ -25,6 +25,7 @@ body {
 @import './menus.css';
 @import './scrollbar.css';
 @import './tabs.css';
+@import './buttons.css';
 
 
 :root {

test/src/apputils/dialog.spec.ts

@@ -434,8 +434,6 @@ describe('@jupyterlab/domutils', () => {
           it('should create the header of the dialog', () => {
             let widget = renderer.createHeader('foo');
             expect(widget.hasClass('jp-Dialog-header')).to.equal(true);
-            let node = widget.node.querySelector('.jp-Dialog-title');
-            expect(node.textContent).to.equal('foo');
           });
 
         });