From 7085c6cb6d38ad812e46f930a75b12737616a167 Mon Sep 17 00:00:00 2001
From: Michael Hackstein <michael@arangodb.com>
Date: Fri, 31 Jan 2014 21:38:47 +0100
Subject: [PATCH] The context menu in the graphviewer now has style of OSX

---
 .../frontend/css/jquery.contextmenu.css       | 41 +++++++++++++++++++
 js/apps/system/aardvark/manifest.json         |  1 +
 .../specContextMenu/contextMenuSpec.js        | 15 ++++---
 3 files changed, 52 insertions(+), 5 deletions(-)
 create mode 100644 js/apps/system/aardvark/frontend/css/jquery.contextmenu.css

diff --git a/js/apps/system/aardvark/frontend/css/jquery.contextmenu.css b/js/apps/system/aardvark/frontend/css/jquery.contextmenu.css
new file mode 100644
index 0000000000..621123da3b
--- /dev/null
+++ b/js/apps/system/aardvark/frontend/css/jquery.contextmenu.css
@@ -0,0 +1,41 @@
+/* OSX Theme */
+/* ========= */
+.context-menu-theme-osx {
+  background-color:white;
+  opacity: .93;
+  filter: alpha(opacity=93);
+  zoom:1.0;
+  border:1px solid #b2b2b2;
+  padding: 3px 0px;
+  border-radius: 4px;
+}
+.context-menu-theme-osx .context-menu-item {
+  text-align:left;
+  cursor:pointer;
+  color:black;
+  font-family:Lucida Grande,Arial;
+  font-weight:700;
+  font-size:12px;
+  opacity: 1.0;
+  filter: alpha(opacity=100);
+  z-index:1;
+}
+.context-menu-theme-osx .context-menu-separator {
+  margin:5px 1px 4px 1px;
+  font-size:0px;
+  border-top:1px solid #e4e4e4;
+}
+.context-menu-theme-osx .context-menu-item:hover {
+  background-color:#1C44F2;
+  color:white;
+}
+.context-menu-theme-osx .context-menu-item .context-menu-item-inner {
+  padding:2px 10px 2px 22px;
+  background-color:none;
+  background-repeat:no-repeat;
+  background-position:4px center;
+  background-image:none;
+}
+.context-menu-theme-osx .context-menu-item-disabled {
+  color:#939393;
+}
diff --git a/js/apps/system/aardvark/manifest.json b/js/apps/system/aardvark/manifest.json
index 34cc606cb5..f835df9748 100644
--- a/js/apps/system/aardvark/manifest.json
+++ b/js/apps/system/aardvark/manifest.json
@@ -100,6 +100,7 @@
         "frontend/css/arangodbIcons.css",
         "frontend/css/bootstrap-glyphicons.css",
         "frontend/css/jquery-ui-1.9.2.custom.css",
+        "frontend/css/jquery.contextmenu.css",
         "frontend/css/layout.css",
         "frontend/css/jquery.dataTables.css",
         "frontend/css/nv.d3.css",
diff --git a/js/apps/system/aardvark/test/specs/graphViewer/specContextMenu/contextMenuSpec.js b/js/apps/system/aardvark/test/specs/graphViewer/specContextMenu/contextMenuSpec.js
index 2cb81bbb98..5057aed82f 100644
--- a/js/apps/system/aardvark/test/specs/graphViewer/specContextMenu/contextMenuSpec.js
+++ b/js/apps/system/aardvark/test/specs/graphViewer/specContextMenu/contextMenuSpec.js
@@ -3,7 +3,7 @@
 /*global describe, it, expect, jasmine */
 /*global runs, spyOn, waitsFor, waits */
 /*global document, $*/
-/*global ContextMenu*/
+/*global ContextMenu, uiMatchers*/
 
 ////////////////////////////////////////////////////////////////////////////////
 /// @brief Graph functionality
@@ -66,6 +66,7 @@
         };
         spyOn($.contextMenu, "create").andReturn(fakeMenu);
         conMenu = new ContextMenu(id);
+        uiMatchers.define(this);
       });
 
       it("should create a div in the body", function() {
@@ -95,15 +96,19 @@
         spyOn(call, "back");
         conMenu.addEntry("MyLabel", call.back);
         // Check if entry is inserted
-        entry = document.getElementById(id).firstChild;
+        entry = document.getElementById(id);
         expect(entry).toBeDefined();
-        expect(entry.tagName.toLowerCase()).toEqual("ul");
+        expect(entry).toBeTag("div");
+        expect(entry).toBeOfClass("context-menu");
+        expect(entry).toBeOfClass("context-menu-theme-osx");
         entry = entry.firstChild;
         expect(entry).toBeDefined();
-        expect(entry.tagName.toLowerCase()).toEqual("li");
+        expect(entry).toBeTag("div");
+        expect(entry).toBeOfClass("context-menu-item");
         entry = entry.firstChild;
         expect(entry).toBeDefined();
-        expect(entry.tagName.toLowerCase()).toEqual("button");
+        expect(entry).toBeTag("div");
+        expect(entry).toBeOfClass("context-menu-item-inner");
         // Check clicks
         conMenu.bindMenu(fake);
         expect(call.back).not.toHaveBeenCalled();