Fixed Hint view
diff --git a/dev/demo/all.html b/dev/demo/all.html
index c1e10d5..c46dd69 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -147,7 +147,7 @@
<script src="../js/src/vc.js"></script>
<script src="../js/src/session.js"></script>
<script src="../js/src/tutorial.js"></script>
- <script src="../js/src/util.js"></script>
+ <script src="../js/src/init.js"></script>
<script>
KorAP.URL = 'http://localhost:3000';
</script>
diff --git a/dev/demo/all.js b/dev/demo/all.js
index b29b0b5..5ce1266 100644
--- a/dev/demo/all.js
+++ b/dev/demo/all.js
@@ -437,19 +437,24 @@
// Decorate actions
var init = KorAP.init();
- var menu = KorAP.MatchTreeMenu.create(
- undefined,
- menuContent
- );
-
// document.getElementById('vc-choose').click();
// init.tutorial.show();
- // Don't hide!!!
+/*
+
+ KorAP.HintMenu.hide = function () {};
+ init.hint.show();
+
+
+ var menu = KorAP.MatchTreeMenu.create(
+ undefined,
+ menuContent
+ );
menu.hide = function () {};
document.getElementById('menu').appendChild(menu.element());
menu.limit(3);
menu.show();
menu.focus();
+*/
});
diff --git a/dev/demo/match.html b/dev/demo/match.html
index 19014ba..cb2e7ef 100644
--- a/dev/demo/match.html
+++ b/dev/demo/match.html
@@ -4,7 +4,7 @@
<title>Match demo</title>
<meta charset="utf-8" />
<script src="../js/lib/dagre/dagre.min.js"></script>
- <script src="../js/src/util.js"></script>
+ <script src="../js/src/init.js"></script>
<script src="../js/src/menu.js"></script>
<script src="../js/src/match.js"></script>
<link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
diff --git a/dev/js/src/hint.js b/dev/js/src/hint.js
index 80631ec..474948a 100644
--- a/dev/js/src/hint.js
+++ b/dev/js/src/hint.js
@@ -31,254 +31,6 @@
// Initialize hint array
KorAP.hintArray = KorAP.hintArray || {};
- // Input field for queries
- KorAP.InputField = {
- create : function (element) {
- return Object.create(KorAP.InputField)._init(element);
- },
-
- _init : function (element) {
- this._element = element;
-
- // Create mirror for searchField
- if ((this._mirror = document.getElementById("searchMirror")) === null) {
- this._mirror = document.createElement("div");
- this._mirror.setAttribute("id", "searchMirror");
- this._mirror.appendChild(document.createElement("span"));
- this._container = this._mirror.appendChild(document.createElement("div"));
- this._mirror.style.height = "1px";
- document.getElementsByTagName("body")[0].appendChild(this._mirror);
- };
-
- // Update position of the mirror
- var that = this;
- window.onresize = function () {
- that.reposition();
- };
-
- that.reposition();
-
- return this;
- },
-
- rightPos : function () {
- var box = this._mirror.getBoundingClientRect();
- return box.right - box.left;
- },
-
- mirror : function () {
- return this._mirror;
- },
-
- container : function () {
- return this._container;
- },
-
- element : function () {
- return this._element;
- },
-
- value : function () {
- return this._element.value;
- },
-
- update : function () {
- this._mirror.firstChild.textContent = this.split()[0];
- },
-
- insert : function (text) {
- var splittedText = this.split();
- var s = this._element;
- s.value = splittedText[0] + text + splittedText[1];
- s.selectionStart = (splittedText[0] + text).length;
- s.selectionEnd = s.selectionStart;
- this._mirror.firstChild.textContent = splittedText[0] + text;
- },
-
- // Return two substrings, splitted at current cursor position
- split : function () {
- var s = this._element;
- var value = s.value;
- var start = s.selectionStart;
- return new Array(
- value.substring(0, start),
- value.substring(start, value.length)
- );
- },
-
- // Position the input mirror directly below the input box
- reposition : function () {
- var inputClientRect = this._element.getBoundingClientRect();
- var inputStyle = window.getComputedStyle(this._element, null);
-
- // Reset position
- var mirrorStyle = this._mirror.style;
- mirrorStyle.left = inputClientRect.left + "px";
- mirrorStyle.top = inputClientRect.bottom + "px";
-
- // These may be relevant in case of media depending css
- mirrorStyle.paddingLeft = inputStyle.getPropertyValue("padding-left");
- mirrorStyle.marginLeft = inputStyle.getPropertyValue("margin-left");
- mirrorStyle.borderLeftWidth = inputStyle.getPropertyValue("border-left-width");
- mirrorStyle.borderLeftStyle = inputStyle.getPropertyValue("border-left-style");
- mirrorStyle.fontSize = inputStyle.getPropertyValue("font-size");
- mirrorStyle.fontFamily = inputStyle.getPropertyValue("font-family");
- },
- context : function () {
- return this.split()[0];
- }
- };
-
-
- /**
- * Regex object for checking the context of the hint
- */
- KorAP.ContextAnalyzer = {
- create : function (regex) {
- return Object.create(KorAP.ContextAnalyzer)._init(regex);
- },
- _init : function (regex) {
- try {
- this._regex = new RegExp(regex);
- }
- catch (e) {
- KorAP.log("error", e);
- return;
- };
- return this;
- },
- test : function (text) {
- if (!this._regex.exec(text))
- return;
- return RegExp.$1;
- }
- };
-
-
- /**
- * Hint menu item based on MenuItem
- */
- KorAP.HintMenuItem = {
- create : function (params) {
- return Object.create(KorAP.MenuItem)
- .upgradeTo(KorAP.HintMenuItem)
- ._init(params);
- },
- content : function (content) {
- if (arguments.length === 1) {
- this._content = content;
- };
- return this._content;
- },
- _init : function (params) {
- if (params[0] === undefined ||
- params[1] === undefined)
- throw new Error("Missing parameters");
-
- this._name = params[0];
- this._action = params[1];
- this._lcField = ' ' + this._name.toLowerCase();
-
- if (params.length > 2) {
- this._desc = params[2];
- this._lcField += " " + this._desc.toLowerCase();
- };
-
- return this;
- },
- onclick : function () {
- var m = this.menu();
- var h = m.hint();
- m.hide();
-
- h.inputField().insert(this._action);
- h.active = false;
-
- h.show(true);
- },
- name : function () {
- return this._name;
- },
- action : function () {
- return this._action;
- },
- desc : function () {
- return this._desc;
- },
- element : function () {
- // already defined
- if (this._element !== undefined)
- return this._element;
-
- // Create list item
- var li = document.createElement("li");
-
- if (this.onclick !== undefined) {
- li["onclick"] = this.onclick.bind(this);
- };
-
- // Create title
- var name = document.createElement("span");
- name.appendChild(document.createTextNode(this._name));
-
- li.appendChild(name);
-
- // Create description
- if (this._desc !== undefined) {
- var desc = document.createElement("span");
- desc.classList.add('desc');
- desc.appendChild(document.createTextNode(this._desc));
- li.appendChild(desc);
- };
- return this._element = li;
- }
- };
-
- KorAP.HintMenuPrefix = {
- create : function (params) {
- return Object.create(KorAP.MenuPrefix).upgradeTo(KorAP.HintMenuPrefix)._init(params);
- },
- onclick : function () {
- var m = this.menu();
- var h = m.hint();
- m.hide();
-
- h.inputField().insert(this.value());
- h.active = false;
- }
- };
-
- KorAP.HintMenu = {
- create : function (hint, context, params) {
- var obj = Object.create(KorAP.Menu)
- .upgradeTo(KorAP.HintMenu)
- ._init(KorAP.HintMenuItem, KorAP.HintMenuPrefix, params);
- obj._context = context;
- obj._element.classList.add('hint');
- obj._hint = hint;
-
- // This is only domspecific
- obj.element().addEventListener('blur', function (e) {
- this.menu.hide();
- });
-
- // Focus on input field on hide
- obj.onHide = function () {
- var input = this._hint.inputField();
- input.element().focus();
- };
-
- return obj;
- },
- // Todo: Is this necessary?
- context : function () {
- return this._context;
- },
- hint : function () {
- return this._hint;
- }
- };
-
/**
* KorAP.Hint.create({
@@ -311,7 +63,6 @@
var that = this;
-
// Add event listener for key pressed down
inputFieldElement.addEventListener(
"keypress", function (e) {
@@ -328,7 +79,6 @@
"keyup", function (e) {
var input = that._inputField;
input.update();
- input.container().style.left = input.rightPos() + 'px';
}
);
@@ -422,7 +172,9 @@
// Get the menu
var menu;
if (menu = this.contextMenu(ifContext)) {
- this._inputField.container().appendChild(menu.element());
+ var c = this._inputField.container();
+ c.classList.add('active');
+ c.appendChild(menu.element());
menu.show('');
menu.focus();
// Update bounding box
@@ -439,6 +191,269 @@
};
+ // Input field for queries
+ KorAP.InputField = {
+ create : function (element) {
+ return Object.create(KorAP.InputField)._init(element);
+ },
+
+ _init : function (element) {
+ this._element = element;
+
+ // Create mirror for searchField
+ if ((this._mirror = document.getElementById("searchMirror")) === null) {
+ this._mirror = document.createElement("div");
+ this._mirror.setAttribute("id", "searchMirror");
+ this._mirror.appendChild(document.createElement("span"));
+ this._container = this._mirror.appendChild(document.createElement("div"));
+ this._mirror.style.height = "0px";
+ document.getElementsByTagName("body")[0].appendChild(this._mirror);
+ };
+
+ // Update position of the mirror
+ var that = this;
+ var repos = function () {
+ that.reposition();
+ };
+ window.addEventListener('resize', repos);
+ this._element.addEventListener('onfocus', repos);
+ that.reposition();
+
+ return this;
+ },
+
+ rightPos : function () {
+ var box = this._mirror.firstChild.getBoundingClientRect();
+ return box.right - box.left;
+ },
+
+ mirror : function () {
+ return this._mirror;
+ },
+
+ container : function () {
+ return this._container;
+ },
+
+ element : function () {
+ return this._element;
+ },
+
+ value : function () {
+ return this._element.value;
+ },
+
+ update : function () {
+ this._mirror.firstChild.textContent = this.split()[0];
+ this._container.style.left = this.rightPos() + 'px';
+ },
+
+ insert : function (text) {
+ var splittedText = this.split();
+ var s = this._element;
+ s.value = splittedText[0] + text + splittedText[1];
+ s.selectionStart = (splittedText[0] + text).length;
+ s.selectionEnd = s.selectionStart;
+ this._mirror.firstChild.textContent = splittedText[0] + text;
+ },
+
+ // Return two substrings, splitted at current cursor position
+ split : function () {
+ var s = this._element;
+ var value = s.value;
+ var start = s.selectionStart;
+ return new Array(
+ value.substring(0, start),
+ value.substring(start, value.length)
+ );
+ },
+
+ // Position the input mirror directly below the input box
+ reposition : function () {
+ var inputClientRect = this._element.getBoundingClientRect();
+ var inputStyle = window.getComputedStyle(this._element, null);
+
+ var bodyClientRect =
+ document.getElementsByTagName('body')[0].getBoundingClientRect();
+
+ // Reset position
+ var mirrorStyle = this._mirror.style;
+ mirrorStyle.left = inputClientRect.left + "px";
+ mirrorStyle.top = (inputClientRect.bottom - bodyClientRect.top) + "px";
+ mirrorStyle.width = inputStyle.getPropertyValue("width");
+
+ // These may be relevant in case of media depending css
+ mirrorStyle.paddingLeft = inputStyle.getPropertyValue("padding-left");
+ mirrorStyle.marginLeft = inputStyle.getPropertyValue("margin-left");
+ mirrorStyle.borderLeftWidth = inputStyle.getPropertyValue("border-left-width");
+ mirrorStyle.borderLeftStyle = inputStyle.getPropertyValue("border-left-style");
+ mirrorStyle.fontSize = inputStyle.getPropertyValue("font-size");
+ mirrorStyle.fontFamily = inputStyle.getPropertyValue("font-family");
+ },
+ context : function () {
+ return this.split()[0];
+ }
+ };
+
+
+ /**
+ * Regex object for checking the context of the hint
+ */
+ KorAP.ContextAnalyzer = {
+ create : function (regex) {
+ return Object.create(KorAP.ContextAnalyzer)._init(regex);
+ },
+ _init : function (regex) {
+ try {
+ this._regex = new RegExp(regex);
+ }
+ catch (e) {
+ KorAP.log(0, e);
+ return;
+ };
+ return this;
+ },
+ test : function (text) {
+ if (!this._regex.exec(text))
+ return;
+ return RegExp.$1;
+ }
+ };
+
+
+ /**
+ * Hint menu
+ */
+ KorAP.HintMenu = {
+ create : function (hint, context, params) {
+ var obj = Object.create(KorAP.Menu)
+ .upgradeTo(KorAP.HintMenu)
+ ._init(KorAP.HintMenuItem, KorAP.HintMenuPrefix, params);
+ obj._context = context;
+ obj._element.classList.add('hint');
+ obj._hint = hint;
+
+ // This is only domspecific
+ obj.element().addEventListener('blur', function (e) {
+ this.menu.hide();
+ });
+
+ // Focus on input field on hide
+ obj.onHide = function () {
+ var input = this._hint.inputField();
+ input.container().classList.remove('active');
+ input.element().focus();
+ };
+
+ return obj;
+ },
+ // Todo: Is this necessary?
+ context : function () {
+ return this._context;
+ },
+ hint : function () {
+ return this._hint;
+ }
+ };
+
+
+ /**
+ * Hint menu item based on MenuItem
+ */
+ KorAP.HintMenuItem = {
+ create : function (params) {
+ return Object.create(KorAP.MenuItem)
+ .upgradeTo(KorAP.HintMenuItem)
+ ._init(params);
+ },
+ content : function (content) {
+ if (arguments.length === 1) {
+ this._content = content;
+ };
+ return this._content;
+ },
+ _init : function (params) {
+ if (params[0] === undefined ||
+ params[1] === undefined)
+ throw new Error("Missing parameters");
+
+ this._name = params[0];
+ this._action = params[1];
+ this._lcField = ' ' + this._name.toLowerCase();
+
+ if (params.length > 2) {
+ this._desc = params[2];
+ this._lcField += " " + this._desc.toLowerCase();
+ };
+
+ return this;
+ },
+ onclick : function () {
+ var m = this.menu();
+ var h = m.hint();
+ m.hide();
+
+ // Update input field
+ var input = h.inputField();
+ input.insert(this._action);
+ input.update();
+
+ h.active = false;
+ h.show(true);
+ },
+ name : function () {
+ return this._name;
+ },
+ action : function () {
+ return this._action;
+ },
+ desc : function () {
+ return this._desc;
+ },
+ element : function () {
+ // already defined
+ if (this._element !== undefined)
+ return this._element;
+
+ // Create list item
+ var li = document.createElement("li");
+
+ if (this.onclick !== undefined) {
+ li["onclick"] = this.onclick.bind(this);
+ };
+
+ // Create title
+ var name = document.createElement("span");
+ name.appendChild(document.createTextNode(this._name));
+
+ li.appendChild(name);
+
+ // Create description
+ if (this._desc !== undefined) {
+ var desc = document.createElement("span");
+ desc.classList.add('desc');
+ desc.appendChild(document.createTextNode(this._desc));
+ li.appendChild(desc);
+ };
+ return this._element = li;
+ }
+ };
+
+ KorAP.HintMenuPrefix = {
+ create : function (params) {
+ return Object.create(KorAP.MenuPrefix).upgradeTo(KorAP.HintMenuPrefix)._init(params);
+ },
+ onclick : function () {
+ var m = this.menu();
+ var h = m.hint();
+ m.hide();
+
+ h.inputField().insert(this.value());
+ h.active = false;
+ }
+ };
+
+
/**
* Return keycode based on event
*/
diff --git a/dev/js/src/util.js b/dev/js/src/init.js
similarity index 100%
rename from dev/js/src/util.js
rename to dev/js/src/init.js
diff --git a/dev/js/src/menu.js b/dev/js/src/menu.js
index 1cf3455..78f9ea7 100644
--- a/dev/js/src/menu.js
+++ b/dev/js/src/menu.js
@@ -6,6 +6,9 @@
* @author Nils Diewald
*/
+/*
+ * TODO: space is not a valid prefix!
+ */
(function (KorAP) {
"use strict";
@@ -306,7 +309,7 @@
this._list.push(i);
while (this._items[++i] !== undefined) {
this._items[i].lowlight();
- console.log(this._item);
+ // console.log(this._item);
};
return true;
};
diff --git a/dev/scss/base.scss b/dev/scss/base.scss
index da95c81..1ba3213 100644
--- a/dev/scss/base.scss
+++ b/dev/scss/base.scss
@@ -25,8 +25,8 @@
a {
&[href^="http://"]:after {
- font-family: "FontAwesome";
- content: " \f08e";
+ font-family: FontAwesome;
+ content: " " + $fa-extlink;
font-size: 75%;
}
&:link {
diff --git a/dev/scss/header.scss b/dev/scss/header.scss
index f3f995a..4189b6a 100644
--- a/dev/scss/header.scss
+++ b/dev/scss/header.scss
@@ -42,7 +42,7 @@
}
}
span.select::after {
- content: "\f0dd";
+ content: $fa-down;
}
form {
diff --git a/dev/scss/highlight.scss b/dev/scss/highlight.scss
new file mode 100644
index 0000000..1c3cb99
--- /dev/null
+++ b/dev/scss/highlight.scss
@@ -0,0 +1,121 @@
+/*
+ * Based on github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+ */
+.hljs {
+ display: block;
+ padding: 0.5em;
+}
+
+.hljs-comment,
+.hljs-template_comment,
+.diff .hljs-header,
+.hljs-javadoc {
+ color: #998;
+ font-style: italic
+}
+
+.hljs-keyword,
+.css .rule .hljs-keyword,
+.hljs-winutils,
+.javascript .hljs-title,
+.nginx .hljs-title,
+.hljs-subst,
+.hljs-request,
+.hljs-status {
+ color: #333;
+ font-weight: bold
+}
+
+.hljs-number,
+.hljs-hexcolor,
+.ruby .hljs-constant {
+ color: #099;
+}
+
+.hljs-string,
+.hljs-tag .hljs-value,
+.hljs-phpdoc,
+.tex .hljs-formula {
+ color: #d14
+}
+
+.hljs-title,
+.hljs-id,
+.coffeescript .hljs-params,
+.scss .hljs-preprocessor {
+ color: #900;
+ font-weight: bold
+}
+
+.javascript .hljs-title,
+.lisp .hljs-title,
+.clojure .hljs-title,
+.hljs-subst {
+ font-weight: normal
+}
+
+.hljs-class .hljs-title,
+.haskell .hljs-type,
+.vhdl .hljs-literal,
+.tex .hljs-command {
+ color: #458;
+ font-weight: bold
+}
+
+.hljs-tag,
+.hljs-tag .hljs-title,
+.hljs-rules .hljs-property,
+.django .hljs-tag .hljs-keyword {
+ color: #000080;
+ font-weight: normal
+}
+
+.hljs-attribute,
+.hljs-variable,
+.lisp .hljs-body {
+ color: #008080
+}
+
+.hljs-regexp {
+ color: #009926
+}
+
+.hljs-symbol,
+.ruby .hljs-symbol .hljs-string,
+.lisp .hljs-keyword,
+.tex .hljs-special,
+.hljs-prompt {
+ color: #990073
+}
+
+.hljs-built_in,
+.lisp .hljs-title,
+.clojure .hljs-built_in {
+ color: #0086b3
+}
+
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-pi,
+.hljs-doctype,
+.hljs-shebang,
+.hljs-cdata {
+ color: #999;
+ font-weight: bold
+}
+
+.hljs-deletion {
+ background: #fdd
+}
+
+.hljs-addition {
+ background: #dfd
+}
+
+.diff .hljs-change {
+ background: #0086b3
+}
+
+.hljs-chunk {
+ color: #aaa
+}
diff --git a/dev/scss/hint.scss b/dev/scss/hint.scss
index 470cd17..18000a1 100644
--- a/dev/scss/hint.scss
+++ b/dev/scss/hint.scss
@@ -4,10 +4,11 @@
$border-size: 2px;
ul.menu.hint {
+ display: inline-block;
+ white-space: normal;
text-align:left;
-// margin-left: -1 * $border-size;
+ top: 0;
max-width: 23em !important;
- min-width: 7em;
> li:first-of-type {
border-top: {
@@ -26,44 +27,35 @@
position: absolute;
left: 0;
top: 0;
+ z-index: 900;
white-space: pre-wrap;
- overflow: show;
height: 0;
+ display: block;
> span {
- display: block;
opacity: 0;
white-space: pre-wrap;
overflow: hidden;
}
// Todo: Besser nur, wenn im Focus
> div {
- cursor: pointer;
- transition: left 0.3s ease 0s;
position: absolute;
+ display: block;
+ cursor: pointer;
+ transition: left 0.2s ease 0s;
top: 0;
left: 0;
- text-align: center;
+ text-align: left;
padding: 0;
border-top: 5px solid $dark-orange;
-
height: 10px;
width: 1.2em;
-
- &:hover {
-/*
- border: {
- width: $border-size;
- style: solid;
- radius: $standard-border-radius;
- top: {
- left-radius: 0;
- right-radius: 0;
- width: 0px;
- }
- }
- @include choose-hover;
-*/
+ &:hover:not(.active) {
border-top: 10px solid $dark-orange;
}
+ &.active {
+ border-top-width: 0;
+ height: 0;
+ width: 23em;
+ }
}
}
\ No newline at end of file
diff --git a/dev/scss/kalamar.scss b/dev/scss/kalamar.scss
index 582fe9b..f09f0f0 100644
--- a/dev/scss/kalamar.scss
+++ b/dev/scss/kalamar.scss
@@ -17,5 +17,6 @@
@import "tutorial"; // Embedded and non-embedded tutorial
@import "query"; // View query
@import "sidebar"; // Navigation on the left side
+@import "highlight"; // Navigation on the left side
@import "media"; // Media queries
diff --git a/dev/scss/kwic.scss b/dev/scss/kwic.scss
index c55c00a..8108f98 100644
--- a/dev/scss/kwic.scss
+++ b/dev/scss/kwic.scss
@@ -167,11 +167,11 @@
}
&.close::after {
font-family: "FontAwesome";
- content: "\f00d";
+ content: $fa-close;
}
&.info::after {
font-family: "FontAwesome";
- content: "\f05a";
+ content: $fa-info;
}
}
}
diff --git a/dev/scss/matchinfo.scss b/dev/scss/matchinfo.scss
index 4341f23..0bcb50d 100644
--- a/dev/scss/matchinfo.scss
+++ b/dev/scss/matchinfo.scss
@@ -199,7 +199,7 @@
&::after {
font-family: 'FontAwesome';
- content: '\f00d';
+ content: $fa-close;
}
}
}
diff --git a/dev/scss/menu.scss b/dev/scss/menu.scss
index 5e2d084..a8e0306 100644
--- a/dev/scss/menu.scss
+++ b/dev/scss/menu.scss
@@ -107,7 +107,7 @@
&:not(.no-more):before {
position: absolute;
font-family: "FontAwesome";
- content: '\f0de';
+ content: $fa-up;
right: .5em;
top: .4em;
}
@@ -116,7 +116,7 @@
&:not(.no-more):before {
position: absolute;
font-family: "FontAwesome";
- content: '\f0dd';
+ content: $fa-down;
right: .5em;
bottom: .4em;
}
diff --git a/dev/scss/pagination.scss b/dev/scss/pagination.scss
index 0e099ac..fc3ff4a 100644
--- a/dev/scss/pagination.scss
+++ b/dev/scss/pagination.scss
@@ -62,7 +62,7 @@
}
&::after {
font-family: 'FontAwesome';
- content: '\f141';
+ content: $fa-elipsis;
}
}
@@ -88,7 +88,7 @@
}
&::after {
font-family: 'FontAwesome';
- content: '\f0d9';
+ content: $fa-previous;
}
}
@@ -104,7 +104,7 @@
}
&::after {
font-family: 'FontAwesome';
- content: '\f0da';
+ content: $fa-next;
}
}
&:link:hover span {
diff --git a/dev/scss/searchbar.scss b/dev/scss/searchbar.scss
index 098eacd..ac9927d 100644
--- a/dev/scss/searchbar.scss
+++ b/dev/scss/searchbar.scss
@@ -40,7 +40,7 @@
}
&::after {
font-family: "FontAwesome";
- content: "\f002";
+ content: $fa-search;
}
border: {
width: $border-size;
diff --git a/dev/scss/sidebar.scss b/dev/scss/sidebar.scss
index 5829600..a94c1d8 100644
--- a/dev/scss/sidebar.scss
+++ b/dev/scss/sidebar.scss
@@ -35,7 +35,8 @@
bottom: 0;
margin-right: -30px;
background-color: $dark-green;
- content: '#';
+ font-family: FontAwesome;
+ content: $fa-bars;
font-size: 16pt;
width: 16pt;
height: 17pt;
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index ee2eec5..b132519 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -148,3 +148,19 @@
-moz-appearance:none;
appearance:none;
}
+
+
+/**
+ * Font Awesome symbols
+ */
+$fa-bars: "\f0c9";
+$fa-extlink: "\f08e";
+$fa-up: "\f0d8";
+$fa-down: "\f0d7";
+$fa-close: "\f00d";
+$fa-info: "\f05a";
+$fa-elipsis: "\f141";
+$fa-previous: "\f0d9";
+$fa-next: "\f0da";
+$fa-search: "\f002";
+$fa-rewrite: "\f040"; // "\f14b"
\ No newline at end of file
diff --git a/dev/scss/vc.scss b/dev/scss/vc.scss
index 1ed7959..3a989ec 100644
--- a/dev/scss/vc.scss
+++ b/dev/scss/vc.scss
@@ -54,7 +54,7 @@
border-color: $dark-orange;
> .doc::before,
> .docGroup::before {
- content: "oder";
+ content: "or";
}
> .operators {
border-color: $dark-orange;
@@ -66,7 +66,7 @@
&[data-operation=and] {
> .doc::before,
> .docGroup::before {
- content: "und";
+ content: "and";
}
}
@@ -142,7 +142,7 @@
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
- content: "\f040"; // "\f14b";
+ content: $fa-rewrite;
text-decoration: underline;
}
span {