Browse Source

Reorganized structure of images and icons as well as applied stock material design icons to notebook. Will optimize for 16px.

cameronoelsen 8 years ago
parent
commit
282e2875ac

+ 92 - 0
src/default-theme/icons.css

@@ -0,0 +1,92 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+.jp-MaterialIcon {
+  min-width: 16px;
+  min-height: 16px;
+  background-size: 16px;
+  display: inline-block;
+  vertical-align: middle;
+  background-repeat: no-repeat;
+}
+
+.jp-AddIcon {
+  background-image: url(icons/md/add.svg);
+}
+
+.jp-CutIcon {
+  background-image: url(icons/md/cut.svg);
+}
+
+.jp-CopyIcon {
+  background-image: url(icons/md/copy.svg);
+}
+
+.jp-DownCaretIcon {
+  background-image: url(icons/md/down_caret.svg);
+}
+
+.jp-FolderIcon {
+  background-image: url(icons/md/landingfolder.svg);
+}
+
+.jp-HomeIcon {
+  background-image: url(icons/md/home.svg);
+  min-width: 14px;
+  min-height: 14px;
+  background-size: 14px;
+  vertical-align: sub;
+  display: inline-block;
+}
+
+.jp-JupyterIcon {
+  background-image: url(icons/jupyter/jupyter.svg);
+  background-size: 16px;
+  margin: 2px;
+  margin-left: 10px;
+  margin-right: 0px;
+  padding-right: 0px;
+}
+
+.jp-MainAreaLandscapeIcon {
+  background-repeat: no-repeat;
+  margin-right: 2px;
+  width: 22px;
+}
+
+.jp-MainAreaPortraitIcon {
+  background-position: 0 1px;
+  background-repeat: no-repeat;
+  margin-right: 0;
+  width: 20px;
+}
+
+.jp-OpenFolderIcon {
+  background-image: url(icons/md/directory.svg);
+}
+
+.jp-PasteIcon {
+  background-image: url(icons/md/paste.svg);
+}
+
+.jp-RefreshIcon {
+  background-image: url(icons/md/refresh.svg);
+}
+
+.jp-RunIcon {
+  background-image: url(icons/md/run.svg);
+}
+
+.jp-SaveIcon {
+  background-image: url(icons/md/save.svg);
+}
+
+.jp-StopIcon {
+  background-image: url(icons/md/stop.svg);
+}
+
+.jp-UploadIcon {
+  background-image: url(icons/upload.svg);
+}

+ 42 - 0
src/default-theme/icons/jupyter/jupyter.svg

