stylesheet changes for graying corpus statstic and reload button(plus renaming)
Change-Id: I13394bd2fa8da48548a83142168b4448178ded6a
(cherry picked from commit 9586263a94a66446584d2ce2f2ad22f2fa677114)
diff --git a/dev/js/src/view/corpstatv.js b/dev/js/src/view/corpstatv.js
index a566287..ee65c03 100644
--- a/dev/js/src/view/corpstatv.js
+++ b/dev/js/src/view/corpstatv.js
@@ -133,29 +133,27 @@
* Disabling corpus statistic if in vc builder a different vc is choosen.
* After clicking at the reload-button the up-to-date corpus statistic is displayed.
*/
+
disableStat : function(){
var statt = this._show;
-
+
if(statt.getElementsByClassName('reloadStatB').length == 0){
- var reloadspan = document.createElement('span');
- reloadspan.classList.add('reloadStatB');
- reloadb = reloadspan.addE('span');
- reloadb.classList.add('refresh');
+ var reloadspan = document.createElement('div');
+ reloadspan.classList.add('reloadStatB');
+ reloadspan.classList.add('button-group');
+ reloadspan.classList.add('button-panel');
+ reloadb = reloadspan.addE('span');
+ reloadb.classList.add('refresh');
- var that = this;
+ var that = this;
+ reloadb.addEventListener("click", function (e){
+ statt.classList.remove('stdisabled');
+ that.panel.reloadCorpStat();
+ });
- reloadb.addEventListener("click", function (e){
- statt.classList.remove('stdisabled');
- that.panel.actions.element().querySelector(".statistic").classList.remove('stdisabled');
- that.panel.reloadCorpStat();
- });
-
-
+
statt.appendChild(reloadspan);
statt.classList.add('stdisabled');
- this.panel.actions.element().querySelector(".statistic").classList.add('stdisabled');
-
- console.log("Corpus statistic DISABLED");
}
},
diff --git a/dev/scss/header/statistics.scss b/dev/scss/header/statistics.scss
index a4d3f1e..3952e66 100644
--- a/dev/scss/header/statistics.scss
+++ b/dev/scss/header/statistics.scss
@@ -1,31 +1,65 @@
@charset "utf-8";
@import "../util";
+
+/*
+Corpus statistic
+Graying corpus statistic
+*/
div.stattable {
- display: flex;
- flex-direction: row;
+ display: flex;
+ flex-direction: row;
+}
+div.stattable {
+ > dl {
+ display: flex;
+ flex-flow: row wrap;
+ margin-top:4px;
+ margin-bottom:4px;
+ padding-bottom: 1px;
+ > div {
+ border-color: $dark-green;
+ > dt {
+ background-color: $middle-green;
+ width: 15em;
+ margin: 0;
+ &:after {
+ content: ":";
+ }
+ }
+ > dd {
+ background-color: $lightest-green;
+ color: $dark-grey;
+ }
+ }
+ }
+ &.stdisabled {
+ > dl
+ > div {
+ > dt {
+ @include vcinfo-inactive;
+ }
+ > dd {
+ @include vcinfo-inactive;
+ }
+ }
+ }
}
-div.stattable > dl {
- display: flex;
- flex-flow: row wrap;
- //margin-top: 4 * $border-size !important;
- margin-top:4px;
- margin-bottom:4px;
- padding-bottom: 1px;
- > div {
- border-color: $dark-green;
- > dt {
- background-color: $middle-green;
- width: 15em;
- margin: 0;
- &:after {
- content: ":";
- }
+
+/* Corpus statistic reload button */
+div.reloadStatB {
+ font-family: 'FontAwesome';
+ padding-left: 2px;
+ z-index: 30;
}
- > dd {
- background-color: $lightest-green;
- color: $dark-grey;
- }
- }
-}
+span.refresh::after{
+ line-height: normal;
+ content : $fa-redo;
+ font-size: 15pt;
+ }
+
+/* Close-button should always be seen next to or above reload-button */
+.button-view.vcstatistic {
+ z-index: 30;
+ }
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index bb82ca0..90e20b1 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -38,6 +38,7 @@
$middle-green: lighten($ids-green-1, 9%);
$light-green: lighten($ids-green-1, 13%); // #7ba400;
$lightest-green: #d8e38c; // lighten($ids-green-1, 26%);
+$grey-green: #bcc387;
/**
* Blue Colors
@@ -50,10 +51,10 @@
* Grey Colors
*/
$middle-grey: $ids-grey-1; // #999;
+$semilight-grey: #8d8d8d;
$light-grey: $ids-grey-2; // #ddd;
$dark-grey: darken($middle-grey, 15%);
$nearly-white: #fefefe;
-
/**
* Red Colors (no IDS relation)
*/
@@ -234,7 +235,15 @@
appearance:none;
}
-
+/**
+* Mixin for the appearance of inactive elements in the vcinfo panel
+*/
+@mixin vcinfo-inactive{
+ background-color: $grey-green;
+ color: $semilight-grey;
+ border-color: $semilight-grey;
+ text-shadow: none;
+}
/**
* Font Awesome symbol table
*/
@@ -267,4 +276,5 @@
$fa-to-query: "\f102";
$fa-cut: "\f0c4";
$fa-plugin: "\f1e6";
-$fa-referto: "\f0c5";
\ No newline at end of file
+$fa-referto: "\f0c5";
+$fa-redo: "\f01e";