[ui/ng] popover

Signed-off-by: Jeeyun Lim <jeeyun.lim@gmail.com>
vmware-archive · Mar 30, 2017 · fa69f6b · fa69f6b
1 parent 67ed200
commit fa69f6b
Show file tree

Hide file tree

Showing 45 changed files with 1,322 additions and 292 deletions.
diff --git a/gemini/screens/dropdown/angular-positioning/current-clicked/chrome.png b/gemini/screens/dropdown/angular-positioning/current-clicked/chrome.png
diff --git a/gemini/screens/dropdown/angular-positioning/default/chrome.png b/gemini/screens/dropdown/angular-positioning/default/chrome.png
diff --git a/gemini/screens/dropdown/angular-positioning/deprecated-clicked/chrome.png b/gemini/screens/dropdown/angular-positioning/deprecated-clicked/chrome.png
diff --git a/gemini/screens/dropdown/dropdown-header/click the dropdown toggle/chrome.png b/gemini/screens/dropdown/dropdown-header/click the dropdown toggle/chrome.png
diff --git a/gemini/screens/navigation/header-types/default/chrome.png b/gemini/screens/navigation/header-types/default/chrome.png
diff --git a/gemini/screens/tooltips/angular/default/chrome.png b/gemini/screens/tooltips/angular/default/chrome.png
diff --git a/gemini/screens/tooltips/angular/hover/chrome.png b/gemini/screens/tooltips/angular/hover/chrome.png
diff --git a/gemini/tests/dropdown.js b/gemini/tests/dropdown.js
@@ -50,7 +50,17 @@ gemini.suite('dropdown', (child) => {
                 actions.wait(WAIT_LOAD_TIME);
             })
             .setCaptureElements('.clr-example')
-            .capture('default');
+            .capture('default')
+            .capture('deprecated-clicked', function(actions, find) {
+                this.deprecated = find('#deprecated');
+                actions.click(this.deprecated);
+                actions.wait(WAIT_TIME);
+            })
+            .capture('current-clicked', function(actions, find) {
+                this.current = find('#current');
+                actions.click(this.current);
+                actions.wait(WAIT_TIME);
+            });
     });
 
     gemini.suite('multi-click', (child) => {

diff --git a/gemini/tests/navigation.js b/gemini/tests/navigation.js
@@ -10,6 +10,7 @@ gemini.suite('navigation', (child) => {
                 actions.wait(WAIT_LOAD_TIME);
             })
             .setCaptureElements('.clr-example .main-container')
+            .ignoreElements('pre')
             .capture('default');
     });
 

diff --git a/gemini/tests/tooltips.js b/gemini/tests/tooltips.js
@@ -31,4 +31,18 @@ gemini.suite('tooltips', (child) => {
             });
     });
 
+    gemini.suite('angular', (child) => {
+        child.setUrl('/tooltips/angular')
+            .before((actions, find) => {
+                actions.waitForElementToShow('.clr-example', WAIT_TIME);
+                actions.wait(WAIT_LOAD_TIME);
+            })
+            .setCaptureElements('.clr-example')
+            .capture('default')
+            .capture('hover', function(actions, find) {
+                actions.mouseMove(find('.tooltip'));
+                actions.wait(WAIT_TIME);
+            });
+    });
+
 });
diff --git a/src/app/app.html b/src/app/app.html
@@ -27,11 +27,11 @@
                     <clr-icon shape="cog"></clr-icon>
                     <clr-icon shape="caret down"></clr-icon>
                 </button>
-                <div class="dropdown-menu">
+                <clr-dropdown-menu>
                     <a href="javascript://" clrDropdownItem>About</a>
                     <a href="javascript://" clrDropdownItem>Preferences</a>
                     <a href="javascript://" clrDropdownItem>Log out</a>
-                </div>
+                </clr-dropdown-menu>
             </clr-dropdown>
         </div>
     </clr-header>

diff --git a/src/app/dropdown/dropdown-angular-positioning.demo.html b/src/app/dropdown/dropdown-angular-positioning.demo.html
@@ -4,9 +4,10 @@
   ~ The full license information can be found in LICENSE in the root directory of this project.
   -->
 
