Merge pull request #2586 from hzarea/launcher-style

Launcher layout and new launcher icons

packages/launcher/style/index.css

@@ -47,11 +47,13 @@
   height: 100%;
   box-sizing: border-box;
   overflow: auto;
+  display: flex;
+  justify-content: center;
 }
 
 
 .jp-Launcher-content {
-  width: 80%;
+  width: 85%;
   height: 100%;
   margin-top: var(--jp-private-launcher-top-margin);
   margin-left: var(--jp-private-launcher-side-margin);
@@ -76,6 +78,9 @@
   box-sizing: border-box;
   /* This is custom tuned to get the section header to align with the cards */
   padding-left: 5px;
+  border-bottom: 1px solid #E0E0E0;
+  padding-bottom: 0px;
+  margin-bottom: 9px;
 }
 
 
@@ -85,6 +90,7 @@
   height: var(--jp-private-launcher-small-icon-size);
   width: var(--jp-private-launcher-small-icon-size);
   background-size: var(--jp-private-launcher-small-icon-size) var(--jp-private-launcher-small-icon-size);
+  margin-bottom: 15px;
 }
 
 
@@ -93,6 +99,7 @@
   font-weight: normal;
   color: var(--jp-ui-font-color1);
   box-sizing: border-box;
+  margin-bottom:13px;
 }
 
 
@@ -105,6 +112,7 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  margin-bottom:26px;
 }
 
 

packages/theming/style/icons.css

@@ -133,6 +133,11 @@
 }
 
 
+.jp-LauncherIcon {
+  background-image: url(icons/jupyter/launcher.svg);
+}
+
+
 .jp-MainAreaLandscapeIcon {
   background-repeat: no-repeat;
   margin-right: 2px;

packages/theming/style/icons/jupyter/launcher.svg

@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, 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 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#757575;}
+	.st1{display:none;}
+	.st2{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
+	.st3{fill:#FFFFFF;}
+</style>
+<rect x="2.2" y="2.2" class="st0" width="17.6" height="17.6"/>
+<g class="st1">
+	<line class="st2" x1="11" y1="0" x2="11" y2="22"/>
+	<path class="st2" d="M21.5,11"/>
+	<path class="st2" d="M0.4,11"/>
+	<line class="st2" x1="0" y1="22" x2="22" y2="0"/>
+	<line class="st2" x1="11" y1="0" x2="22" y2="11"/>
+	<line class="st2" x1="0" y1="11" x2="11" y2="22"/>
+	<line class="st2" x1="22" y1="11" x2="11" y2="22"/>
+	<line class="st2" x1="11" y1="0" x2="0" y2="11"/>
+	<line class="st2" x1="14.3" y1="0" x2="14.3" y2="22"/>
+	<line class="st2" x1="7.7" y1="0" x2="7.7" y2="22"/>
+	<line class="st2" x1="3.3" y1="0" x2="3.3" y2="22"/>
+	<line class="st2" x1="18.7" y1="0" x2="18.7" y2="22"/>
+	<line class="st2" x1="22" y1="11" x2="0" y2="11"/>
+	<line class="st2" x1="22" y1="14.3" x2="0" y2="14.3"/>
+	<line class="st2" x1="22" y1="7.7" x2="0" y2="7.7"/>
+	<line class="st2" x1="22" y1="3.3" x2="0" y2="3.3"/>
+	<line class="st2" x1="22" y1="18.7" x2="0" y2="18.7"/>
+	<line class="st2" x1="2.2" y1="0" x2="2.2" y2="22"/>
+	<line class="st2" x1="19.8" y1="0" x2="19.8" y2="22"/>
+	<line class="st2" x1="0" y1="19.8" x2="22" y2="19.8"/>
+	<line class="st2" x1="0" y1="2.2" x2="22" y2="2.2"/>
+	<line class="st2" x1="17.6" y1="0" x2="17.6" y2="22"/>
+	<line class="st2" x1="11" y1="1.6" x2="20.3" y2="11"/>
+	<line class="st2" x1="1.6" y1="11" x2="11" y2="20.3"/>
+	<line class="st2" x1="20.3" y1="11" x2="11" y2="20.3"/>
+	<line class="st2" x1="11" y1="1.6" x2="1.6" y2="11"/>
+	<line class="st2" x1="0" y1="0" x2="22" y2="22"/>
+	<line class="st2" x1="6.6" y1="0" x2="6.6" y2="22"/>
+	<line class="st2" x1="15.4" y1="0" x2="15.4" y2="22"/>
+	<line class="st2" x1="0" y1="15.4" x2="22" y2="15.4"/>
+	<line class="st2" x1="0" y1="6.6" x2="22" y2="6.6"/>
+	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
+	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
+	<path class="st2" d="M22,22"/>
+	<path class="st2" d="M0,0"/>
+	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
+	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
+	<line class="st2" x1="0" y1="20.9" x2="20.9" y2="0"/>
+	<line class="st2" x1="22" y1="1.1" x2="1.1" y2="22"/>
+	<line class="st2" x1="4.4" y1="0" x2="4.4" y2="22"/>
+	<line class="st2" x1="22" y1="17.6" x2="0" y2="17.6"/>
+	<line class="st2" x1="22" y1="4.4" x2="0" y2="4.4"/>
+	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.5558 11.0001)" class="st2" width="6.2" height="6.2"/>
+	<line class="st2" x1="0" y1="16.5" x2="22" y2="16.5"/>
+	<line class="st2" x1="16.5" y1="22" x2="16.5" y2="0"/>
+	<line class="st2" x1="5.5" y1="22" x2="5.5" y2="0"/>
+	<line class="st2" x1="22.1" y1="5.5" x2="0.1" y2="5.5"/>
+	<line class="st2" x1="12.1" y1="0" x2="12.1" y2="22"/>
+	<line class="st2" x1="13.2" y1="0" x2="13.2" y2="22"/>
+	<line class="st2" x1="8.8" y1="22" x2="8.8" y2="0"/>
+	<line class="st2" x1="9.9" y1="22" x2="9.9" y2="0"/>
+	<line class="st2" x1="0" y1="7.7" x2="22" y2="7.7"/>
+	<line class="st2" x1="0" y1="14.3" x2="22" y2="14.3"/>
+	<line class="st2" x1="0" y1="9.9" x2="22" y2="9.9"/>
+	<line class="st2" x1="0" y1="8.8" x2="22" y2="8.8"/>
+	<line class="st2" x1="22" y1="13.2" x2="0" y2="13.2"/>
+	<line class="st2" x1="22" y1="12.1" x2="0" y2="12.1"/>
+	<line class="st2" x1="1.1" y1="0" x2="1.1" y2="22"/>
+	<line class="st2" x1="20.9" y1="0" x2="20.9" y2="22"/>
+	<line class="st2" x1="0" y1="1.1" x2="22" y2="1.1"/>
+	<line class="st2" x1="0" y1="20.9" x2="22" y2="20.9"/>
+</g>
+<polygon class="st3" points="15.4,11.1 15.4,14.3 17.6,14.3 "/>
+<polygon class="st3" points="6.6,11 6.6,14.3 4.4,14.3 "/>
+<path class="st3" d="M11,3.3c4.3,5.6,3.2,11,3.2,11H7.8C7.8,14.3,6.7,8.9,11,3.3"/>
+<circle class="st0" cx="11" cy="10.4" r="1.2"/>
+<path class="st3" d="M11,18.7c0,0-2.7-3.3,0-3.3S11,18.7,11,18.7z"/>
+<line class="st0" x1="18.7" y1="14.3" x2="18.7" y2="17.6"/>
+<polygon class="st3" points="17.6,16.5 17.6,14.3 15.4,14.3 "/>
+<polygon class="st3" points="4.4,16.5 6.6,14.3 4.4,14.3 "/>
+</svg>

packages/theming/style/icons/jupyter/launcher_selected.svg

@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, 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 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
+<style type="text/css">
+	.st0{display:none;}
+	.st1{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
+	.st2{fill:none;}
+	.st3{fill:#FFFFFF;}
+</style>
+<g class="st0">
+	<line class="st1" x1="11" y1="0" x2="11" y2="22"/>
+	<path class="st1" d="M21.5,11"/>
+	<path class="st1" d="M0.4,11"/>
+	<line class="st1" x1="0" y1="22" x2="22" y2="0"/>
+	<line class="st1" x1="11" y1="0" x2="22" y2="11"/>
+	<line class="st1" x1="0" y1="11" x2="11" y2="22"/>
+	<line class="st1" x1="22" y1="11" x2="11" y2="22"/>
+	<line class="st1" x1="11" y1="0" x2="0" y2="11"/>
+	<line class="st1" x1="14.3" y1="0" x2="14.3" y2="22"/>
+	<line class="st1" x1="7.7" y1="0" x2="7.7" y2="22"/>
+	<line class="st1" x1="3.3" y1="0" x2="3.3" y2="22"/>
+	<line class="st1" x1="18.7" y1="0" x2="18.7" y2="22"/>
+	<line class="st1" x1="22" y1="11" x2="0" y2="11"/>
+	<line class="st1" x1="22" y1="14.3" x2="0" y2="14.3"/>
+	<line class="st1" x1="22" y1="7.7" x2="0" y2="7.7"/>
+	<line class="st1" x1="22" y1="3.3" x2="0" y2="3.3"/>
+	<line class="st1" x1="22" y1="18.7" x2="0" y2="18.7"/>
+	<line class="st1" x1="2.2" y1="0" x2="2.2" y2="22"/>
+	<line class="st1" x1="19.8" y1="0" x2="19.8" y2="22"/>
+	<line class="st1" x1="0" y1="19.8" x2="22" y2="19.8"/>
+	<line class="st1" x1="0" y1="2.2" x2="22" y2="2.2"/>
+	<line class="st1" x1="17.6" y1="0" x2="17.6" y2="22"/>
+	<line class="st1" x1="11" y1="1.6" x2="20.3" y2="11"/>
+	<line class="st1" x1="1.6" y1="11" x2="11" y2="20.3"/>
+	<line class="st1" x1="20.3" y1="11" x2="11" y2="20.3"/>
+	<line class="st1" x1="11" y1="1.6" x2="1.6" y2="11"/>
+	<line class="st1" x1="0" y1="0" x2="22" y2="22"/>
+	<line class="st1" x1="6.6" y1="0" x2="6.6" y2="22"/>
+	<line class="st1" x1="15.4" y1="0" x2="15.4" y2="22"/>
+	<line class="st1" x1="0" y1="15.4" x2="22" y2="15.4"/>
+	<line class="st1" x1="0" y1="6.6" x2="22" y2="6.6"/>
+	<line class="st1" x1="20.9" y1="22" x2="0" y2="1.1"/>
+	<line class="st1" x1="1.1" y1="0" x2="22" y2="20.9"/>
+	<path class="st1" d="M22,22"/>
+	<path class="st1" d="M0,0"/>
+	<line class="st1" x1="20.9" y1="22" x2="0" y2="1.1"/>
+	<line class="st1" x1="1.1" y1="0" x2="22" y2="20.9"/>
+	<line class="st1" x1="0" y1="20.9" x2="20.9" y2="0"/>
+	<line class="st1" x1="22" y1="1.1" x2="1.1" y2="22"/>
+	<line class="st1" x1="4.4" y1="0" x2="4.4" y2="22"/>
+	<line class="st1" x1="22" y1="17.6" x2="0" y2="17.6"/>
+	<line class="st1" x1="22" y1="4.4" x2="0" y2="4.4"/>
+	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.5566 11)" class="st1" width="6.2" height="6.2"/>
+	<line class="st1" x1="0" y1="16.5" x2="22" y2="16.5"/>
+	<line class="st1" x1="16.5" y1="22" x2="16.5" y2="0"/>
+	<line class="st1" x1="5.5" y1="22" x2="5.5" y2="0"/>
+	<line class="st1" x1="22.1" y1="5.5" x2="0.1" y2="5.5"/>
+	<line class="st1" x1="12.1" y1="0" x2="12.1" y2="22"/>
+	<line class="st1" x1="13.2" y1="0" x2="13.2" y2="22"/>
+	<line class="st1" x1="8.8" y1="22" x2="8.8" y2="0"/>
+	<line class="st1" x1="9.9" y1="22" x2="9.9" y2="0"/>
+	<line class="st1" x1="0" y1="7.7" x2="22" y2="7.7"/>
+	<line class="st1" x1="0" y1="14.3" x2="22" y2="14.3"/>
+	<line class="st1" x1="0" y1="9.9" x2="22" y2="9.9"/>
+	<line class="st1" x1="0" y1="8.8" x2="22" y2="8.8"/>
+	<line class="st1" x1="22" y1="13.2" x2="0" y2="13.2"/>
+	<line class="st1" x1="22" y1="12.1" x2="0" y2="12.1"/>
+	<line class="st1" x1="1.1" y1="0" x2="1.1" y2="22"/>
+	<line class="st1" x1="20.9" y1="0" x2="20.9" y2="22"/>
+	<line class="st1" x1="0" y1="1.1" x2="22" y2="1.1"/>
+	<line class="st1" x1="0" y1="20.9" x2="22" y2="20.9"/>
+</g>
+<line class="st2" x1="18.7" y1="14.3" x2="18.7" y2="17.6"/>
+<g>
+	<circle class="st3" cx="11" cy="10.4" r="1.2"/>
+	<path class="st3" d="M2.2,2.2v17.6h17.6V2.2H2.2z M6.6,14.3l-2.2,2.2v-2.2L6.6,11V14.3z M11,18.7c0,0-2.7-3.3,0-3.3
+		S11,18.7,11,18.7z M14.2,14.3H7.8c0,0-1.1-5.4,3.2-11C15.3,8.9,14.2,14.3,14.2,14.3z M17.6,16.5l-2.2-2.2v-3.2l2.2,3.2V16.5z"/>
+</g>
+</svg>