overview link & show current slot only

pnopjp · Nov 1, 2020 · d9700c8 · d9700c8
1 parent f7c7760
commit d9700c8
Show file tree

Hide file tree

Showing 4 changed files with 214 additions and 57 deletions.
diff --git a/Chrome Web Store/AzureKuduInstanceSelector-0.3.1.zip b/Chrome Web Store/AzureKuduInstanceSelector-0.3.1.zip
diff --git a/src/css/popup.css b/src/css/popup.css
@@ -17,33 +17,38 @@ ul.instances {
 	position: relative;
 }
 
+ul.instances.isClose {
+	display: none;
+}
+
 li.instance {
 	color: #0078d4;
 	border-left: solid 6px #0078d4;
 	background-color: #f1f8ff;
-	margin: 3px 0;
 	line-height: 1.5;
 	padding: 0.5em;
+	margin-top: 3px;
 	list-style-type: none;
 	display: flex;
 	justify-content: flex-end;
 	flex-wrap: nowrap;
 }
 
-li.noinstances {
-	background-color: #ffffff;	
-	padding: 2px 0.5em;
+.noinstances {
+	padding: 0.5em;
+	margin-top: 3px;
+	background-color: #ffffff;
 }
 
-li.instance span {
+li.instance > span {
 	display: inline-block;
 	font-weight: bold;
 	white-space: nowrap;
 	margin: auto auto auto 0;
 	padding-right: 0.5em;
 }
 
-li.instance a {
+li.instance > a {
 	position: relative;
 	display: inline-block;
 	padding: 0.25em 0.25em;
@@ -58,17 +63,13 @@ li.instance a {
 	border: solid 2px #ff6600;
 }
 
-li.instance a:active {
-	box-shadow: 0 0 2px rgba(0, 0, 0, 0, 0.30);
-}
-
 ul.slots {
 	padding: 0;
 	margin: 0;
 	position: relative;
 }
 
-li.slot {
+li.slot, div.productionSlot {
 	color: #333333;
 	background-color: #cccccc;
 	padding-left: 0.5em;
@@ -77,17 +78,78 @@ li.slot {
 	flex-wrap: nowrap;
 }
 
+div.productionSlot.display-none {
+	padding: 0 !important;
+	background-color: #ffffff !important;
+}
+
+div#productionSlot > div.productionSlot > div.slot.isClose {
+	display: none;
+}
+
+div.slot.display-none {
+	display:none !important;
+}
+
 div.slot {
 	padding: 0.2em 0.5em 0.2em 0;
 	font-weight: bold;
 	white-space: nowrap;
+	display: table;
+	width: 100%;
 }
 
 .dontwork {
 	padding: 0.5em 1em;
 	background-color: #ffffff;
+	margin: 3px 0;
 }
 
 .dontwork .message {
 	white-space: nowrap;
 }
+
+.slotLeft {
+	display: table-cell;
+}
+
+.slotVisible {
+	width: 0px;
+	height: 0px;
+	background: transparent;
+	border-top: 8px solid #505050;
+	border-left: 6px solid transparent;
+	border-right: 6px solid transparent;
+	display: inline-block;
+	cursor: pointer;
+}
+
+.slotVisible.isClose {
+	transform: rotate(270deg);
+}
+
+.slotName {
+	display: inline-block;
+	margin-left: 0.5em;
+}
+
+.slotRight {
+	display: table-cell;
+	text-align: right;
+	padding-right: 6px;
+}
+
+.gooverview {
+	position: relative;
+	display: inline-block;
+	padding: 1px 0.5em;
+	margin-left: 0.25em;
+	margin-right: 0;
+	margin-top: 3px;
+	text-decoration: none;
+	color: #eeeeee;
+	background: #787878;
+	border-radius: 4px;
+	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0, 0.05);
+	font-weight: normal;
+}
diff --git a/src/html/popup.html b/src/html/popup.html
@@ -7,13 +7,9 @@
 	<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
 	<!-- <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> -->
 	<link rel="stylesheet" href="../css/popup.css" />
-</head>
-<body>
-	<div id="popupContainer">
-		<div id="productionSlot"></div>
-		<div id="slots"></div>
-	</div>
 	<script src="../js/parameters.js" type="text/javascript"></script>
 	<script src="../js/popup.js" type="text/javascript"></script>
+</head>
+<body>
 </body>
 </html>