Commit 52920522 authored by Curtis Adam's avatar Curtis Adam

Add a global hover and focus color for buttons

parent 13149ce7
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -53,7 +53,7 @@ export let CardEditor = class CardEditor {
return learningGoalLevelGroupName;
}
static setLearningGoalLevel (forward = true) {
static setLearningGoalLevelIndex (forward = true) {
let navigationLength = $('#learningGoalLevelGroup:first button').length;
let index = ($(".active").index("#learningGoalLevelGroup:first button")) + 1;
if (forward) {
......@@ -70,7 +70,12 @@ export let CardEditor = class CardEditor {
}
}
--index;
this.setLearningGoalLevel(index);
}
static setLearningGoalLevel (index) {
$("#learningGoalLevel" + index).click();
$("#learningGoalLevel" + index).focus();
}
static setEditorButtonIndex (index) {
......
......@@ -33,8 +33,8 @@ export let CardNavigation = class CardNavigation {
}
static setActiveNavigationButton (index) {
$('.cardNavigation a').removeClass('btn-primary').removeClass('card-navigation-active').addClass('btn-default');
$(".cardNavigation > li:nth-child(" + index + ") a").removeClass('btn-default').addClass('btn-primary').addClass('card-navigation-active');
$('.cardNavigation a').removeClass('card-navigation-active').addClass('switchCardSide');
$(".cardNavigation > li:nth-child(" + index + ") a").removeClass('switchCardSide').addClass('card-navigation-active');
}
static filterNavigation (cubeSides, mode = undefined) {
......@@ -357,7 +357,7 @@ export let CardNavigation = class CardNavigation {
break;
case 37:
if (Route.isEditMode() && !CardVisuals.isFullscreen()) {
CardEditor.setLearningGoalLevel(false);
CardEditor.setLearningGoalLevelIndex(false);
} else {
if (CardNavigation.isVisible()) {
if ($('#leftCarouselControl').click()) {
......@@ -376,7 +376,7 @@ export let CardNavigation = class CardNavigation {
break;
case 39:
if (Route.isEditMode() && !CardVisuals.isFullscreen()) {
CardEditor.setLearningGoalLevel();
CardEditor.setLearningGoalLevelIndex();
} else {
if (CardNavigation.isVisible()) {
if ($('#rightCarouselControl').click()) {
......
......@@ -20,6 +20,8 @@ Template.learningGoalLevel.helpers({
Template.learningGoalLevel.events({
'click #learningGoalLevelGroup': function (event) {
CardEditor.setEditorButtonIndex(1);
Session.set('learningGoalLevel', Number($(event.target).data('lvl')));
let index = Number($(event.target).data('lvl'));
Session.set('learningGoalLevel', index);
$("#learningGoalLevel" + index).focus();
}
});
......@@ -40,8 +40,7 @@
<template name="cardNavigationItem">
<li>
<a class="btn {{#if isFirstButton
this.index}}btn-primary card-navigation-active{{else}}btn-default{{/if}} btn-raised switchCardSide"
<a class="btn {{#if isFirstButton this.index}}card-navigation-active{{else}}switchCardSide{{/if}} btn-raised"
type="button"
data-content-id="{{this.contentId}}"
data-navigation-id="{{this.index}}" data-side="{{this.side}}"
......
......@@ -37,7 +37,7 @@
box-shadow: none !important;
}
.cardNavigation .btn-primary {
.cardNavigation .card-navigation-active {
cursor: default;
}
......
<template name="cardSidebarItemArsnovaApp">
{{#unless isIOSSafari}}
<img class="hidden-xs showArsnovaApp card-button cardHeaderItem"
<img class="hidden-xs showArsnovaApp card-button btn cardHeaderItem"
data-type="cardNavigation"
src="/img/button/arsnova_app.png"
src="/img/button/arsnova_app_v2.png"
title="{{_ "card.tooltip.arsnovaApp"}}">
{{/unless}}
</template>
......
......@@ -32,7 +32,7 @@ Template.cardSidebarItemArsnovaApp.onDestroyed(function () {
Template.arsnovaAppModal.onRendered(function () {
$('#arsnovaAppModal').on('hidden.bs.modal', function () {
$('.showArsnovaApp').attr('src', '/img/button/arsnova_app.png');
$('.showArsnovaApp').attr('src', '/img/button/arsnova_app_v2.png');
$('.showArsnovaApp').removeClass('pressed');
});
$('#arsnovaAppModal').on('shown.bs.modal', function () {
......
<template name="cardSidebarItemArsnovaClick">
{{#unless isIOSSafari}}
<img class="hidden-xs showArsnovaClick card-button cardHeaderItem"
<img class="hidden-xs showArsnovaClick card-button btn cardHeaderItem"
data-type="cardNavigation"
src="/img/button/arsnova_click.png"
src="/img/button/arsnova_click_v2.png"
title="{{_ "card.tooltip.arsnovaClick"}}">
{{/unless}}
</template>
......
......@@ -32,7 +32,7 @@ Template.cardSidebarItemArsnovaClick.onDestroyed(function () {
Template.arsnovaClickModal.onRendered(function () {
$('#arsnovaClickModal').on('hidden.bs.modal', function () {
$('.showArsnovaClick').attr('src', '/img/button/arsnova_click.png');
$('.showArsnovaClick').attr('src', '/img/button/arsnova_click_v2.png');
$('.showArsnovaClick').removeClass('pressed');
});
$('#arsnovaClickModal').on('shown.bs.modal', function () {
......
<template name="cardSidebarItemCardList">
{{#if gotMultipleCards}}
<i class="card-button cardHeaderItem fa fa-list selectCard" data-id="{{this._id}}"
<i class="card-button cardHeaderItem btn fa fa-list selectCard" data-id="{{this._id}}"
title="{{_ "card.tooltip.showIndex"}}"></i>
{{/if}}
</template>
......@@ -2,7 +2,7 @@
{{#if gotDictionary}}
{{#if gotRequiredWordCount this}}
{{#unless isMobilePreview}}
<img class="hidden-xs showBeolingusTranslation card-button cardHeaderItem {{#if
<img class="hidden-xs showBeolingusTranslation card-button btn cardHeaderItem {{#if
isBeolingusActive}}pressed{{/if}}"
data-type="cardNavigation"
data-toggle="collapse"
......@@ -10,7 +10,7 @@
src="/img/beolingus.png" title="{{_ "card.tooltip.dictionaryBeolingus"}}">
{{/unless}}
<span class="{{#unless
isMobilePreview}}visible-xs-inline-block{{/unless}} card-button cardHeaderItem fa showBeolingusTranslation {{#if
isMobilePreview}}visible-xs-inline-block{{/unless}} card-button cardHeaderItem btn fa showBeolingusTranslation {{#if
isBeolingusActive}}pressed{{/if}}" data-id="{{this._id}}"
title="{{_ "card.tooltip.dictionaryBeolingus"}}"><strong>B</strong>
</span>
......@@ -22,7 +22,7 @@
{{#if gotDictionary}}
{{#if gotRequiredWordCount this}}
{{#unless isMobilePreview}}
<img class="hidden-xs showDeepLTranslation card-button cardHeaderItem {{#if
<img class="hidden-xs showDeepLTranslation card-button btn cardHeaderItem {{#if
isDeepLActive}}pressed{{/if}}"
data-type="cardNavigation"
data-toggle="collapse"
......@@ -30,7 +30,7 @@
src="/img/deepl.png" title="{{_ "card.tooltip.dictionaryDeepL"}}">
{{/unless}}
<span class="{{#unless
isMobilePreview}}visible-xs-inline-block{{/unless}} card-button cardHeaderItem fa showDeepLTranslation {{#if
isMobilePreview}}visible-xs-inline-block{{/unless}} card-button btn cardHeaderItem fa showDeepLTranslation {{#if
isDeepLActive}}pressed{{/if}}" data-id="{{this._id}}"
title="{{_ "card.tooltip.dictionaryDeepL"}}"><strong>D</strong>
</span>
......
<template name="cardSidebarItemHelp">
<i class="card-button cardHeaderItem fa fa-question showModalHelp {{#if modalActive}}pressed{{/if}}" title="{{_ "card.tooltip.showHelp"}}"></i>
<i class="card-button cardHeaderItem btn fa fa-question showModalHelp {{#if modalActive}}pressed{{/if}}" title="{{_ "card.tooltip.showHelp"}}"></i>
</template>
<template name="cardSidebarItemPomodoroButton">
<img class="card-button cardHeaderItem showPomodoroButton {{#if pomodoroActive}}pressed{{/if}}"
<img class="card-button cardHeaderItem btn showPomodoroButton {{#if pomodoroActive}}pressed{{/if}}"
data-type="cardNavigation"
title="{{_ "card.tooltip.pomodoro"}}" src="/img/pomodoro/pomodoro.svg"/>
</template>
<template name="cardSidebarItemSwapQuestionAnswer">
{{#if gotCardTypesWithSwapAnswerQuestionButton}}
<i class="card-button cardHeaderItem fa swapQuestionAnswer fa fa-exchange {{#if
<i class="card-button cardHeaderItem fa swapQuestionAnswer btn fa fa-exchange {{#if
questionAnswerSwapped}}pressed{{/if}}"
data-type="cardNavigation"
title="{{getTooltip}}"></i>
......
<template name="cardSidebarItemZoomText">
<span class="zoomText zoomTextButton fa fa-search-plus card-button cardHeaderItem {{getButtonColor}}"
<span class="zoomText zoomTextButton btn fa fa-search-plus card-button cardHeaderItem {{getButtonColor}}"
data-type="cardNavigation"
title="{{_ "card.tooltip.zoomText"}}"></span>
......
<template name="cardsetNavigationEditCardset">
{{#if isCardsetOwner _id}}
<div class="hidden-xs btn-group">
<button id="editCardset" class="btn btn-sm btn-raised eidtCardsetBtn"
<button id="editCardset" class="btn btn-sm btn-raised editCardsetBtn"
data-toggle="modal"
data-target="#setCardsetFormModal" {{disableIfOffline}}>
<i class="fa fa-pencil"></i> {{_ "modal-dialog.editcard"}}
......
......@@ -8,10 +8,10 @@
</div>
<div class="panel-body">
<ul class="nav nav-pills justify-content-center nav-fill">
<li class="active"><a data-toggle="tab" href="#payment">{{_ "billing.payment.header"}}</a></li>
<li><a data-toggle="tab" href="#balance">{{_ "billing.balance.header"}}</a></li>
<li><a data-toggle="tab" href="#revenue">{{_ "billing.revenue.header"}}</a></li>
<li><a data-toggle="tab" href="#purchases">{{_ "billing.purchases.header"}}</a></li>
<li class="active"><a class="btn" data-toggle="tab" href="#payment">{{_ "billing.payment.header"}}</a></li>
<li><a class="btn" data-toggle="tab" href="#balance">{{_ "billing.balance.header"}}</a></li>
<li><a class="btn" data-toggle="tab" href="#revenue">{{_ "billing.revenue.header"}}</a></li>
<li><a class="btn" data-toggle="tab" href="#purchases">{{_ "billing.purchases.header"}}</a></li>
</ul>
<div class="tab-content">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment