From 4f9d3d8be56f32837cab9de0cce523c285cc6f9a Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Mon, 26 Apr 2021 18:48:27 +0200 Subject: [PATCH 01/15] List infinite scroll now always works - before sometimes list scrolling stopped even the spinner was visible and scrolling was at the end of the list --- client/components/lists/listBody.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/client/components/lists/listBody.js b/client/components/lists/listBody.js index 65eff9ed5..b34d792a2 100644 --- a/client/components/lists/listBody.js +++ b/client/components/lists/listBody.js @@ -770,16 +770,21 @@ BlazeComponent.extendComponent({ }, spinnerInView() { - const parentViewHeight = this.container.clientHeight; - const bottomViewPosition = this.container.scrollTop + parentViewHeight; - - const threshold = this.spinner.offsetTop; - // spinner deleted if (!this.spinner.offsetTop) { return false; } - return bottomViewPosition > threshold; + const parentViewHeight = this.container.clientHeight; + const bottomViewPosition = this.container.scrollTop + parentViewHeight; + + let spinnerOffsetTop = this.spinner.offsetTop; + + const addCard = $(this.container).find("a.open-minicard-composer").first()[0]; + if (addCard !== undefined) { + spinnerOffsetTop -= addCard.clientHeight; + } + + return bottomViewPosition > spinnerOffsetTop; }, }).register('spinnerList'); From 06a2b087807a49b775c6bd7bd81b251bd3d50b89 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Mon, 7 Jun 2021 22:35:56 +0200 Subject: [PATCH 02/15] Spinner configureable in the source code --- client/components/lists/listBody.jade | 10 ++--- client/components/main/spinner.jade | 5 +++ client/components/main/spinner.js | 17 +++++++ client/components/main/spinner.tpl.jade | 6 --- client/components/main/spinner_bounce.jade | 8 ++++ client/components/main/spinner_bounce.styl | 44 +++++++++++++++++++ client/components/main/spinner_wave.jade | 10 +++++ .../main/{spinner.styl => spinner_wave.styl} | 18 +------- 8 files changed, 89 insertions(+), 29 deletions(-) create mode 100644 client/components/main/spinner.jade create mode 100644 client/components/main/spinner.js delete mode 100644 client/components/main/spinner.tpl.jade create mode 100644 client/components/main/spinner_bounce.jade create mode 100644 client/components/main/spinner_bounce.styl create mode 100644 client/components/main/spinner_wave.jade rename client/components/main/{spinner.styl => spinner_wave.styl} (61%) diff --git a/client/components/lists/listBody.jade b/client/components/lists/listBody.jade index ce671cdef..f3aa47048 100644 --- a/client/components/lists/listBody.jade +++ b/client/components/lists/listBody.jade @@ -23,14 +23,10 @@ template(name="listBody") i.fa.fa-plus template(name="spinnerList") - .sk-spinner.sk-spinner-wave.sk-spinner-list( - class=currentBoard.colorClass + .sk-spinner.sk-spinner-list( + class="{{currentBoard.colorClass}} sk-spinner-{{Spinner.spinnerName}}" id="showMoreResults") - .sk-rect1 - .sk-rect2 - .sk-rect3 - .sk-rect4 - .sk-rect5 + +spinnerRaw template(name="addCardForm") .minicard.minicard-composer.js-composer diff --git a/client/components/main/spinner.jade b/client/components/main/spinner.jade new file mode 100644 index 000000000..1c6a7aad2 --- /dev/null +++ b/client/components/main/spinner.jade @@ -0,0 +1,5 @@ +template(name="spinner") + +Template.dynamic(template=Spinner.getSpinnerTemplate) + +template(name="spinnerRaw") + +Template.dynamic(template=Spinner.getSpinnerTemplateRaw) diff --git a/client/components/main/spinner.js b/client/components/main/spinner.js new file mode 100644 index 000000000..8f9d4358f --- /dev/null +++ b/client/components/main/spinner.js @@ -0,0 +1,17 @@ +function getSpinnerName() { + return 'Bounce' +} + +Spinner = { + getSpinnerTemplate() { + return 'spinner' + getSpinnerName() + }, + + getSpinnerTemplateRaw() { + return 'spinner' + getSpinnerName() + 'Raw'; + }, + + spinnerName: getSpinnerName().toLowerCase(), +} + +Blaze.registerHelper('Spinner', Spinner); diff --git a/client/components/main/spinner.tpl.jade b/client/components/main/spinner.tpl.jade deleted file mode 100644 index 9310a6e5b..000000000 --- a/client/components/main/spinner.tpl.jade +++ /dev/null @@ -1,6 +0,0 @@ -.sk-spinner.sk-spinner-wave(class=currentBoard.colorClass) - .sk-rect1 - .sk-rect2 - .sk-rect3 - .sk-rect4 - .sk-rect5 diff --git a/client/components/main/spinner_bounce.jade b/client/components/main/spinner_bounce.jade new file mode 100644 index 000000000..83bc4509c --- /dev/null +++ b/client/components/main/spinner_bounce.jade @@ -0,0 +1,8 @@ +template(name="spinnerBounce") + .sk-spinner.sk-spinner-bounce(class=currentBoard.colorClass) + +spinnerBounceRaw + +template(name="spinnerBounceRaw") + .sk-bounce1 + .sk-bounce2 + .sk-bounce3 diff --git a/client/components/main/spinner_bounce.styl b/client/components/main/spinner_bounce.styl new file mode 100644 index 000000000..7d9ab0248 --- /dev/null +++ b/client/components/main/spinner_bounce.styl @@ -0,0 +1,44 @@ +@import 'nib' + +// From https://github.com/tobiasahlin/SpinKit +.sk-spinner-bounce { + margin: 100px auto 0; + width: 70px; + text-align: center; + + div { + width: 18px; + height: 18px; + background-color: #333; + + border-radius: 100%; + display: inline-block; + -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; + animation: sk-bouncedelay 1.4s infinite ease-in-out both; + } + + .sk-bounce1 { + -webkit-animation-delay: -0.32s; + animation-delay: -0.32s; + } + + .sk-bounce2 { + -webkit-animation-delay: -0.16s; + animation-delay: -0.16s; + } +} + +@-webkit-keyframes sk-bouncedelay { + 0%, 80%, 100% { -webkit-transform: scale(0) } + 40% { -webkit-transform: scale(1.0) } +} + +@keyframes sk-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); + } 40% { + -webkit-transform: scale(1.0); + transform: scale(1.0); + } +} diff --git a/client/components/main/spinner_wave.jade b/client/components/main/spinner_wave.jade new file mode 100644 index 000000000..1528bb42f --- /dev/null +++ b/client/components/main/spinner_wave.jade @@ -0,0 +1,10 @@ +template(name="spinnerWave") + .sk-spinner.sk-spinner-wave(class=currentBoard.colorClass) + +spinnerWaveRaw + +template(name="spinnerWaveRaw") + .sk-rect1 + .sk-rect2 + .sk-rect3 + .sk-rect4 + .sk-rect5 diff --git a/client/components/main/spinner.styl b/client/components/main/spinner_wave.styl similarity index 61% rename from client/components/main/spinner.styl rename to client/components/main/spinner_wave.styl index 65c5fe62e..a82d39496 100644 --- a/client/components/main/spinner.styl +++ b/client/components/main/spinner_wave.styl @@ -1,21 +1,7 @@ @import 'nib' -/* - * From https://github.com/tobiasahlin/SpinKit - * - * Usage: - * - * - * - */ - -.sk-spinner { +// From https://github.com/tobiasahlin/SpinKit +.sk-spinner-wave { width: 50px; height: 50px; margin: auto; From 849deae11ea9c597ace4f1b36e93acbf957327dd Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Tue, 8 Jun 2021 19:41:17 +0200 Subject: [PATCH 03/15] Spinners needs   - it's not formatted by Meteor well, \n is missing in the generated Javascript code, so i insert   in the template --- client/components/main/spinner_bounce.jade | 3 +++ client/components/main/spinner_wave.jade | 5 +++++ 2 files changed, 8 insertions(+) diff --git a/client/components/main/spinner_bounce.jade b/client/components/main/spinner_bounce.jade index 83bc4509c..5eda2295a 100644 --- a/client/components/main/spinner_bounce.jade +++ b/client/components/main/spinner_bounce.jade @@ -4,5 +4,8 @@ template(name="spinnerBounce") template(name="spinnerBounceRaw") .sk-bounce1 + |   .sk-bounce2 + |   .sk-bounce3 + |   diff --git a/client/components/main/spinner_wave.jade b/client/components/main/spinner_wave.jade index 1528bb42f..fe5a26b0d 100644 --- a/client/components/main/spinner_wave.jade +++ b/client/components/main/spinner_wave.jade @@ -4,7 +4,12 @@ template(name="spinnerWave") template(name="spinnerWaveRaw") .sk-rect1 + |   .sk-rect2 + |   .sk-rect3 + |   .sk-rect4 + |   .sk-rect5 + |   From 7519abf3fe8735691d44e199301368c4d085c7ae Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Tue, 8 Jun 2021 19:47:14 +0200 Subject: [PATCH 04/15] Spinner now configureable in the Settings --- client/components/lists/listBody.jade | 2 +- client/components/main/spinner.js | 32 +++++++++++++++++---- client/components/settings/settingBody.jade | 11 +++++++ client/components/settings/settingBody.js | 12 ++++++++ models/settings.js | 4 +++ server/publications/settings.js | 1 + 6 files changed, 55 insertions(+), 7 deletions(-) diff --git a/client/components/lists/listBody.jade b/client/components/lists/listBody.jade index f3aa47048..2d332f603 100644 --- a/client/components/lists/listBody.jade +++ b/client/components/lists/listBody.jade @@ -24,7 +24,7 @@ template(name="listBody") template(name="spinnerList") .sk-spinner.sk-spinner-list( - class="{{currentBoard.colorClass}} sk-spinner-{{Spinner.spinnerName}}" + class="{{currentBoard.colorClass}} sk-spinner-{{Spinner.getSpinnerNameLC}}" id="showMoreResults") +spinnerRaw diff --git a/client/components/main/spinner.js b/client/components/main/spinner.js index 8f9d4358f..238e59507 100644 --- a/client/components/main/spinner.js +++ b/client/components/main/spinner.js @@ -1,17 +1,37 @@ -function getSpinnerName() { - return 'Bounce' -} +import Settings from '/models/settings'; Spinner = { getSpinnerTemplate() { - return 'spinner' + getSpinnerName() + return 'spinner' + this.getSpinnerName(); }, getSpinnerTemplateRaw() { - return 'spinner' + getSpinnerName() + 'Raw'; + return 'spinner' + this.getSpinnerName() + 'Raw'; }, - spinnerName: getSpinnerName().toLowerCase(), + currentSetting: new ReactiveVar(), + + currentSettings() { + return this.currentSetting.get(); + }, + + getSpinnerName() { + let ret = 'Bounce'; + if (this.currentSettings()) { + ret = this.currentSettings().spinnerName; + } + return ret; + }, + + getSpinnerNameLC() { + return this.getSpinnerName().toLowerCase(); + }, } Blaze.registerHelper('Spinner', Spinner); + +Meteor.subscribe('setting', { + onReady() { + Spinner.currentSetting.set(Settings.findOne()); + }, +}); diff --git a/client/components/settings/settingBody.jade b/client/components/settings/settingBody.jade index f8cfc3a59..342c239a0 100644 --- a/client/components/settings/settingBody.jade +++ b/client/components/settings/settingBody.jade @@ -173,6 +173,9 @@ template(name='layoutSettings') li.layout-form .title {{_ 'default-authentication-method'}} +selectAuthenticationMethod(authenticationMethod=currentSetting.defaultAuthenticationMethod) + li.layout-form + .title {{_ 'spinner-names'}} + +selectSpinnerName(spinnerName=currentSetting.spinnerName) li.layout-form .title {{_ 'custom-product-name'}} .form-group @@ -222,3 +225,11 @@ template(name='selectAuthenticationMethod') option(value="{{value}}" selected) {{_ value}} else option(value="{{value}}") {{_ value}} + +template(name='selectSpinnerName') + select#spinnerName + each spinner in spinners + if isSelected spinner + option(value="{{spinner}}" selected) {{spinner}} + else + option(value="{{spinner}}") {{spinner}} diff --git a/client/components/settings/settingBody.js b/client/components/settings/settingBody.js index 596b40613..2ed1a1b78 100644 --- a/client/components/settings/settingBody.js +++ b/client/components/settings/settingBody.js @@ -199,6 +199,8 @@ BlazeComponent.extendComponent({ $('input[name=displayAuthenticationMethod]:checked').val() === 'true'; const defaultAuthenticationMethod = $('#defaultAuthenticationMethod').val(); + const spinnerName = $('#spinnerName').val(); + try { Settings.update(Settings.findOne()._id, { $set: { @@ -213,6 +215,7 @@ BlazeComponent.extendComponent({ displayAuthenticationMethod, defaultAuthenticationMethod, automaticLinkedUrlSchemes, + spinnerName, }, }); } catch (e) { @@ -384,3 +387,12 @@ Template.selectAuthenticationMethod.helpers({ return Template.instance().data.authenticationMethod === match; }, }); + +Template.selectSpinnerName.helpers({ + spinners() { + return ['Bounce', 'Wave'] + }, + isSelected(match) { + return Template.instance().data.spinnerName === match; + }, +}); diff --git a/models/settings.js b/models/settings.js index db69644fb..286ef29f9 100644 --- a/models/settings.js +++ b/models/settings.js @@ -46,6 +46,10 @@ Settings.attachSchema( type: String, optional: false, }, + spinnerName: { + type: String, + optional: true, + }, hideLogo: { type: Boolean, optional: true, diff --git a/server/publications/settings.js b/server/publications/settings.js index 829824dba..84234e31b 100644 --- a/server/publications/settings.js +++ b/server/publications/settings.js @@ -23,6 +23,7 @@ Meteor.publish('setting', () => { customHTMLbeforeBodyEnd: 1, displayAuthenticationMethod: 1, defaultAuthenticationMethod: 1, + spinnerName: 1, }, }, ); From 43ac328e8ada567bd0ea0b930065b62e7d6a66d2 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Tue, 8 Jun 2021 21:31:12 +0200 Subject: [PATCH 05/15] Spinner config is now reactive - changed at boards as soon as changed in the settings --- client/components/lists/listBody.jade | 2 +- client/components/lists/listBody.js | 50 ++++++++++++++++----------- client/components/main/spinner.jade | 4 +-- client/components/main/spinner.js | 46 +++++++++++------------- 4 files changed, 52 insertions(+), 50 deletions(-) diff --git a/client/components/lists/listBody.jade b/client/components/lists/listBody.jade index 2d332f603..b286347a9 100644 --- a/client/components/lists/listBody.jade +++ b/client/components/lists/listBody.jade @@ -24,7 +24,7 @@ template(name="listBody") template(name="spinnerList") .sk-spinner.sk-spinner-list( - class="{{currentBoard.colorClass}} sk-spinner-{{Spinner.getSpinnerNameLC}}" + class="{{currentBoard.colorClass}} {{getSkSpinnerName}}" id="showMoreResults") +spinnerRaw diff --git a/client/components/lists/listBody.js b/client/components/lists/listBody.js index b34d792a2..a77c47756 100644 --- a/client/components/lists/listBody.js +++ b/client/components/lists/listBody.js @@ -1,3 +1,5 @@ +import { Spinner } from '/client/components/main/spinner'; + const subManager = new SubsManager(); const InfiniteScrollIter = 10; @@ -696,7 +698,7 @@ BlazeComponent.extendComponent({ }, }).register('searchElementPopup'); -BlazeComponent.extendComponent({ +(class extends Spinner { onCreated() { this.cardlimit = this.parentComponent().cardlimit; @@ -724,7 +726,7 @@ BlazeComponent.extendComponent({ .parentComponent() .data()._id; } - }, + } onRendered() { this.spinner = this.find('.sk-spinner-list'); @@ -739,35 +741,37 @@ BlazeComponent.extendComponent({ ); this.updateList(); - }, + } onDestroyed() { $(this.container).off(`scroll.spinner_${this.swimlaneId}_${this.listId}`); $(window).off(`resize.spinner_${this.swimlaneId}_${this.listId}`); - }, + } + + checkIdleTime() { + return window.requestIdleCallback || + function(handler) { + const startTime = Date.now(); + return setTimeout(function() { + handler({ + didTimeout: false, + timeRemaining() { + return Math.max(0, 50.0 - (Date.now() - startTime)); + }, + }); + }, 1); + }; + } updateList() { // Use fallback when requestIdleCallback is not available on iOS and Safari // https://www.afasterweb.com/2017/11/20/utilizing-idle-moments/ - checkIdleTime = - window.requestIdleCallback || - function(handler) { - const startTime = Date.now(); - return setTimeout(function() { - handler({ - didTimeout: false, - timeRemaining() { - return Math.max(0, 50.0 - (Date.now() - startTime)); - }, - }); - }, 1); - }; if (this.spinnerInView()) { this.cardlimit.set(this.cardlimit.get() + InfiniteScrollIter); - checkIdleTime(() => this.updateList()); + this.checkIdleTime(() => this.updateList()); } - }, + } spinnerInView() { // spinner deleted @@ -786,5 +790,9 @@ BlazeComponent.extendComponent({ } return bottomViewPosition > spinnerOffsetTop; - }, -}).register('spinnerList'); + } + + getSkSpinnerName() { + return "sk-spinner-" + super.getSpinnerName().toLowerCase(); + } +}.register('spinnerList')); diff --git a/client/components/main/spinner.jade b/client/components/main/spinner.jade index 1c6a7aad2..1b4d6dad0 100644 --- a/client/components/main/spinner.jade +++ b/client/components/main/spinner.jade @@ -1,5 +1,5 @@ template(name="spinner") - +Template.dynamic(template=Spinner.getSpinnerTemplate) + +Template.dynamic(template=getSpinnerTemplate) template(name="spinnerRaw") - +Template.dynamic(template=Spinner.getSpinnerTemplateRaw) + +Template.dynamic(template=getSpinnerTemplateRaw) diff --git a/client/components/main/spinner.js b/client/components/main/spinner.js index 238e59507..d93609d02 100644 --- a/client/components/main/spinner.js +++ b/client/components/main/spinner.js @@ -1,37 +1,31 @@ -import Settings from '/models/settings'; - -Spinner = { - getSpinnerTemplate() { - return 'spinner' + this.getSpinnerName(); - }, - - getSpinnerTemplateRaw() { - return 'spinner' + this.getSpinnerName() + 'Raw'; - }, - - currentSetting: new ReactiveVar(), +Meteor.subscribe('setting'); +export class Spinner extends BlazeComponent { currentSettings() { - return this.currentSetting.get(); - }, + return Settings.findOne(); + } getSpinnerName() { let ret = 'Bounce'; - if (this.currentSettings()) { - ret = this.currentSettings().spinnerName; + let settings = this.currentSettings(); + + if (settings && settings.spinnerName) { + ret = settings.spinnerName; } return ret; - }, + } - getSpinnerNameLC() { - return this.getSpinnerName().toLowerCase(); - }, + getSpinnerTemplate() { + return 'spinner' + this.getSpinnerName(); + } } -Blaze.registerHelper('Spinner', Spinner); +(class extends Spinner { +}.register('spinner')); -Meteor.subscribe('setting', { - onReady() { - Spinner.currentSetting.set(Settings.findOne()); - }, -}); +(class extends Spinner { + getSpinnerTemplateRaw() { + let ret = super.getSpinnerTemplate() + 'Raw'; + return ret; + } +}.register('spinnerRaw')); From 1d66058240167e443d1b19d48b4a867b4efc7ca6 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Wed, 9 Jun 2021 19:18:44 +0200 Subject: [PATCH 06/15] Spinner class in own .js library file --- client/components/lists/listBody.js | 2 +- client/components/main/spinner.js | 22 +--------------------- client/lib/spinner.js | 21 +++++++++++++++++++++ 3 files changed, 23 insertions(+), 22 deletions(-) create mode 100644 client/lib/spinner.js diff --git a/client/components/lists/listBody.js b/client/components/lists/listBody.js index a77c47756..6073f3900 100644 --- a/client/components/lists/listBody.js +++ b/client/components/lists/listBody.js @@ -1,4 +1,4 @@ -import { Spinner } from '/client/components/main/spinner'; +import { Spinner } from '/client/lib/spinner'; const subManager = new SubsManager(); const InfiniteScrollIter = 10; diff --git a/client/components/main/spinner.js b/client/components/main/spinner.js index d93609d02..2d7ab35f7 100644 --- a/client/components/main/spinner.js +++ b/client/components/main/spinner.js @@ -1,24 +1,4 @@ -Meteor.subscribe('setting'); - -export class Spinner extends BlazeComponent { - currentSettings() { - return Settings.findOne(); - } - - getSpinnerName() { - let ret = 'Bounce'; - let settings = this.currentSettings(); - - if (settings && settings.spinnerName) { - ret = settings.spinnerName; - } - return ret; - } - - getSpinnerTemplate() { - return 'spinner' + this.getSpinnerName(); - } -} +import { Spinner } from '/client/lib/spinner'; (class extends Spinner { }.register('spinner')); diff --git a/client/lib/spinner.js b/client/lib/spinner.js new file mode 100644 index 000000000..c58325d91 --- /dev/null +++ b/client/lib/spinner.js @@ -0,0 +1,21 @@ +Meteor.subscribe('setting'); + +export class Spinner extends BlazeComponent { + currentSettings() { + return Settings.findOne(); + } + + getSpinnerName() { + let ret = 'Bounce'; + let settings = this.currentSettings(); + + if (settings && settings.spinnerName) { + ret = settings.spinnerName; + } + return ret; + } + + getSpinnerTemplate() { + return 'spinner' + this.getSpinnerName(); + } +} From 38069c6d630a19bb55fbaa3e4813f8142f1e4024 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Tue, 8 Jun 2021 19:43:02 +0200 Subject: [PATCH 07/15] Spinner description insert in translation --- client/components/settings/settingBody.jade | 2 +- i18n/en.i18n.json | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/client/components/settings/settingBody.jade b/client/components/settings/settingBody.jade index 342c239a0..bd69e21ad 100644 --- a/client/components/settings/settingBody.jade +++ b/client/components/settings/settingBody.jade @@ -174,7 +174,7 @@ template(name='layoutSettings') .title {{_ 'default-authentication-method'}} +selectAuthenticationMethod(authenticationMethod=currentSetting.defaultAuthenticationMethod) li.layout-form - .title {{_ 'spinner-names'}} + .title {{_ 'wait-spinner'}} +selectSpinnerName(spinnerName=currentSetting.spinnerName) li.layout-form .title {{_ 'custom-product-name'}} diff --git a/i18n/en.i18n.json b/i18n/en.i18n.json index ef5d15c8e..11920de5e 100644 --- a/i18n/en.i18n.json +++ b/i18n/en.i18n.json @@ -1039,5 +1039,6 @@ "rulesReportTitle": "Rules Report", "copy-swimlane": "Copy Swimlane", "copySwimlanePopup-title": "Copy Swimlane", - "display-card-creator": "Display Card Creator" + "display-card-creator": "Display Card Creator", + "wait-spinner": "Wait Spinner" } From ba4153312852db4e91d586fe28c0e5012e9a3f55 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Wed, 9 Jun 2021 19:44:41 +0200 Subject: [PATCH 08/15] Default Spinner can be configured through environment variables --- client/components/settings/settingBody.js | 4 +++- client/lib/spinner.js | 6 ++++++ config/const.js | 4 ++++ server/spinner.js | 3 +++ 4 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 server/spinner.js diff --git a/client/components/settings/settingBody.js b/client/components/settings/settingBody.js index 2ed1a1b78..e55e2db6b 100644 --- a/client/components/settings/settingBody.js +++ b/client/components/settings/settingBody.js @@ -1,3 +1,5 @@ +import { ALLOWED_WAIT_SPINNERS } from '/config/const'; + BlazeComponent.extendComponent({ onCreated() { this.error = new ReactiveVar(''); @@ -390,7 +392,7 @@ Template.selectAuthenticationMethod.helpers({ Template.selectSpinnerName.helpers({ spinners() { - return ['Bounce', 'Wave'] + return ALLOWED_WAIT_SPINNERS; }, isSelected(match) { return Template.instance().data.spinnerName === match; diff --git a/client/lib/spinner.js b/client/lib/spinner.js index c58325d91..b0e0723e8 100644 --- a/client/lib/spinner.js +++ b/client/lib/spinner.js @@ -1,5 +1,7 @@ Meteor.subscribe('setting'); +import { ALLOWED_WAIT_SPINNERS } from '/config/const'; + export class Spinner extends BlazeComponent { currentSettings() { return Settings.findOne(); @@ -7,6 +9,10 @@ export class Spinner extends BlazeComponent { getSpinnerName() { let ret = 'Bounce'; + let defaultWaitSpinner = Meteor.settings.public.DEFAULT_WAIT_SPINNER; + if (defaultWaitSpinner && ALLOWED_WAIT_SPINNERS.includes(defaultWaitSpinner)) { + ret = defaultWaitSpinner; + } let settings = this.currentSettings(); if (settings && settings.spinnerName) { diff --git a/config/const.js b/config/const.js index 0c9c71c7c..7dac4e83e 100644 --- a/config/const.js +++ b/config/const.js @@ -49,3 +49,7 @@ export const TYPE_LINKED_BOARD = 'cardType-linkedBoard'; export const TYPE_LINKED_CARD = 'cardType-linkedCard'; export const TYPE_TEMPLATE_BOARD = 'template-board'; export const TYPE_TEMPLATE_CONTAINER = 'template-container'; +export const ALLOWED_WAIT_SPINNERS = [ + 'Bounce', + 'Wave' +]; diff --git a/server/spinner.js b/server/spinner.js new file mode 100644 index 000000000..316641392 --- /dev/null +++ b/server/spinner.js @@ -0,0 +1,3 @@ +Meteor.startup(() => { + Meteor.settings.public.DEFAULT_WAIT_SPINNER = process.env.DEFAULT_WAIT_SPINNER; +}); From 4b9f8ab2b1dc822c013c25eea2e47119d62d44c5 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Wed, 9 Jun 2021 19:54:49 +0200 Subject: [PATCH 09/15] Adding DEFAULT_WAIT_SPINNER to all environments --- .devcontainer/Dockerfile | 3 ++- Dockerfile | 3 ++- docker-compose.yml | 3 +++ releases/virtualbox/start-wekan.sh | 3 +++ snap-src/bin/config | 6 +++++- start-wekan.bat | 2 ++ start-wekan.sh | 3 +++ torodb-postgresql/docker-compose.yml | 3 +++ 8 files changed, 23 insertions(+), 3 deletions(-) diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile index f8ea94911..0adccae7a 100644 --- a/.devcontainer/Dockerfile +++ b/.devcontainer/Dockerfile @@ -130,7 +130,8 @@ ENV \ SAML_PUBLIC_CERTFILE="" \ SAML_IDENTIFIER_FORMAT="" \ SAML_LOCAL_PROFILE_MATCH_ATTRIBUTE="" \ - SAML_ATTRIBUTES="" + SAML_ATTRIBUTES="" \ + DEFAULT_WAIT_SPINNER="" # Install OS RUN set -o xtrace \ diff --git a/Dockerfile b/Dockerfile index 6ba008bad..75ae107d4 100644 --- a/Dockerfile +++ b/Dockerfile @@ -137,7 +137,8 @@ ENV BUILD_DEPS="apt-utils libarchive-tools gnupg gosu wget curl bzip2 g++ build- SAML_IDENTIFIER_FORMAT="" \ SAML_LOCAL_PROFILE_MATCH_ATTRIBUTE="" \ SAML_ATTRIBUTES="" \ - ORACLE_OIM_ENABLED=false + ORACLE_OIM_ENABLED=false \ + DEFAULT_WAIT_SPINNER="" # Copy the app to the image COPY ${SRC_PATH} /home/wekan/app diff --git a/docker-compose.yml b/docker-compose.yml index bfcff6f24..6e2570378 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -618,6 +618,9 @@ services: #- SAML_LOCAL_PROFILE_MATCH_ATTRIBUTE= #- SAML_ATTRIBUTES= #--------------------------------------------------------------------- + # Default wait spinner to use + # - DEFAULT_WAIT_SPINNER=Bounce + #--------------------------------------------------------------------- depends_on: - wekandb diff --git a/releases/virtualbox/start-wekan.sh b/releases/virtualbox/start-wekan.sh index 728358d7f..08d145f5f 100755 --- a/releases/virtualbox/start-wekan.sh +++ b/releases/virtualbox/start-wekan.sh @@ -382,6 +382,9 @@ #export SAML_LOCAL_PROFILE_MATCH_ATTRIBUTE= #export SAML_ATTRIBUTES= #--------------------------------------------------------------------- + # Default wait spinner to use + #export DEFAULT_WAIT_SPINNER=Bounce + #--------------------------------------------------------------------- node main.js & >> ~/repos/wekan.log cd ~/repos diff --git a/snap-src/bin/config b/snap-src/bin/config index 52c46f365..9f0680859 100755 --- a/snap-src/bin/config +++ b/snap-src/bin/config @@ -3,7 +3,7 @@ # All supported keys are defined here together with descriptions and default values # list of supported keys -keys="DEBUG MONGO_LOG_DESTINATION MONGO_URL MONGODB_BIND_UNIX_SOCKET MONGO_URL MONGODB_BIND_IP MONGODB_PORT MAIL_URL MAIL_FROM ROOT_URL PORT DISABLE_MONGODB CADDY_ENABLED CADDY_BIND_PORT WITH_API RICHER_CARD_COMMENT_EDITOR CARD_OPENED_WEBHOOK_ENABLED ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURES_BEFORE ACCOUNTS_LOCKOUT_KNOWN_USERS_PERIOD ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURE_WINDOW ACCOUNTS_LOCKOUT_UNKNOWN_USERS_FAILURES_BERORE ACCOUNTS_LOCKOUT_UNKNOWN_USERS_LOCKOUT_PERIOD ACCOUNTS_LOCKOUT_UNKNOWN_USERS_FAILURE_WINDOW MAX_IMAGE_PIXEL IMAGE_COMPRESS_RATIO BIGEVENTS_PATTERN NOTIFICATION_TRAY_AFTER_READ_DAYS_BEFORE_REMOVE NOTIFY_DUE_DAYS_BEFORE_AND_AFTER NOTIFY_DUE_AT_HOUR_OF_DAY EMAIL_NOTIFICATION_TIMEOUT CORS CORS_ALLOW_HEADERS CORS_EXPOSE_HEADERS MATOMO_ADDRESS MATOMO_SITE_ID MATOMO_DO_NOT_TRACK MATOMO_WITH_USERNAME BROWSER_POLICY_ENABLED TRUSTED_URL WEBHOOKS_ATTRIBUTES OAUTH2_ENABLED OAUTH2_CA_CERT OAUTH2_LOGIN_STYLE OAUTH2_CLIENT_ID OAUTH2_SECRET OAUTH2_SERVER_URL OAUTH2_AUTH_ENDPOINT OAUTH2_USERINFO_ENDPOINT OAUTH2_TOKEN_ENDPOINT OAUTH2_ID_MAP OAUTH2_USERNAME_MAP OAUTH2_FULLNAME_MAP OAUTH2_ID_TOKEN_WHITELIST_FIELDS OAUTH2_EMAIL_MAP OAUTH2_REQUEST_PERMISSIONS OAUTH2_ADFS_ENABLED LDAP_ENABLE LDAP_PORT LDAP_HOST LDAP_BASEDN LDAP_LOGIN_FALLBACK LDAP_RECONNECT LDAP_TIMEOUT LDAP_IDLE_TIMEOUT LDAP_CONNECT_TIMEOUT LDAP_AUTHENTIFICATION LDAP_AUTHENTIFICATION_USERDN LDAP_AUTHENTIFICATION_PASSWORD LDAP_LOG_ENABLED LDAP_BACKGROUND_SYNC LDAP_BACKGROUND_SYNC_INTERVAL LDAP_BACKGROUND_SYNC_KEEP_EXISTANT_USERS_UPDATED LDAP_BACKGROUND_SYNC_IMPORT_NEW_USERS LDAP_ENCRYPTION LDAP_CA_CERT LDAP_REJECT_UNAUTHORIZED LDAP_USER_AUTHENTICATION LDAP_USER_AUTHENTICATION_FIELD LDAP_USER_SEARCH_FILTER LDAP_USER_SEARCH_SCOPE LDAP_USER_SEARCH_FIELD LDAP_SEARCH_PAGE_SIZE LDAP_SEARCH_SIZE_LIMIT LDAP_GROUP_FILTER_ENABLE LDAP_GROUP_FILTER_OBJECTCLASS LDAP_GROUP_FILTER_GROUP_ID_ATTRIBUTE LDAP_GROUP_FILTER_GROUP_MEMBER_ATTRIBUTE LDAP_GROUP_FILTER_GROUP_MEMBER_FORMAT LDAP_GROUP_FILTER_GROUP_NAME LDAP_UNIQUE_IDENTIFIER_FIELD LDAP_UTF8_NAMES_SLUGIFY LDAP_USERNAME_FIELD LDAP_FULLNAME_FIELD LDAP_MERGE_EXISTING_USERS LDAP_SYNC_USER_DATA LDAP_SYNC_USER_DATA_FIELDMAP LDAP_SYNC_GROUP_ROLES LDAP_DEFAULT_DOMAIN LDAP_EMAIL_MATCH_ENABLE LDAP_EMAIL_MATCH_REQUIRE LDAP_EMAIL_MATCH_VERIFIED LDAP_EMAIL_FIELD LDAP_SYNC_ADMIN_STATUS LDAP_SYNC_ADMIN_GROUPS HEADER_LOGIN_ID HEADER_LOGIN_FIRSTNAME HEADER_LOGIN_LASTNAME HEADER_LOGIN_EMAIL LOGOUT_WITH_TIMER LOGOUT_IN LOGOUT_ON_HOURS LOGOUT_ON_MINUTES DEFAULT_AUTHENTICATION_METHOD ATTACHMENTS_STORE_PATH PASSWORD_LOGIN_ENABLED CAS_ENABLED CAS_BASE_URL CAS_LOGIN_URL CAS_VALIDATE_URL SAML_ENABLED SAML_PROVIDER SAML_ENTRYPOINT SAML_ISSUER SAML_CERT SAML_IDPSLO_REDIRECTURL SAML_PRIVATE_KEYFILE SAML_PUBLIC_CERTFILE SAML_IDENTIFIER_FORMAT SAML_LOCAL_PROFILE_MATCH_ATTRIBUTE SAML_ATTRIBUTES ORACLE_OIM_ENABLED RESULTS_PER_PAGE" +keys="DEBUG MONGO_LOG_DESTINATION MONGO_URL MONGODB_BIND_UNIX_SOCKET MONGO_URL MONGODB_BIND_IP MONGODB_PORT MAIL_URL MAIL_FROM ROOT_URL PORT DISABLE_MONGODB CADDY_ENABLED CADDY_BIND_PORT WITH_API RICHER_CARD_COMMENT_EDITOR CARD_OPENED_WEBHOOK_ENABLED ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURES_BEFORE ACCOUNTS_LOCKOUT_KNOWN_USERS_PERIOD ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURE_WINDOW ACCOUNTS_LOCKOUT_UNKNOWN_USERS_FAILURES_BERORE ACCOUNTS_LOCKOUT_UNKNOWN_USERS_LOCKOUT_PERIOD ACCOUNTS_LOCKOUT_UNKNOWN_USERS_FAILURE_WINDOW MAX_IMAGE_PIXEL IMAGE_COMPRESS_RATIO BIGEVENTS_PATTERN NOTIFICATION_TRAY_AFTER_READ_DAYS_BEFORE_REMOVE NOTIFY_DUE_DAYS_BEFORE_AND_AFTER NOTIFY_DUE_AT_HOUR_OF_DAY EMAIL_NOTIFICATION_TIMEOUT CORS CORS_ALLOW_HEADERS CORS_EXPOSE_HEADERS MATOMO_ADDRESS MATOMO_SITE_ID MATOMO_DO_NOT_TRACK MATOMO_WITH_USERNAME BROWSER_POLICY_ENABLED TRUSTED_URL WEBHOOKS_ATTRIBUTES OAUTH2_ENABLED OAUTH2_CA_CERT OAUTH2_LOGIN_STYLE OAUTH2_CLIENT_ID OAUTH2_SECRET OAUTH2_SERVER_URL OAUTH2_AUTH_ENDPOINT OAUTH2_USERINFO_ENDPOINT OAUTH2_TOKEN_ENDPOINT OAUTH2_ID_MAP OAUTH2_USERNAME_MAP OAUTH2_FULLNAME_MAP OAUTH2_ID_TOKEN_WHITELIST_FIELDS OAUTH2_EMAIL_MAP OAUTH2_REQUEST_PERMISSIONS OAUTH2_ADFS_ENABLED LDAP_ENABLE LDAP_PORT LDAP_HOST LDAP_BASEDN LDAP_LOGIN_FALLBACK LDAP_RECONNECT LDAP_TIMEOUT LDAP_IDLE_TIMEOUT LDAP_CONNECT_TIMEOUT LDAP_AUTHENTIFICATION LDAP_AUTHENTIFICATION_USERDN LDAP_AUTHENTIFICATION_PASSWORD LDAP_LOG_ENABLED LDAP_BACKGROUND_SYNC LDAP_BACKGROUND_SYNC_INTERVAL LDAP_BACKGROUND_SYNC_KEEP_EXISTANT_USERS_UPDATED LDAP_BACKGROUND_SYNC_IMPORT_NEW_USERS LDAP_ENCRYPTION LDAP_CA_CERT LDAP_REJECT_UNAUTHORIZED LDAP_USER_AUTHENTICATION LDAP_USER_AUTHENTICATION_FIELD LDAP_USER_SEARCH_FILTER LDAP_USER_SEARCH_SCOPE LDAP_USER_SEARCH_FIELD LDAP_SEARCH_PAGE_SIZE LDAP_SEARCH_SIZE_LIMIT LDAP_GROUP_FILTER_ENABLE LDAP_GROUP_FILTER_OBJECTCLASS LDAP_GROUP_FILTER_GROUP_ID_ATTRIBUTE LDAP_GROUP_FILTER_GROUP_MEMBER_ATTRIBUTE LDAP_GROUP_FILTER_GROUP_MEMBER_FORMAT LDAP_GROUP_FILTER_GROUP_NAME LDAP_UNIQUE_IDENTIFIER_FIELD LDAP_UTF8_NAMES_SLUGIFY LDAP_USERNAME_FIELD LDAP_FULLNAME_FIELD LDAP_MERGE_EXISTING_USERS LDAP_SYNC_USER_DATA LDAP_SYNC_USER_DATA_FIELDMAP LDAP_SYNC_GROUP_ROLES LDAP_DEFAULT_DOMAIN LDAP_EMAIL_MATCH_ENABLE LDAP_EMAIL_MATCH_REQUIRE LDAP_EMAIL_MATCH_VERIFIED LDAP_EMAIL_FIELD LDAP_SYNC_ADMIN_STATUS LDAP_SYNC_ADMIN_GROUPS HEADER_LOGIN_ID HEADER_LOGIN_FIRSTNAME HEADER_LOGIN_LASTNAME HEADER_LOGIN_EMAIL LOGOUT_WITH_TIMER LOGOUT_IN LOGOUT_ON_HOURS LOGOUT_ON_MINUTES DEFAULT_AUTHENTICATION_METHOD ATTACHMENTS_STORE_PATH PASSWORD_LOGIN_ENABLED CAS_ENABLED CAS_BASE_URL CAS_LOGIN_URL CAS_VALIDATE_URL SAML_ENABLED SAML_PROVIDER SAML_ENTRYPOINT SAML_ISSUER SAML_CERT SAML_IDPSLO_REDIRECTURL SAML_PRIVATE_KEYFILE SAML_PUBLIC_CERTFILE SAML_IDENTIFIER_FORMAT SAML_LOCAL_PROFILE_MATCH_ATTRIBUTE SAML_ATTRIBUTES ORACLE_OIM_ENABLED RESULTS_PER_PAGE DEFAULT_WAIT_SPINNER" # default values DESCRIPTION_DEBUG="Debug OIDC OAuth2 etc. Example: sudo snap set wekan debug='true'" @@ -547,3 +547,7 @@ KEY_SAML_ATTRIBUTES="saml-attributes" DESCRIPTION_RESULTS_PER_PAGE="Number of search results to show per page by default" DEFAULT_RESULTS_PER_PAGE="" KEY_RESULTS_PER_PAGE="results-per-page" + +DESCRIPTION_WAIT_SPINNER="Default wait spinner to use" +DEFAULT_WAIT_SPINNER="Bounce" +KEY_WAIT_SPINNER="wait-spinner" diff --git a/start-wekan.bat b/start-wekan.bat index 5779fd6fc..9399e0cec 100644 --- a/start-wekan.bat +++ b/start-wekan.bat @@ -418,4 +418,6 @@ REM SET SAML_IDENTIFIER_FORMAT= REM SET SAML_LOCAL_PROFILE_MATCH_ATTRIBUTE= REM SET SAML_ATTRIBUTES= +REM SET DEFAULT_WAIT_SPINNER= + node main.js diff --git a/start-wekan.sh b/start-wekan.sh index bbdb4e26c..da1b6fc0a 100755 --- a/start-wekan.sh +++ b/start-wekan.sh @@ -388,6 +388,9 @@ #export SAML_LOCAL_PROFILE_MATCH_ATTRIBUTE= #export SAML_ATTRIBUTES= #--------------------------------------------------------------------- + # Default wait spinner to use + #export DEFAULT_WAIT_SPINNER=Bounce + #--------------------------------------------------------------------- node main.js # & >> ../../wekan.log cd ../.. diff --git a/torodb-postgresql/docker-compose.yml b/torodb-postgresql/docker-compose.yml index d6497ac4d..8bfb11f71 100644 --- a/torodb-postgresql/docker-compose.yml +++ b/torodb-postgresql/docker-compose.yml @@ -559,6 +559,9 @@ services: #- SAML_LOCAL_PROFILE_MATCH_ATTRIBUTE= #- SAML_ATTRIBUTES= #--------------------------------------------------------------------- + # Default wait spinner to use + # - DEFAULT_WAIT_SPINNER=Bounce + #--------------------------------------------------------------------- depends_on: - mongodb From 8aa58c0b11f31af97de7cbd7354792bff6f10a77 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Wed, 9 Jun 2021 20:28:07 +0200 Subject: [PATCH 10/15] Spinner Cube now available Spinner from: https://tobiasahlin.com/spinkit/ --- client/components/main/spinner_cube.jade | 8 ++++ client/components/main/spinner_cube.styl | 52 ++++++++++++++++++++++++ config/const.js | 1 + 3 files changed, 61 insertions(+) create mode 100644 client/components/main/spinner_cube.jade create mode 100644 client/components/main/spinner_cube.styl diff --git a/client/components/main/spinner_cube.jade b/client/components/main/spinner_cube.jade new file mode 100644 index 000000000..696d2f5ad --- /dev/null +++ b/client/components/main/spinner_cube.jade @@ -0,0 +1,8 @@ +template(name="spinnerCube") + .sk-spinner.sk-spinner-cube(class=currentBoard.colorClass) + +spinnerCubeRaw + +template(name="spinnerCubeRaw") + .sk-cube1 + .sk-cube2 + .sk-cube3 diff --git a/client/components/main/spinner_cube.styl b/client/components/main/spinner_cube.styl new file mode 100644 index 000000000..92e6e2a11 --- /dev/null +++ b/client/components/main/spinner_cube.styl @@ -0,0 +1,52 @@ +@import 'nib' + +// From https://github.com/tobiasahlin/SpinKit +.sk-spinner-cube { + margin: 100px auto; + width: 40px; + height: 40px; + position: relative; +} + +.sk-cube1, .sk-cube2 { + background-color: #333; + width: 15px; + height: 15px; + position: absolute; + top: 0; + left: 0; + + -webkit-animation: sk-cubemove 1.8s infinite ease-in-out; + animation: sk-cubemove 1.8s infinite ease-in-out; +} + +.sk-cube2 { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; +} + +@-webkit-keyframes sk-cubemove { + 25% { -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5) } + 50% { -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg) } + 75% { -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5) } + 100% { -webkit-transform: rotate(-360deg) } +} + +@keyframes sk-cubemove { + 25% { + transform: translateX(35px) rotate(-90deg) scale(0.5); + -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5); + } 50% { + transform: translateX(35px) translateY(35px) rotate(-179deg); + -webkit-transform: translateX(35px) translateY(35px) rotate(-179deg); + } 50.1% { + transform: translateX(35px) translateY(35px) rotate(-180deg); + -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg); + } 75% { + transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5); + -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5); + } 100% { + transform: rotate(-360deg); + -webkit-transform: rotate(-360deg); + } +} diff --git a/config/const.js b/config/const.js index 7dac4e83e..a99b00590 100644 --- a/config/const.js +++ b/config/const.js @@ -51,5 +51,6 @@ export const TYPE_TEMPLATE_BOARD = 'template-board'; export const TYPE_TEMPLATE_CONTAINER = 'template-container'; export const ALLOWED_WAIT_SPINNERS = [ 'Bounce', + 'Cube', 'Wave' ]; From a74fac4cbf63aff7e2cecd97b6fa58cebea4d29f Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Wed, 9 Jun 2021 20:36:55 +0200 Subject: [PATCH 11/15] Spinner Dot now available Spinner from: https://tobiasahlin.com/spinkit/ --- client/components/main/spinner_dot.jade | 7 ++++ client/components/main/spinner_dot.styl | 51 +++++++++++++++++++++++++ config/const.js | 1 + 3 files changed, 59 insertions(+) create mode 100644 client/components/main/spinner_dot.jade create mode 100644 client/components/main/spinner_dot.styl diff --git a/client/components/main/spinner_dot.jade b/client/components/main/spinner_dot.jade new file mode 100644 index 000000000..187511116 --- /dev/null +++ b/client/components/main/spinner_dot.jade @@ -0,0 +1,7 @@ +template(name="spinnerDot") + .sk-spinner.sk-spinner-dot(class=currentBoard.colorClass) + +spinnerDotRaw + +template(name="spinnerDotRaw") + .sk-dot1 + .sk-dot2 diff --git a/client/components/main/spinner_dot.styl b/client/components/main/spinner_dot.styl new file mode 100644 index 000000000..5f2e36da4 --- /dev/null +++ b/client/components/main/spinner_dot.styl @@ -0,0 +1,51 @@ +@import 'nib' + +// From https://github.com/tobiasahlin/SpinKit +.sk-spinner-dot { + margin: 100px auto; + width: 40px; + height: 40px; + position: relative; + text-align: center; + + -webkit-animation: sk-rotate 2.0s infinite linear; + animation: sk-rotate 2.0s infinite linear; +} + +.sk-dot1, .sk-dot2 { + width: 40%; + height: 40%; + display: inline-block; + position: absolute; + top: 0; + background-color: #333; + border-radius: 100%; + + -webkit-animation: sk-bounce 2.0s infinite ease-in-out; + animation: sk-bounce 2.0s infinite ease-in-out; +} + +.sk-dot2 { + top: auto; + bottom: 0; + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; +} + +@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }} +@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} + +@-webkit-keyframes sk-bounce { + 0%, 100% { -webkit-transform: scale(0.0) } + 50% { -webkit-transform: scale(1.0) } +} + +@keyframes sk-bounce { + 0%, 100% { + transform: scale(0.0); + -webkit-transform: scale(0.0); + } 50% { + transform: scale(1.0); + -webkit-transform: scale(1.0); + } +} diff --git a/config/const.js b/config/const.js index a99b00590..d8cc9b81d 100644 --- a/config/const.js +++ b/config/const.js @@ -52,5 +52,6 @@ export const TYPE_TEMPLATE_CONTAINER = 'template-container'; export const ALLOWED_WAIT_SPINNERS = [ 'Bounce', 'Cube', + 'Dot', 'Wave' ]; From 55d0f0bacde6645e98f7e4a4ff2d3003b8754858 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Wed, 9 Jun 2021 20:39:05 +0200 Subject: [PATCH 12/15] Spinner Rotateplane now available Spinner from: https://tobiasahlin.com/spinkit/ --- .../components/main/spinner_rotateplane.jade | 6 +++ .../components/main/spinner_rotateplane.styl | 38 +++++++++++++++++++ config/const.js | 1 + 3 files changed, 45 insertions(+) create mode 100644 client/components/main/spinner_rotateplane.jade create mode 100644 client/components/main/spinner_rotateplane.styl diff --git a/client/components/main/spinner_rotateplane.jade b/client/components/main/spinner_rotateplane.jade new file mode 100644 index 000000000..35afeda81 --- /dev/null +++ b/client/components/main/spinner_rotateplane.jade @@ -0,0 +1,6 @@ +template(name="spinnerRotateplane") + .sk-spinner.sk-spinner-rotateplane(class=currentBoard.colorClass) + +spinnerRotateplaneRaw + +template(name="spinnerRotateplaneRaw") + .sk-rotateplane1 diff --git a/client/components/main/spinner_rotateplane.styl b/client/components/main/spinner_rotateplane.styl new file mode 100644 index 000000000..1f43d37e3 --- /dev/null +++ b/client/components/main/spinner_rotateplane.styl @@ -0,0 +1,38 @@ +@import 'nib' + +// From https://github.com/tobiasahlin/SpinKit +.sk-spinner-rotateplane { + width: 40px; + height: 40px; + text-align: center; + + margin: 100px auto; + -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; + animation: sk-rotateplane 1.2s infinite ease-in-out; + + div { + background-color: #333; + height: 100%; + width: 100%; + display: inline-block; + } +} + +@-webkit-keyframes sk-rotateplane { + 0% { -webkit-transform: perspective(120px) } + 50% { -webkit-transform: perspective(120px) rotateY(180deg) } + 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } +} + +@keyframes sk-rotateplane { + 0% { + transform: perspective(120px) rotateX(0deg) rotateY(0deg); + -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) + } 50% { + transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); + -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) + } 100% { + transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + } +} diff --git a/config/const.js b/config/const.js index d8cc9b81d..60f5d084d 100644 --- a/config/const.js +++ b/config/const.js @@ -53,5 +53,6 @@ export const ALLOWED_WAIT_SPINNERS = [ 'Bounce', 'Cube', 'Dot', + 'Rotateplane', 'Wave' ]; From 6df7657c8e50530a75cd7bbd1c1cc2897e2d1c5a Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Wed, 9 Jun 2021 20:40:26 +0200 Subject: [PATCH 13/15] Spinner Scaleout now available Spinner from: https://tobiasahlin.com/spinkit/ --- client/components/main/spinner_scaleout.jade | 6 +++ client/components/main/spinner_scaleout.styl | 40 ++++++++++++++++++++ config/const.js | 1 + 3 files changed, 47 insertions(+) create mode 100644 client/components/main/spinner_scaleout.jade create mode 100644 client/components/main/spinner_scaleout.styl diff --git a/client/components/main/spinner_scaleout.jade b/client/components/main/spinner_scaleout.jade new file mode 100644 index 000000000..2cb21d156 --- /dev/null +++ b/client/components/main/spinner_scaleout.jade @@ -0,0 +1,6 @@ +template(name="spinnerScaleout") + .sk-spinner.sk-spinner-scaleout(class=currentBoard.colorClass) + +spinnerScaleoutRaw + +template(name="spinnerScaleoutRaw") + .sk-scaleout1 diff --git a/client/components/main/spinner_scaleout.styl b/client/components/main/spinner_scaleout.styl new file mode 100644 index 000000000..deb73b68e --- /dev/null +++ b/client/components/main/spinner_scaleout.styl @@ -0,0 +1,40 @@ +@import 'nib' + +// From https://github.com/tobiasahlin/SpinKit +.sk-spinner-scaleout { + width: 40px; + height: 40px; + text-align: center; + + margin: 100px auto; + + border-radius: 100%; + -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; + animation: sk-scaleout 1.0s infinite ease-in-out; + + div { + background-color: #333; + height: 100%; + width: 100%; + display: inline-block; + } +} + +@-webkit-keyframes sk-scaleout { + 0% { -webkit-transform: scale(0) } + 100% { + -webkit-transform: scale(1.0); + opacity: 0; + } +} + +@keyframes sk-scaleout { + 0% { + -webkit-transform: scale(0); + transform: scale(0); + } 100% { + -webkit-transform: scale(1.0); + transform: scale(1.0); + opacity: 0; + } +} diff --git a/config/const.js b/config/const.js index 60f5d084d..e9818e465 100644 --- a/config/const.js +++ b/config/const.js @@ -54,5 +54,6 @@ export const ALLOWED_WAIT_SPINNERS = [ 'Cube', 'Dot', 'Rotateplane', + 'Scaleout', 'Wave' ]; From 0caff7d5d5763c3a7012d2dbf521b0dee6c22a73 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Wed, 9 Jun 2021 20:41:10 +0200 Subject: [PATCH 14/15] Spinner Cube-Grid now available Spinner from: https://tobiasahlin.com/spinkit/ --- client/components/main/spinner_cube_grid.jade | 14 ++++ client/components/main/spinner_cube_grid.styl | 64 +++++++++++++++++++ client/lib/spinner.js | 2 +- config/const.js | 1 + 4 files changed, 80 insertions(+), 1 deletion(-) create mode 100644 client/components/main/spinner_cube_grid.jade create mode 100644 client/components/main/spinner_cube_grid.styl diff --git a/client/components/main/spinner_cube_grid.jade b/client/components/main/spinner_cube_grid.jade new file mode 100644 index 000000000..55faf11af --- /dev/null +++ b/client/components/main/spinner_cube_grid.jade @@ -0,0 +1,14 @@ +template(name="spinnerCubeGrid") + .sk-spinner.sk-spinner-cube-grid(class=currentBoard.colorClass) + +spinnerCubeGridRaw + +template(name="spinnerCubeGridRaw") + .sk-cube-grid.sk-cube-grid1 + .sk-cube-grid.sk-cube-grid2 + .sk-cube-grid.sk-cube-grid3 + .sk-cube-grid.sk-cube-grid4 + .sk-cube-grid.sk-cube-grid5 + .sk-cube-grid.sk-cube-grid6 + .sk-cube-grid.sk-cube-grid7 + .sk-cube-grid.sk-cube-grid8 + .sk-cube-grid.sk-cube-grid9 diff --git a/client/components/main/spinner_cube_grid.styl b/client/components/main/spinner_cube_grid.styl new file mode 100644 index 000000000..042aa10fe --- /dev/null +++ b/client/components/main/spinner_cube_grid.styl @@ -0,0 +1,64 @@ +@import 'nib' + +// From https://github.com/tobiasahlin/SpinKit +.sk-spinner-cube-grid { + width: 40px; + height: 40px; + margin: 100px auto; +} + +.sk-spinner-cube-grid .sk-cube-grid { + width: 33%; + height: 33%; + background-color: #333; + float: left; + -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; + animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; +} +.sk-spinner-cube-grid .sk-cube-grid1 { + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; } +.sk-spinner-cube-grid .sk-cube-grid2 { + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; } +.sk-spinner-cube-grid .sk-cube-grid3 { + -webkit-animation-delay: 0.4s; + animation-delay: 0.4s; } +.sk-spinner-cube-grid .sk-cube-grid4 { + -webkit-animation-delay: 0.1s; + animation-delay: 0.1s; } +.sk-spinner-cube-grid .sk-cube-grid5 { + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; } +.sk-spinner-cube-grid .sk-cube-grid6 { + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; } +.sk-spinner-cube-grid .sk-cube-grid7 { + -webkit-animation-delay: 0s; + animation-delay: 0s; } +.sk-spinner-cube-grid .sk-cube-grid8 { + -webkit-animation-delay: 0.1s; + animation-delay: 0.1s; } +.sk-spinner-cube-grid .sk-cube-grid9 { + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; } + +@-webkit-keyframes sk-cubeGridScaleDelay { + 0%, 70%, 100% { + -webkit-transform: scale3D(1, 1, 1); + transform: scale3D(1, 1, 1); + } 35% { + -webkit-transform: scale3D(0, 0, 1); + transform: scale3D(0, 0, 1); + } +} + +@keyframes sk-cubeGridScaleDelay { + 0%, 70%, 100% { + -webkit-transform: scale3D(1, 1, 1); + transform: scale3D(1, 1, 1); + } 35% { + -webkit-transform: scale3D(0, 0, 1); + transform: scale3D(0, 0, 1); + } +} diff --git a/client/lib/spinner.js b/client/lib/spinner.js index b0e0723e8..7b52b7c34 100644 --- a/client/lib/spinner.js +++ b/client/lib/spinner.js @@ -22,6 +22,6 @@ export class Spinner extends BlazeComponent { } getSpinnerTemplate() { - return 'spinner' + this.getSpinnerName(); + return 'spinner' + this.getSpinnerName().replace(/-/, ''); } } diff --git a/config/const.js b/config/const.js index e9818e465..4271bd5ef 100644 --- a/config/const.js +++ b/config/const.js @@ -52,6 +52,7 @@ export const TYPE_TEMPLATE_CONTAINER = 'template-container'; export const ALLOWED_WAIT_SPINNERS = [ 'Bounce', 'Cube', + 'Cube-Grid', 'Dot', 'Rotateplane', 'Scaleout', From d485154a1236594b6b5c734c6b0d222887d4304d Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Wed, 9 Jun 2021 20:50:58 +0200 Subject: [PATCH 15/15] Spinner Double-Bounce now available Spinner from: https://tobiasahlin.com/spinkit/ --- .../main/spinner_double_bounce.jade | 7 +++ .../main/spinner_double_bounce.styl | 44 +++++++++++++++++++ config/const.js | 1 + 3 files changed, 52 insertions(+) create mode 100644 client/components/main/spinner_double_bounce.jade create mode 100644 client/components/main/spinner_double_bounce.styl diff --git a/client/components/main/spinner_double_bounce.jade b/client/components/main/spinner_double_bounce.jade new file mode 100644 index 000000000..206a468d2 --- /dev/null +++ b/client/components/main/spinner_double_bounce.jade @@ -0,0 +1,7 @@ +template(name="spinnerDoubleBounce") + .sk-spinner.sk-spinner-double-bounce(class=currentBoard.colorClass) + +spinnerDoubleBounceRaw + +template(name="spinnerDoubleBounceRaw") + .sk-double-bounce1 + .sk-double-bounce2 diff --git a/client/components/main/spinner_double_bounce.styl b/client/components/main/spinner_double_bounce.styl new file mode 100644 index 000000000..2ef000361 --- /dev/null +++ b/client/components/main/spinner_double_bounce.styl @@ -0,0 +1,44 @@ +@import 'nib' + +// From https://github.com/tobiasahlin/SpinKit +.sk-spinner-double-bounce { + width: 40px; + height: 40px; + + position: relative; + margin: 100px auto; +} + +.sk-double-bounce1, .sk-double-bounce2 { + width: 100%; + height: 100%; + border-radius: 50%; + background-color: #333; + opacity: 0.6; + position: absolute; + top: 0; + left: 0; + + -webkit-animation: sk-bounce 2.0s infinite ease-in-out; + animation: sk-bounce 2.0s infinite ease-in-out; +} + +.sk-double-bounce2 { + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; +} + +@-webkit-keyframes sk-bounce { + 0%, 100% { -webkit-transform: scale(0.0) } + 50% { -webkit-transform: scale(1.0) } +} + +@keyframes sk-bounce { + 0%, 100% { + transform: scale(0.0); + -webkit-transform: scale(0.0); + } 50% { + transform: scale(1.0); + -webkit-transform: scale(1.0); + } +} diff --git a/config/const.js b/config/const.js index 4271bd5ef..a275ffa6b 100644 --- a/config/const.js +++ b/config/const.js @@ -54,6 +54,7 @@ export const ALLOWED_WAIT_SPINNERS = [ 'Cube', 'Cube-Grid', 'Dot', + 'Double-Bounce', 'Rotateplane', 'Scaleout', 'Wave'