Image upload process + right-click menu UI

client/scss/app.scss

@@ -14,6 +14,7 @@ $warning: $orange;
 @import 'bulma';
 @import './libs/twemoji-awesome';
 @import './libs/animate.min.css';
+@import './libs/jquery-contextmenu';
 
 @import './components/_alerts';
 @import './components/_editor';

client/scss/components/_editor.scss

@@ -17,10 +17,12 @@
 
 	a {
 		color: #FFF !important;
+		border: none;
+		transition: background-color 0.4s ease;
 
-		&.active, &:hover {
+		&.active, &:hover, &:focus {
 			background-color: rgba(0,0,0,0.5);
-			border-color: #888;
+			outline: none;
 		}
 
 	}
@@ -63,6 +65,33 @@
 		opacity: 1;
 	}
 
+}
+
+#btn-editor-uploadimage {
+	position: relative;
+	overflow: hidden;
+
+	> label {
+		display: block;
+		opacity: 0;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		cursor: pointer;
+
+		input[type=file] {
+			opacity: 0;
+			position: absolute;
+			top: -9999px;
+			left: -9999px;
+		}
+
+	}
+
+	
+
 }
 
 .editor-modal-imagechoices {
@@ -127,6 +156,20 @@
 
 		}
 
+		&.is-contextopen {
+			background-color: $warning;
+			color: #FFF;
+
+			> img {
+				border-color: darken($warning, 10%);
+			}
+
+			> span > strong {
+				color: #FFF;
+			}
+
+		}
+
 	}
 
 }

client/scss/libs/jquery-contextmenu.scss

@@ -0,0 +1,131 @@
+@charset "UTF-8";
+/*!
+ * jQuery contextMenu - Plugin for simple contextMenu handling
+ *
+ * Version: v2.2.5-dev
+ *
+ * Authors: Björn Brala (SWIS.nl), Rodney Rehm, Addy Osmani (patches for FF)
+ * Web: http://swisnl.github.io/jQuery-contextMenu/
+ *
+ * Copyright (c) 2011-2016 SWIS BV and contributors
+ *
+ * Licensed under
+ *   MIT License http://www.opensource.org/licenses/mit-license
+ *
+ * Date: 2016-08-27T11:09:08.919Z
+ */
+
+.context-menu-icon {
+  display: list-item;
+  font-family: inherit;
+}
+.context-menu-icon::before {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 2em; 
+  font-family: FontAwesome;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  color: $primary;
+  text-align: center;
+  -webkit-transform: translateY(-50%);
+      -ms-transform: translateY(-50%);
+       -o-transform: translateY(-50%);
+          transform: translateY(-50%);
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.context-menu-icon.context-menu-hover:before {
+  color: #fff;
+}
+.context-menu-icon.context-menu-disabled::before {
+  color: #bbb;
+}
+
+.context-menu-list {
+  position: absolute; 
+  display: inline-block;
+  min-width: 13em;
+  max-width: 26em;
+  padding: 0 0;
+  margin: .3em;
+  font-family: inherit;
+  font-size: 14px;
+  list-style-type: none;
+  background: #fff;
+  border: 1px solid $primary;
+  border-radius: .2em;
+  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
+          box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
+}
+
+.context-menu-item {
+  position: relative;
+  padding: 7px 2em;
+  color: #69707a;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none; 
+  background-color: #fff;
+  font-size: 14px;
+  text-align: left;
+}
+
+.context-menu-separator {
+  padding: 0; 
+  margin: .35em 0;
+  border-bottom: 1px solid #e6e6e6;
+}
+
+.context-menu-item.context-menu-hover {
+  color: #fff;
+  cursor: pointer; 
+  background-color: $primary;
+}
+
+.context-menu-item.context-menu-disabled {
+  color: #bbb;
+  cursor: default; 
+  background-color: #fff;
+}
+
+.context-menu-input.context-menu-hover {
+  cursor: default;
+}
+
+.context-menu-submenu:after {
+  position: absolute;
+  top: 50%;
+  right: .5em;
+  z-index: 1; 
+  width: 0;
+  height: 0;
+  content: '';
+  border-color: transparent transparent transparent #2f2f2f;
+  border-style: solid;
+  border-width: .25em 0 .25em .25em;
+  -webkit-transform: translateY(-50%);
+      -ms-transform: translateY(-50%);
+       -o-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+
+.context-menu-item > .context-menu-list {
+  top: .3em; 
+  /* re-positioned by js */
+  right: -.3em;
+  display: none;
+}
+
+.context-menu-item.context-menu-visible > .context-menu-list {
+  display: block;
+}
+
+.context-menu-accesskey {
+  text-decoration: underline;
+}