+
 <div class="clr-example squeeze dropdown-demo">
     <clr-dropdown [clrMenuPosition]="'top-left'">
-        <button class="btn btn-outline-primary" clrDropdownToggle>
+        <button class="btn btn-outline-primary" clrDropdownToggle id="deprecated">
             Dropdown
             <clr-icon shape="caret down"></clr-icon>
         </button>
@@ -20,6 +21,21 @@
             <a href="javascript://" clrDropdownItem>Link 2</a>
         </div>
     </clr-dropdown>
+    <clr-dropdown [clrMenuPosition]="'top-left'">
+        <button class="btn btn-outline-primary" clrDropdownToggle id="current">
+            Dropdown
+            <clr-icon shape="caret down"></clr-icon>
+        </button>
+        <clr-dropdown-menu>
+            <label class="dropdown-header">Dropdown header</label>
+            <a href="javascript://" clrDropdownItem>Action 1</a>
+            <a href="javascript://" clrDropdownItem>Action 2</a>
+            <a href="javascript://" class="disabled" clrDropdownItem>Disabled Action</a>
+            <div class="dropdown-divider"></div>
+            <a href="javascript://" clrDropdownItem>Link 1</a>
+            <a href="javascript://" clrDropdownItem>Link 2</a>
+        </clr-dropdown-menu>
+    </clr-dropdown>
 </div>
 
 <pre>
@@ -29,15 +45,15 @@
             Dropdown
             &lt;clr-icon shape=&quot;caret down&quot;&gt;&lt;/clr-icon&gt;
         &lt;/button&gt;
-        &lt;div class=&quot;dropdown-menu&quot;&gt;
+        &lt;clr-dropdown-menu&gt;
             &lt;label class=&quot;dropdown-header&quot;&gt;Dropdown header&lt;/label&gt;
             &lt;a href=&quot;...&quot; clrDropdownItem&gt;Action 1&lt;/a&gt;
             &lt;a href=&quot;...&quot; clrDropdownItem&gt;Action 2&lt;/a&gt;
             &lt;a href=&quot;...&quot; class=&quot;disabled&quot; clrDropdownItem&gt;Disabled Action&lt;/a&gt;
             &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
             &lt;a href=&quot;...&quot; clrDropdownItem&gt;Link 1&lt;/a&gt;
             &lt;a href=&quot;...&quot; clrDropdownItem&gt;Link 2&lt;/a&gt;
-        &lt;/div&gt;
+        &lt;/clr-dropdown-menu&gt;
     &lt;/clr-dropdown&gt;
     </code>
 </pre>
diff --git a/src/app/dropdown/dropdown-header.demo.html b/src/app/dropdown/dropdown-header.demo.html
@@ -21,7 +21,7 @@
                 </label>
             </form>
             <div class="header-actions">
-                <clr-dropdown class="dropdown bottom-right">
+                <clr-dropdown [clrMenuPosition]="'bottom-right'">
                     <button class="nav-icon" clrDropdownToggle>
                         <clr-icon shape="user"></clr-icon>
                         <clr-icon shape="caret down"></clr-icon>

diff --git a/src/app/nav/header-types.demo.html b/src/app/nav/header-types.demo.html
@@ -51,16 +51,16 @@
                 </a>
             </div>
             <div class="header-actions">
-                <clr-dropdown class="dropdown bottom-right">
+                <clr-dropdown [clrMenuPosition]="'bottom-right'">
                     <button class="nav-icon" clrDropdownToggle>
                         <clr-icon shape="cog"></clr-icon>
                         <clr-icon shape="caret down"></clr-icon>
                     </button>
-                    <div class="dropdown-menu">
+                    <clr-dropdown-menu>
                         <a href="javascript://" clrDropdownItem>About</a>
                         <a href="javascript://" clrDropdownItem>Preferences</a>
                         <a href="javascript://" clrDropdownItem>Log out</a>
-                    </div>
+                    </clr-dropdown-menu>
                 </clr-dropdown>
             </div>
         </header>
@@ -86,16 +86,16 @@
                 </label>
             </form>
             <div class="header-actions">