@@ -0,0 +1,42 @@
+<svg width="39" height="51" viewBox="0 0 39 51" version="2.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:figma="http://www.figma.com/figma/ns">
+<title>logo-5.svg</title>
+<desc>Created using Figma 0.90</desc>
+<g id="Canvas" transform="translate(-1638 -2281)" figma:type="canvas">
+<g id="logo" style="mix-blend-mode:normal;" figma:type="group">
+<g id="g" style="mix-blend-mode:normal;" figma:type="group">
+<g id="path" style="mix-blend-mode:normal;" figma:type="group">
+<g id="path7 fill" style="mix-blend-mode:normal;" figma:type="vector">
+<use xlink:href="#path0_fill" transform="translate(1669.3 2281.31)" fill="#767677" style="mix-blend-mode:normal;"/>
+</g>
+</g>
+<g id="path" style="mix-blend-mode:normal;" figma:type="group">
+<g id="path8 fill" style="mix-blend-mode:normal;" figma:type="vector">
+<use xlink:href="#path1_fill" transform="translate(1639.74 2311.98)" fill="#F37726" style="mix-blend-mode:normal;"/>
+</g>
+</g>
+<g id="path" style="mix-blend-mode:normal;" figma:type="group">
+<g id="path9 fill" style="mix-blend-mode:normal;" figma:type="vector">
+<use xlink:href="#path2_fill" transform="translate(1639.73 2285.48)" fill="#F37726" style="mix-blend-mode:normal;"/>
+</g>
+</g>
+<g id="path" style="mix-blend-mode:normal;" figma:type="group">
+<g id="path10 fill" style="mix-blend-mode:normal;" figma:type="vector">
+<use xlink:href="#path3_fill" transform="translate(1639.8 2323.81)" fill="#989798" style="mix-blend-mode:normal;"/>
+</g>
+</g>
+<g id="path" style="mix-blend-mode:normal;" figma:type="group">
+<g id="path11 fill" style="mix-blend-mode:normal;" figma:type="vector">
+<use xlink:href="#path4_fill" transform="translate(1638.36 2286.06)" fill="#6F7070" style="mix-blend-mode:normal;"/>
+</g>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<path id="path0_fill" d="M 5.89353 2.844C 5.91889 3.43165 5.77085 4.01367 5.46815 4.51645C 5.16545 5.01922 4.72168 5.42015 4.19299 5.66851C 3.6643 5.91688 3.07444 6.00151 2.49805 5.91171C 1.92166 5.8219 1.38463 5.5617 0.954898 5.16401C 0.52517 4.76633 0.222056 4.24903 0.0839037 3.67757C -0.0542483 3.10611 -0.02123 2.50617 0.178781 1.95364C 0.378793 1.4011 0.736809 0.920817 1.20754 0.573538C 1.67826 0.226259 2.24055 0.0275919 2.82326 0.00267229C 3.60389 -0.0307115 4.36573 0.249789 4.94142 0.782551C 5.51711 1.31531 5.85956 2.05676 5.89353 2.844Z"/>
+<path id="path1_fill" d="M 18.2646 7.13411C 10.4145 7.13411 3.55872 4.2576 0 0C 1.32539 3.8204 3.79556 7.13081 7.0686 9.47303C 10.3417 11.8152 14.2557 13.0734 18.269 13.0734C 22.2823 13.0734 26.1963 11.8152 29.4694 9.47303C 32.7424 7.13081 35.2126 3.8204 36.538 0C 32.9705 4.2576 26.1148 7.13411 18.2646 7.13411Z"/>
+<path id="path2_fill" d="M 18.2733 5.93931C 26.1235 5.93931 32.9793 8.81583 36.538 13.0734C 35.2126 9.25303 32.7424 5.94262 29.4694 3.6004C 26.1963 1.25818 22.2823 0 18.269 0C 14.2557 0 10.3417 1.25818 7.0686 3.6004C 3.79556 5.94262 1.32539 9.25303 0 13.0734C 3.56745 8.82463 10.4232 5.93931 18.2733 5.93931Z"/>
+<path id="path3_fill" d="M 7.42789 3.58338C 7.46008 4.3243 7.27355 5.05819 6.89193 5.69213C 6.51031 6.32607 5.95075 6.83156 5.28411 7.1446C 4.61747 7.45763 3.87371 7.56414 3.14702 7.45063C 2.42032 7.33712 1.74336 7.0087 1.20184 6.50695C 0.660328 6.0052 0.27861 5.35268 0.105017 4.63202C -0.0685757 3.91135 -0.0262361 3.15494 0.226675 2.45856C 0.479587 1.76217 0.931697 1.15713 1.52576 0.720033C 2.11983 0.282935 2.82914 0.0334395 3.56389 0.00313344C 4.54667 -0.0374033 5.50529 0.316706 6.22961 0.987835C 6.95393 1.65896 7.38484 2.59235 7.42789 3.58338L 7.42789 3.58338Z"/>
+<path id="path4_fill" d="M 2.27471 4.39629C 1.84363 4.41508 1.41671 4.30445 1.04799 4.07843C 0.679268 3.8524 0.385328 3.52114 0.203371 3.12656C 0.0214136 2.73198 -0.0403798 2.29183 0.0258116 1.86181C 0.0920031 1.4318 0.283204 1.03126 0.575213 0.710883C 0.867222 0.39051 1.24691 0.164708 1.66622 0.0620592C 2.08553 -0.0405897 2.52561 -0.0154714 2.93076 0.134235C 3.33591 0.283941 3.68792 0.551505 3.94222 0.90306C 4.19652 1.25462 4.34169 1.67436 4.35935 2.10916C 4.38299 2.69107 4.17678 3.25869 3.78597 3.68746C 3.39516 4.11624 2.85166 4.37116 2.27471 4.39629L 2.27471 4.39629Z"/>
+</defs>
+</svg>

