Make result buttons a button group and adopt styles
Change-Id: I703de5fcb5f7f19e84278a719a64c19c3bc016cc
diff --git a/Gruntfile.js b/Gruntfile.js
index b556928..d9efddf 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -128,7 +128,7 @@
'dev/scss/header/{header,hint,menu,searchbar,vc,datepicker}.scss',
'dev/scss/main/{alertify,intro,koralquery,highlight,kwic,logos,tagger,' +
'main,matchinfo,tree,pagination,query,'+
- 'resultinfo,sidebar,tutorial}.scss'
+ 'resultinfo,sidebar,tutorial,buttongroup}.scss'
],
tasks: ['sass'],
options: {
diff --git a/dev/js/src/buttongroup.js b/dev/js/src/buttongroup.js
index b33c13a..a1dac7b 100644
--- a/dev/js/src/buttongroup.js
+++ b/dev/js/src/buttongroup.js
@@ -31,11 +31,11 @@
*/
add : function (title, classes, cb) {
var b = this._element.addE('span');
- b.addT(title);
b.setAttribute('title',title);
if (classes !== undefined) {
b.classList.add.apply(b.classList, classes);
};
+ b.addE('span').addT(title);
var that = this;
b.addEventListener('click', function (e) {
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index b4621d0..76bbf82 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -15,6 +15,7 @@
'hint',
'vc',
'tutorial',
+ 'buttongroup',
'lib/domReady',
'vc/array',
'lib/alertify',
@@ -29,6 +30,7 @@
hintClass,
vcClass,
tutClass,
+ buttonGroupClass,
domReady,
vcArray,
alertifyClass,
@@ -181,29 +183,19 @@
};
var result = d.getElementById('resultinfo');
- var resultButton = null;
- var leftButton = null;
+ var resultButton;
if (result != null) {
- // Add right buttons
- resultButton = result.addE('div');
- resultButton.classList.add('result', 'button');
-
- leftButton = result.addE('div');
- leftButton.classList.add('result', 'button', 'left');
+ // Add result button group
+ resultButton = buttonGroupClass.create(['result']);
+ result.appendChild(resultButton.element());
};
// There is a koralQuery
if (KorAP.koralQuery !== undefined) {
- if (resultButton !== null) {
+ if (result !== null) {
var kq;
- var toggle = d.createElement('a');
- toggle.setAttribute('title', loc.SHOW_KQ)
- toggle.classList.add('show-kq', 'button');
- toggle.addE('span')
- .addT(loc.SHOW_KQ);
- resultButton.appendChild(toggle);
var showKQ = function () {
if (kq === undefined) {
@@ -228,11 +220,8 @@
};
};
- if (toggle !== undefined) {
-
- // Show koralquery
- toggle.addEventListener('click', showKQ);
- };
+ // Add KoralQuery button
+ resultButton.add(loc.SHOW_KQ, ['show-kq','button-icon'], showKQ);
};
if (KorAP.koralQuery["errors"]) {
@@ -263,41 +252,16 @@
if (i > 0) {
if (resultButton !== null) {
-
/**
* Toggle the alignment (left <=> right)
*/
- // querySelector('div.button.right');
-
- var toggle = d.createElement('a');
- toggle.setAttribute('title', loc.TOGGLE_ALIGN);
- // Todo: Reuse old alignment from query
- var cl = toggle.classList;
- cl.add('align', 'right', 'button');
- toggle.addEventListener(
- 'click',
- function (e) {
- var ol = d.querySelector('#search > ol');
- ol.toggleClass("align-left", "align-right");
- this.toggleClass("left", "right");
- });
- toggle.addE('span').addT(loc.TOGGLE_ALIGN);
- resultButton.appendChild(toggle);
- };
- // Not ready yet
- /*
- if (leftButton !== null) {
- var metaInfo = d.createElement('a');
- metaInfo.setAttribute('title', loc.SHOW_META)
-
- var cl = metaInfo.classList;
- cl.add('show-meta', 'button');
- metaInfo.appendChild(d.createElement('span'))
- .appendChild(d.createTextNode(loc.SHOW_META));
- leftButton.appendChild(metaInfo);
+ resultButton.add(loc.TOGGLE_ALIGN, ['align','right','button-icon'], function (e) {
+ var ol = d.querySelector('#search > ol');
+ ol.toggleClass("align-left", "align-right");
+ this.toggleClass("left", "right");
+ });
};
- */
};
/**
diff --git a/dev/js/src/match/info.js b/dev/js/src/match/info.js
index f30287b..628659f 100644
--- a/dev/js/src/match/info.js
+++ b/dev/js/src/match/info.js
@@ -1,6 +1,12 @@
/**
* Information about a match.
*/
+/*
+ * TODO:
+ * Create a "views" object, that is the parent of this
+ * class and supports a simple .add() method to add views
+ * to an element.
+ */
define([
'match/infolayer',
'match/table',
diff --git a/dev/js/src/match/treemenu.js b/dev/js/src/match/treemenu.js
index 6b8a76a..0010271 100644
--- a/dev/js/src/match/treemenu.js
+++ b/dev/js/src/match/treemenu.js
@@ -46,7 +46,7 @@
return this._info;
},
- // Attach menu to
+ // Attach menu to button
attachTo : function (e) {
// this._attached = e;
diff --git a/dev/scss/base.scss b/dev/scss/base.scss
index 0688319..6da7901 100644
--- a/dev/scss/base.scss
+++ b/dev/scss/base.scss
@@ -1,8 +1,6 @@
@charset "utf-8";
@import "util";
-$border-size: 2px;
-
/**
* Basic global CSS rules for Kalamar
*/
@@ -137,35 +135,3 @@
button + button {
right: 0;
}
-
-
-.button-group {
- > span {
- cursor: pointer;
- box-shadow: $choose-box-shadow;
- font-size: 9pt;
- line-height: 1.5em;
- padding: 0 4px;
- display: inline-block;
- @include choose-item;
- border-style: solid;
- border-width: $border-size 0;
- &:hover {
- @include choose-hover;
- }
- &:first-child {
- border: {
- left-width: $border-size;
- top-left-radius: $standard-border-radius;
- bottom-left-radius: $standard-border-radius;
- }
- }
- &:last-child {
- border: {
- right-width: $border-size;
- top-right-radius: $standard-border-radius;
- bottom-right-radius: $standard-border-radius;
- }
- }
- }
-}
\ No newline at end of file
diff --git a/dev/scss/main/buttongroup.scss b/dev/scss/main/buttongroup.scss
new file mode 100644
index 0000000..607f9e3
--- /dev/null
+++ b/dev/scss/main/buttongroup.scss
@@ -0,0 +1,42 @@
+@charset "utf-8";
+@import "../util";
+
+/*
+ * Define the base layout of horizontal button groups
+ */
+.button-group {
+ > span {
+ cursor: pointer;
+ box-shadow: $choose-box-shadow;
+ font-size: 9pt;
+ line-height: 1.5em;
+ padding: 0 4px;
+ display: inline-block;
+ @include choose-item;
+ border-style: solid;
+ border-width: $border-size 0;
+ &:hover {
+ @include choose-hover;
+ }
+ &:first-child {
+ border: {
+ left-width: $border-size;
+ top-left-radius: $standard-border-radius;
+ bottom-left-radius: $standard-border-radius;
+ }
+ }
+ &:last-child {
+ border: {
+ right-width: $border-size;
+ top-right-radius: $standard-border-radius;
+ bottom-right-radius: $standard-border-radius;
+ }
+ }
+ &.button-icon {
+ font-family: 'FontAwesome';
+ > span {
+ @include blind;
+ }
+ }
+ }
+}
diff --git a/dev/scss/main/kwic.scss b/dev/scss/main/kwic.scss
index 08a6103..63f143b 100644
--- a/dev/scss/main/kwic.scss
+++ b/dev/scss/main/kwic.scss
@@ -15,12 +15,11 @@
overflow-x: hidden;
overflow-y: visible;
width: auto;
- border: 1px solid black;
text-indent: 0;
list-style-type: none;
margin: 0;
padding: 0;
- border: 1px solid $kwic-border;
+ border: $result-border-size solid $kwic-border;
font-size: $font-size;
> li {
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index 3478a77..40ef483 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -1,16 +1,17 @@
-@import "highlight"; // JSON highlighting
-@import "kwic"; // Kwic view information
-@import "logos"; // Logo images
-@import "matchinfo"; // Match table
-@import "tree"; // Tree view
-@import "pagination"; // Pagination
-@import "query"; // View query
-@import "resultinfo"; // Information on results
-@import "tutorial"; // Embedded and non-embedded tutorial
-@import "koralquery"; // KoralQuery
-@import "tagger"; // Tagger
-@import "alertify";
-@import "intro"; // Intro page
+@import "highlight"; // JSON highlighting
+@import "kwic"; // Kwic view information
+@import "logos"; // Logo images
+@import "matchinfo"; // Match table
+@import "tree"; // Tree view
+@import "pagination"; // Pagination
+@import "query"; // View query
+@import "resultinfo"; // Information on results
+@import "tutorial"; // Embedded and non-embedded tutorial
+@import "koralquery"; // KoralQuery
+@import "tagger"; // Tagger
+@import "alertify"; // Styling alerts
+@import "intro"; // Intro page
+@import "buttongroup"; // Button groups
main {
margin: {
diff --git a/dev/scss/main/resultinfo.scss b/dev/scss/main/resultinfo.scss
index 5276f0a..0ad4fc1 100644
--- a/dev/scss/main/resultinfo.scss
+++ b/dev/scss/main/resultinfo.scss
@@ -16,73 +16,46 @@
margin: 0;
text-align: right;
}
+}
- div.result {
- vertical-align: bottom;
- display: inline-block;
+// Specify result button group layout
+.result.button-group {
+ vertical-align: bottom;
+ display: inline-block;
+ line-height: 1.3em;
+
+ > span {
line-height: 1.3em;
- > a {
- display: inline-block;
- cursor: pointer;
- position: relative;
- > span {
- @include blind;
- }
- box-shadow: $choose-box-shadow;
- @include standard-text-padding;
- // padding-top: 1pt;
- // padding-bottom: 3pt;
-
- @include choose-item;
- border: {
- top-width: $border-size;
- bottom-width: $border-size;
- top-style: solid;
- bottom-style: solid;
- }
- &:hover {
- @include choose-hover;
- }
+ border-width: $result-border-size 0;
+ &:first-child {
+ border-left-width: $result-border-size;
}
- > a:last-child {
- border: {
- top-right-radius: $standard-border-radius;
- bottom-right-radius: $standard-border-radius;
- right-width: $border-size;
- right-style: solid;
+ &:last-child {
+ border-right-width: $result-border-size;
}
- }
- > a:first-child {
- border: {
- top-left-radius: $standard-border-radius;
- bottom-left-radius: $standard-border-radius;
- left-width: $border-size;
- left-style: solid;
- }
- }
- > a::after {
- font-family: 'FontAwesome';
- }
- > a.align.left::after {
+ }
+
+ // Define icons for result buttons
+ .button-icon {
+ &.align.left::after {
content: $fa-left-align;
}
- > a.align.right::after {
+ &.align.right::after {
content: $fa-right-align;
}
- > a.show-kq::after {
+ &.show-kq::after {
content: $fa-code;
}
- > a.show-meta::after {
- content: $fa-metadata;
- }
}
}
+
#resultinfo.found {
position: relative;
// z-index: 20;
margin-bottom: 0px;
- div.result > a {
+
+ .button-group > span {
margin-bottom: 0;
border-bottom-width: 0;
box-shadow: none;
@@ -91,15 +64,20 @@
}
&:last-child {
border-bottom-right-radius: 0;
- }
+ }
}
+
+ /*
div.result.left {
position: absolute;
left: 0;
bottom: 0;
}
+ */
}
+
+
#total-results {
color: $total-results;
font-weight: bold;
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index d79f8ee..fcc4206 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -91,7 +91,8 @@
$item-padding: 3pt 6pt;
$button-width: 30px;
$base-padding: 8px;
-
+$border-size: 2px;
+$result-border-size: 1px;
$total-results: $light-green;
/**