-                <clr-dropdown class="dropdown bottom-right">
+                <clr-dropdown [clrMenuPosition]="'bottom-right'">
                     <button class="nav-icon" clrDropdownToggle>
                         <clr-icon shape="user"></clr-icon>
                         <clr-icon shape="caret down"></clr-icon>
                     </button>
-                    <div class="dropdown-menu">
+                    <clr-dropdown-menu>
                         <a href="javascript://" clrDropdownItem>About</a>
                         <a href="javascript://" clrDropdownItem>Preferences</a>
                         <a href="javascript://" clrDropdownItem>Log out</a>
-                    </div>
+                    </clr-dropdown-menu>
                 </clr-dropdown>
             </div>
         </header>
@@ -122,20 +122,19 @@
                 </a>
             </div>
             <div class="header-actions">
-                <clr-dropdown class="dropdown bottom-right">
+                <clr-dropdown [clrMenuPosition]="'bottom-right'">
                     <button class="nav-text" clrDropdownToggle>
                         john.doe@vmware.com
                         <clr-icon shape="caret down"></clr-icon>
                     </button>
-                    <div class="dropdown-menu">
+                    <clr-dropdown-menu>
                         <a href="javascript://" clrDropdownItem>Preferences</a>
                         <a href="javascript://" clrDropdownItem>Log out</a>
-                    </div>
+                    </clr-dropdown-menu>
                 </clr-dropdown>
             </div>
         </header>
-    </div>
-</div>
+
 <pre>
     <code clr-code-highlight="language-html">
     &lt;header class=&quot;header-6&quot;&gt;
@@ -183,16 +182,16 @@
             &lt;/a&gt;
         &lt;/div&gt;
         &lt;div class=&quot;header-actions&quot;&gt;
-            &lt;clr-dropdown class=&quot;dropdown bottom-right&quot;&gt;
+            &lt;clr-dropdown [clrMenuPosition]=&quot;'bottom-right'&quot;&gt;
                 &lt;button class=&quot;nav-icon&quot; clrDropdownToggle&gt;
                     &lt;clr-icon shape=&quot;cog&quot;&gt;&lt;/clr-icon&gt;
                     &lt;clr-icon shape=&quot;caret down&quot;&gt;&lt;/clr-icon&gt;
                 &lt;/button&gt;
-                &lt;div class=&quot;dropdown-menu&quot;&gt;
+                &lt;clr-dropdown-menu&gt;
                     &lt;a href=&quot;...&quot; clrDropdownItem&gt;About&lt;/a&gt;
                     &lt;a href=&quot;...&quot; clrDropdownItem&gt;Preferences&lt;/a&gt;
                     &lt;a href=&quot;...&quot; clrDropdownItem&gt;Log out&lt;/a&gt;
-                &lt;/div&gt;
+                &lt;/clr-dropdown-menu&gt;
             &lt;/clr-dropdown&gt;
         &lt;/div&gt;
     &lt;/header&gt;
@@ -218,16 +217,16 @@
             &lt;/label&gt;
         &lt;/form&gt;
         &lt;div class=&quot;header-actions&quot;&gt;
-            &lt;clr-dropdown class=&quot;dropdown bottom-right&quot;&gt;
+            &lt;clr-dropdown [clrMenuPosition]=&quot;'bottom-right'&quot;&gt;
                 &lt;button class=&quot;nav-icon&quot; clrDropdownToggle&gt;
                     &lt;clr-icon shape=&quot;user&quot;&gt;&lt;/clr-icon&gt;
                     &lt;clr-icon shape=&quot;caret down&quot;&gt;&lt;/clr-icon&gt;
                 &lt;/button&gt;
-                &lt;div class=&quot;dropdown-menu&quot;&gt;
+                &lt;clr-dropdown-menu&gt;
                     &lt;a href=&quot;...&quot; clrDropdownItem&gt;About&lt;/a&gt;
                     &lt;a href=&quot;...&quot; clrDropdownItem&gt;Preferences&lt;/a&gt;
                     &lt;a href=&quot;...&quot; clrDropdownItem&gt;Log out&lt;/a&gt;
-                &lt;/div&gt;
+                &lt;/clr-dropdown-menu&gt;
             &lt;/clr-dropdown&gt;
         &lt;/div&gt;
     &lt;/header&gt;