+ 1 - 1
src/default-theme/icons/add.svg → src/default-theme/icons/md/add.svg

@@ -5,6 +5,6 @@
 <style type="text/css">
 <style type="text/css">
 	.st0{fill:none;}
 	.st0{fill:none;}
 </style>
 </style>
-<path d="M15.6,9.9H9.9v5.6H8.1V9.9H2.4V8.1h5.6V2.4h1.9v5.6h5.6V9.9z"/>
+<path d="M15.3,9.9H9.9v5.4H8.1V9.9H2.7V8.1h5.4V2.7h1.8v5.4h5.4V9.9z"/>
 <path class="st0" d="M0,0h18v18H0V0z"/>
 <path class="st0" d="M0,0h18v18H0V0z"/>
 </svg>
 </svg>

+ 11 - 0
src/default-theme/icons/md/copy.svg

@@ -0,0 +1,11 @@
+<?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 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+</style>
+<path class="st0" d="M0,0h18v18H0V0z"/>
+<path d="M11.9,1H3.2C2.4,1,1.7,1.7,1.7,2.5v10.2h1.5V2.5h8.7V1z M14.1,3.9h-8c-0.8,0-1.5,0.7-1.5,1.5v10.2c0,0.8,0.7,1.5,1.5,1.5h8
+	c0.8,0,1.5-0.7,1.5-1.5V5.4C15.5,4.6,14.9,3.9,14.1,3.9z M14.1,15.5h-8V5.4h8V15.5z"/>
+</svg>

+ 7 - 0
src/default-theme/icons/md/cut.svg

@@ -0,0 +1,7 @@
+<svg fill="#000000" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <circle cx="6" cy="18" fill="none" r="2"/>
+    <circle cx="12" cy="12" fill="none" r=".5"/>
+    <circle cx="6" cy="6" fill="none" r="2"/>
+    <path d="M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z"/>
+</svg>

+ 0 - 0
src/default-theme/icons/directory.svg → src/default-theme/icons/md/directory.svg


+ 10 - 0
src/default-theme/icons/md/down_caret.svg

@@ -0,0 +1,10 @@
+<?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 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+</style>
+<path d="M5.2,5.9L9,9.7l3.8-3.8l1.2,1.2l-4.9,5l-4.9-5L5.2,5.9z"/>
+<path class="st0" d="M0-0.6h18v18H0V-0.6z"/>
+</svg>

+ 0 - 0
src/default-theme/icons/home.svg → src/default-theme/icons/md/home.svg


+ 21 - 0
src/default-theme/icons/md/landingfolder.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="14px" height="14px" viewBox="0 0 10 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
+    <title>ic_folder_black_24px</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-1" transform="translate(-664.000000, -578.000000)">
+            <g id="Launcher" transform="translate(655.000000, 291.000000)">
+                <g id="Group-3" transform="translate(8.000000, 284.851852)">
+                    <g id="ic_folder_black_24px" transform="translate(0.000000, 1.000000)">
+                        <g id="Group">
+                            <path d="M5,2 L2,2 C1.45,2 1.005,2.45 1.005,3 L1,9 C1,9.55 1.45,10 2,10 L10,10 C10.55,10 11,9.55 11,9 L11,4 C11,3.45 10.55,3 10,3 L6,3 L5,2 L5,2 Z" id="Shape" fill="#9E9E9E"></path>
+                            <polygon id="Shape" points="0 0 12 0 12 12 0 12"></polygon>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

+ 4 - 0
src/default-theme/icons/md/paste.svg

@@ -0,0 +1,4 @@
+<svg fill="#000000" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

+ 11 - 0
src/default-theme/icons/md/refresh.svg

@@ -0,0 +1,11 @@
+<?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 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+</style>
+<path d="M13.7,4.3C12.5,3.1,10.8,2.4,9,2.4c-3.6,0-6.6,3-6.6,6.6s2.9,6.6,6.6,6.6c3.1,0,5.6-2.1,6.4-5h-1.7
+	c-0.7,1.9-2.5,3.3-4.7,3.3c-2.7,0-5-2.2-5-4.9s2.2-4.9,5-4.9c1.4,0,2.6,0.6,3.5,1.5L9.8,8.2h5.8V2.4L13.7,4.3z"/>
+<path class="st0" d="M0,0h18v18H0V0z"/>
+</svg>

