From cf83040c4b45bf817aeb3e239218d374ec04918a Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Fri, 8 Jul 2016 16:54:49 -0700
Subject: [PATCH] [Frontend] Styling for Time Conductor v2

Fixes #993
In-progress; Create menu refactoring and new
mini Create menu
---
 .../res/templates/create/create-menu.html     |  8 +--
 .../commonUI/general/res/sass/_icons.scss     |  3 +-
 .../general/res/sass/controls/_menus.scss     | 67 +++++++++++--------
 .../mode-selector/mode-selector.html          |  7 +-
 4 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/platform/commonUI/edit/res/templates/create/create-menu.html b/platform/commonUI/edit/res/templates/create/create-menu.html
index 24314a17c7f..a6954d9390c 100644
--- a/platform/commonUI/edit/res/templates/create/create-menu.html
+++ b/platform/commonUI/edit/res/templates/create/create-menu.html
@@ -36,14 +36,14 @@
 
         </ul>
     </div>
-    <div class="pane right menu-item-description">
-        <div class="desc-area ui-symbol icon type-icon">
+    <div class="pane right menu-item-description l-flex-col">
+        <div class="desc-area flex-elem holder ui-symbol icon type-icon">
             {{representation.activeMetadata.glyph}}
         </div>
-        <div class="desc-area title">
+        <div class="desc-area flex-elem holder title">
             {{representation.activeMetadata.name}}
         </div>
-        <div class="desc-area description">
+        <div class="desc-area flex-elem holder description">
             {{representation.activeMetadata.description}}
         </div>
     </div>
diff --git a/platform/commonUI/general/res/sass/_icons.scss b/platform/commonUI/general/res/sass/_icons.scss
index f27e9c15bdd..b41a15d6eb6 100644
--- a/platform/commonUI/general/res/sass/_icons.scss
+++ b/platform/commonUI/general/res/sass/_icons.scss
@@ -66,8 +66,7 @@
 }
 
 .menu .type-icon,
-.tree-item .type-icon,
-.super-menu.menu .type-icon {
+.tree-item .type-icon {
 	position: absolute;
 }
 
diff --git a/platform/commonUI/general/res/sass/controls/_menus.scss b/platform/commonUI/general/res/sass/controls/_menus.scss
index a1f21916b27..ba48f383777 100644
--- a/platform/commonUI/general/res/sass/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/controls/_menus.scss
@@ -167,7 +167,7 @@
 	}
 	.pane {
 		box-sizing: border-box;
-		&.left {
+		&.menu-items {
 			border-right: 1px solid pullForward($colorMenuBg, 10%);
 			left: 0;
 			padding-right: $interiorMargin;
@@ -183,38 +183,47 @@
 				}
 			}
 		}
-		&.right {
+		&.menu-item-description {
 			left: auto;
 			right: 0;
 			padding: $interiorMargin * 5;
 			width: $prw;
+            .desc-area {
+                &.icon {
+                    color: $colorCreateMenuLgIcon;
+                    font-size: 8em;
+                    margin-bottom: $interiorMargin * 3;
+                    position: relative;
+                    text-align: center;
+                }
+                &.title {
+                    color: $colorCreateMenuText;
+                    font-size: 1.2em;
+                    margin-bottom: $interiorMargin * 2;
+                }
+                &.description {
+                    color: $colorCreateMenuText;
+                    font-size: 0.8em;
+                    line-height: 1.5em;
+                }
+            }
 		}
 	}
-	.menu-item-description {
-		.desc-area {
-			&.icon {
-				$h: 150px;
-				color: $colorCreateMenuLgIcon;
-				position: relative;
-				font-size: 8em;
-				left: 0;
-				height: $h;
-				line-height: $h;
-				margin-bottom: $interiorMargin * 5;
-				text-align: center;
-			}
-			&.title {
-				color: $colorCreateMenuText;
-				font-size: 1.2em;
-				margin-bottom: 0.5em;
-			}
-			&.description {
-				color: $colorCreateMenuText;
-				font-size: 0.8em;
-				line-height: 1.5em;
-			}
-		}
-	}
+
+    &.mini {
+        width: 350px;
+        height: 250px;
+        .pane {
+            &.menu-item-description {
+                padding: $interiorMargin * 3;
+                .desc-area {
+                    &.icon {
+                        font-size: 4em;
+                    }
+                }
+            }
+        }
+    }
 }
 .context-menu {
 	font-size: 0.80rem;
@@ -251,3 +260,7 @@
 	right: 0;
 	width: auto;
 }
+
+.menus-up .menu {
+    bottom: $btnStdH; top: auto;
+}
diff --git a/platform/features/conductor-v2/res/templates/mode-selector/mode-selector.html b/platform/features/conductor-v2/res/templates/mode-selector/mode-selector.html
index 06cadb11821..b3a565dec8f 100644
--- a/platform/features/conductor-v2/res/templates/mode-selector/mode-selector.html
+++ b/platform/features/conductor-v2/res/templates/mode-selector/mode-selector.html
@@ -19,13 +19,12 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<style>
+<!--<style>
     .super-menu.mode-selector-menu {
         width: 400px;
     }
     .super-menu.mode-selector-menu {
         height: 200px;
-        bottom: 0px;
     }
     .super-menu.mode-selector-menu .menu-item-description .desc-area.icon {
         height: 20%;
@@ -35,13 +34,13 @@
     .super-menu .mode-selector-menu .menu-item-description .desc-area.description {
         height: 60%;
     }
-</style>
+</style>-->
 <span ng-controller="ClickAwayController as modeController">
     <div class="s-menu-btn"
          ng-click="modeController.toggle()">
 		<span class="title-label">Fixed Time Span</span>
     </div>
-    <div class="menu super-menu mode-selector-menu"
+    <div class="menu super-menu mini mode-selector-menu"
          ng-show="modeController.isActive()">
         <mct-representation mct-object="domainObject"
                             key="'mode-menu'">