@@ -254,17 +253,20 @@
             &lt;/a&gt;
         &lt;/div&gt;
         &lt;div class=&quot;header-actions&quot;&gt;
-            &lt;clr-dropdown class=&quot;dropdown bottom-right&quot;&gt;
+            &lt;clr-dropdown [clrMenuPosition]=&quot;'bottom-right'&quot;&gt;
                 &lt;button class=&quot;nav-text&quot; clrDropdownToggle&gt;
                     john.doe@vmware.com
                     &lt;clr-icon shape=&quot;caret down&quot;&gt;&lt;/clr-icon&gt;
                 &lt;/button&gt;
-                &lt;div class=&quot;dropdown-menu&quot;&gt;
+                &lt;clr-dropdown-menu&gt;
                     &lt;a href=&quot;...&quot; clrDropdownItem&gt;Preferences&lt;/a&gt;
                     &lt;a href=&quot;...&quot; clrDropdownItem&gt;Log out&lt;/a&gt;
-                &lt;/div&gt;
+                &lt;/clr-dropdown-menu&gt;
             &lt;/clr-dropdown&gt;
         &lt;/div&gt;
     &lt;/header&gt;
     </code>
 </pre>
+    </div>
+</div>
+
diff --git a/src/app/tooltips/tooltips-angular.html b/src/app/tooltips/tooltips-angular.html
@@ -0,0 +1,130 @@
+<!--
+  ~ Copyright (c) 2016 VMware, Inc. All Rights Reserved.
+  ~ This software is released under MIT license.
+  ~ The full license information can be found in LICENSE in the root directory of this project.
+  -->
+
+<h6>Top-Right</h6>
+<div class="clr-example squeeze example-center" id="top-right">
+    <clr-tooltip [clrTooltipDirection]="'top-right'" [clrTooltipSize]="'xs'">
+        <clr-icon shape="info-circle" size="24"></clr-icon>
+        <clr-tooltip-content>
+            <span>Lorem</span>
+        </clr-tooltip-content>
+    </clr-tooltip>
+</div>
+<pre>
+    <code clr-code-highlight="language-html">
+    &lt;clr-tooltip [clrTooltipDirection]=&quot;'top-right'&quot; [clrTooltipSize]=&quot;'xs'&quot;&gt;
+        &lt;clr-icon shape=&quot;info-circle&quot; size=&quot;24&quot;&gt;&lt;/clr-icon&gt;
+        &lt;clr-tooltip-content&gt;
+            &lt;span&gt;Lorem&lt;/span&gt;
+        &lt;/clr-tooltip-content&gt;
+    &lt;/clr-tooltip&gt;
+</code>
+</pre>
+
+<h6>Top-Left</h6>
+<div class="clr-example squeeze example-center" id="top-left">
+    <clr-tooltip [clrTooltipDirection]="'top-left'" [clrTooltipSize]="'sm'">
+        <clr-icon shape="info-circle" size="24"></clr-icon>
+        <clr-tooltip-content>
+            <span>Lorem ipsum</span>
+        </clr-tooltip-content>
+    </clr-tooltip>
+</div>
+
+<pre>
+    <code clr-code-highlight="language-html">
+    &lt;clr-tooltip [clrTooltipDirection]=&quot;'top-left'&quot; [clrTooltipSize]=&quot;'sm'&quot;&gt;
+        &lt;clr-icon shape=&quot;info-circle&quot; size=&quot;24&quot;&gt;&lt;/clr-icon&gt;
+        &lt;clr-tooltip-content&gt;
+            &lt;span&gt;Lorem ipsum&lt;/span&gt;
+        &lt;/clr-tooltip-content&gt;
+    &lt;/clr-tooltip&gt;
+    </code>
+</pre>
+
+<h6>Bottom-Right</h6>
+<div class="clr-example squeeze example-center" id="bottom-right">
+    <clr-tooltip [clrTooltipDirection]="'bottom-right'" [clrTooltipSize]="'md'">
+        <clr-icon shape="info-circle" size="24"></clr-icon>
+        <clr-tooltip-content>
+            <span>Lorem ipsum sit</span>
+        </clr-tooltip-content>
+    </clr-tooltip>
+</div>
+
+<pre>
+    <code clr-code-highlight="language-html">
+    &lt;clr-tooltip [clrTooltipDirection]=&quot;'bottom-right'&quot; [clrTooltipSize]=&quot;'md'&quot;&gt;
+        &lt;clr-icon shape=&quot;info-circle&quot; size=&quot;24&quot;&gt;&lt;/clr-icon&gt;
+        &lt;clr-tooltip-content&gt;
+            &lt;span&gt;Lorem ipsum sit&lt;/span&gt;
+        &lt;/clr-tooltip-content&gt;
+    &lt;/clr-tooltip&gt;
+    </code>
+</pre>
+
+<h6>Bottom-Left</h6>
+<div class="clr-example squeeze example-center" id="bottom-left">
+    <clr-tooltip [clrTooltipDirection]="'bottom-left'" [clrTooltipSize]="'lg'">
+        <clr-icon shape="info-circle" size="24"></clr-icon>
+        <clr-tooltip-content>
+            <span>Lorem ipsum sit</span>
+        </clr-tooltip-content>
+    </clr-tooltip>
+</div>
+
+<pre>
+    <code clr-code-highlight="language-html">
+    &lt;clr-tooltip [clrTooltipDirection]=&quot;'bottom-left'&quot; [clrTooltipSize]=&quot;'lg'&quot;&gt;
+        &lt;clr-icon shape=&quot;info-circle&quot; size=&quot;24&quot;&gt;&lt;/clr-icon&gt;
+        &lt;clr-tooltip-content&gt;
+            &lt;span&gt;Lorem ipsum sit&lt;/span&gt;
+        &lt;/clr-tooltip-content&gt;
+    &lt;/clr-tooltip&gt;
+    </code>
+</pre>
+
+<h6>Right</h6>
+<div class="clr-example squeeze example-center" id="right">
+    <clr-tooltip>
+        <clr-icon shape="info-circle" size="24"></clr-icon>
+        <clr-tooltip-content>
+            <span>Lorem ipsum sit</span>
+        </clr-tooltip-content>
+    </clr-tooltip>
+</div>
+
+<pre>
+    <code clr-code-highlight="language-html">
+    &lt;clr-tooltip&gt;
+        &lt;clr-icon shape=&quot;info-circle&quot; size=&quot;24&quot;&gt;&lt;/clr-icon&gt;
+        &lt;clr-tooltip-content&gt;
+            &lt;span&gt;Lorem ipsum sit&lt;/span&gt;
+        &lt;/clr-tooltip-content&gt;
+    &lt;/clr-tooltip&gt;
+    </code>
+</pre>
+
+<h6>Left</h6>
+<div class="clr-example squeeze example-center" id="left">
+    <clr-tooltip [clrTooltipDirection]="'left'" [clrTooltipSize]="'sm'">
+        <clr-icon shape="info-circle" size="24"></clr-icon>
+        <clr-tooltip-content>
+            <span>Lorem ipsum sit</span>
+        </clr-tooltip-content>
+    </clr-tooltip>
+</div>
+
+<pre>
+    <code clr-code-highlight="language-html">
+    &lt;clr-tooltip [clrTooltipDirection]=&quot;'left'&quot; [clrTooltipSize]=&quot;'sm'&quot;&gt;
+        &lt;clr-icon shape=&quot;info-circle&quot; size=&quot;24&quot;&gt;&lt;/clr-icon&gt;
+        &lt;clr-tooltip-content&gt;
+            &lt;span&gt;Lorem ipsum sit&lt;/span&gt;
+        &lt;/clr-tooltip-content&gt;
+    &lt;/clr-tooltip&gt;
+    </code>
+</pre>
diff --git a/src/app/tooltips/tooltips-angular.ts b/src/app/tooltips/tooltips-angular.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2016 VMware, Inc. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+import {Component} from "@angular/core";
+
+@Component({
+    moduleId: module.id,
+    selector: "clr-tooltips-angular-demo",
+    // Note the .css extension here, not .scss. That's the best we can have at the moment.
+    styleUrls: ["./tooltips.demo.css"],
+    templateUrl: "./tooltips-angular.html"
+})
+export class TooltipsAngularDemo {
+
+}