+ 4 - 0
src/default-theme/icons/md/run.svg

@@ -0,0 +1,4 @@
+<svg fill="#000000" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 5v14l11-7z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

+ 4 - 0
src/default-theme/icons/md/save.svg

@@ -0,0 +1,4 @@
+<svg fill="#000000" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/>
+</svg>

+ 4 - 0
src/default-theme/icons/md/stop.svg

@@ -0,0 +1,4 @@
+<svg fill="#000000" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M6 6h12v12H6z"/>
+</svg>

+ 0 - 0
src/default-theme/icons/upload.svg → src/default-theme/icons/md/upload.svg


+ 1 - 0
src/default-theme/index.css

@@ -39,3 +39,4 @@
 
 
 /* Theme images */
 /* Theme images */
 @import './images.css';
 @import './images.css';
+@import './icons.css';

+ 6 - 6
src/notebook/notebook/default-toolbar.ts

@@ -36,32 +36,32 @@ import {
 /**
 /**
  * The class name added to toolbar save button.
  * The class name added to toolbar save button.
  */
  */
-const TOOLBAR_SAVE_CLASS = 'jp-Notebook-toolbarSave';
+const TOOLBAR_SAVE_CLASS = 'jp-SaveIcon';
 
 
 /**
 /**
  * The class name added to toolbar insert button.
  * The class name added to toolbar insert button.
  */
  */
-const TOOLBAR_INSERT_CLASS = 'jp-Notebook-toolbarInsert';
+const TOOLBAR_INSERT_CLASS = 'jp-AddIcon';
 
 
 /**
 /**
  * The class name added to toolbar cut button.
  * The class name added to toolbar cut button.
  */
  */
-const TOOLBAR_CUT_CLASS = 'jp-Notebook-toolbarCut';
+const TOOLBAR_CUT_CLASS = 'jp-CutIcon';
 
 
 /**
 /**
  * The class name added to toolbar copy button.
  * The class name added to toolbar copy button.
  */
  */
-const TOOLBAR_COPY_CLASS = 'jp-Notebook-toolbarCopy';
+const TOOLBAR_COPY_CLASS = 'jp-CopyIcon';
 
 
 /**
 /**
  * The class name added to toolbar paste button.
  * The class name added to toolbar paste button.
  */
  */
-const TOOLBAR_PASTE_CLASS = 'jp-Notebook-toolbarPaste';
+const TOOLBAR_PASTE_CLASS = 'jp-PasteIcon';
 
 
 /**
 /**
  * The class name added to toolbar run button.
  * The class name added to toolbar run button.
  */
  */
-const TOOLBAR_RUN_CLASS = 'jp-Notebook-toolbarRun';
+const TOOLBAR_RUN_CLASS = 'jp-RunIcon';
 
 
 /**
 /**
  * The class name added to toolbar cell type dropdown wrapper.
  * The class name added to toolbar cell type dropdown wrapper.

+ 5 - 0
src/toolbar/index.css

@@ -29,6 +29,11 @@
   font-family: FontAwesome;
   font-family: FontAwesome;
   text-align: center;
   text-align: center;
   display: inline-block;
   display: inline-block;
+  height: 24px;
+  width: 32px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 16px;
 }
 }
 
 
 
 

+ 2 - 2
src/toolbar/kernel.ts

@@ -24,12 +24,12 @@ import {
 /**
 /**
  * The class name added to toolbar interrupt button.
  * The class name added to toolbar interrupt button.
  */
  */
-const TOOLBAR_INTERRUPT_CLASS = 'jp-Kernel-toolbarInterrupt';
+const TOOLBAR_INTERRUPT_CLASS = 'jp-StopIcon';
 
 
 /**
 /**
  * The class name added to toolbar restart button.
  * The class name added to toolbar restart button.
  */
  */
-const TOOLBAR_RESTART_CLASS = 'jp-Kernel-toolbarRestart';
+const TOOLBAR_RESTART_CLASS = 'jp-RefreshIcon';
 
 
 /**
 /**
  * The class name added to toolbar kernel name text.
  * The class name added to toolbar kernel name text.