From a3d43dfd22ed02ac156f5f67ae886baadc280df3 Mon Sep 17 00:00:00 2001 From: Niklas Fiekas Date: Sun, 31 Oct 2021 17:08:22 +0100 Subject: [PATCH] replace explorer db selector with quicktabs --- ui/analyse/css/explorer/_config.scss | 12 +-- ui/analyse/src/explorer/explorerConfig.ts | 97 ++++++++--------------- ui/analyse/src/explorer/explorerView.ts | 37 +++++---- 3 files changed, 57 insertions(+), 89 deletions(-) diff --git a/ui/analyse/css/explorer/_config.scss b/ui/analyse/css/explorer/_config.scss index 882c77f605..66b193cd77 100644 --- a/ui/analyse/css/explorer/_config.scss +++ b/ui/analyse/css/explorer/_config.scss @@ -4,12 +4,6 @@ margin: 0.4em $block-gap 0 $block-gap; } - p.message { - white-space: normal; - padding: 5px 5px 0; - margin: $block-gap 0 0 0; - } - section.save { text-align: center; padding: 15px 0 10px 0; @@ -65,8 +59,9 @@ } .name { - @extend %flex-center; - margin-top: 1em; + > div { + @extend %flex-center; + } .player-name { border-radius: $box-radius-size !important; font-weight: bold; @@ -90,7 +85,6 @@ } .date { - margin-top: 1em; label { @extend %flex-between-nowrap; } diff --git a/ui/analyse/src/explorer/explorerConfig.ts b/ui/analyse/src/explorer/explorerConfig.ts index f26548030e..27c4b909bc 100644 --- a/ui/analyse/src/explorer/explorerConfig.ts +++ b/ui/analyse/src/explorer/explorerConfig.ts @@ -21,7 +21,6 @@ type Month = string; export interface ExplorerConfigData { open: Prop; - advanced: StoredJsonProp; db: StoredProp; rating: StoredJsonProp; speed: StoredJsonProp; @@ -46,7 +45,6 @@ export class ExplorerConfigCtrl { if (variant === 'standard') this.allDbs.unshift('masters'); this.data = { open: prop(false), - advanced: storedJsonProp('explorer.advanced', () => false), db: storedProp('explorer.db.' + variant, this.allDbs[0]), rating: storedJsonProp('explorer.rating', () => allRatings), speed: storedJsonProp('explorer.speed', () => allSpeeds), @@ -102,24 +100,6 @@ export class ExplorerConfigCtrl { export function view(ctrl: ExplorerConfigCtrl): VNode[] { return [ - h('section.db', [ - h('label', ctrl.root.trans.noarg('database')), - h( - 'div.choices', - ctrl.allDbs.map(s => - h( - 'button', - { - attrs: { - 'aria-pressed': `${ctrl.data.db() === s}`, - }, - hook: bind('click', _ => ctrl.data.db(s), ctrl.root.redraw), - }, - s - ) - ) - ), - ]), ctrl.data.db() === 'masters' ? masterDb(ctrl) : ctrl.data.db() === 'lichess' ? lichessDb(ctrl) : playerDb(ctrl), h( 'section.save', @@ -142,52 +122,41 @@ const playerDb = (ctrl: ExplorerConfigCtrl) => { return h('div.player-db', [ ctrl.data.playerName.open() ? playerModal(ctrl) : undefined, h('section.name', [ - h( - 'div.choices', + h('label', 'Player'), + h('div', [ h( - `button.player-name${name ? '.active' : ''}`, + 'div.choices', + h( + `button.player-name${name ? '.active' : ''}`, + { + hook: bind('click', () => ctrl.data.playerName.open(true), ctrl.root.redraw), + attrs: name ? { title: selectText } : undefined, + }, + name || selectText + ) + ), + ' as ', + h( + 'button.button-link.text.color', { - hook: bind('click', () => ctrl.data.playerName.open(true), ctrl.root.redraw), - attrs: name ? { title: selectText } : undefined, + attrs: dataIcon(''), + hook: bind('click', ctrl.toggleColor, ctrl.root.redraw), }, - name || selectText - ) - ), - ' as ', - h( - 'button.button-link.text.color', - { - attrs: dataIcon(''), - hook: bind('click', ctrl.toggleColor, ctrl.root.redraw), - }, - ctrl.data.color() - ), + ctrl.data.color() + ), + ]), ]), speedSection(ctrl), - advancedSection(ctrl, [modeSection(ctrl), monthSection(ctrl)]), + modeSection(ctrl), + monthSection(ctrl), ]); }; -const advancedSection = (ctrl: ExplorerConfigCtrl, content: VNode[]): VNode => - h('div.advanced', [ - h( - 'button.button-link.toggle', - { - hook: bind('click', () => ctrl.data.advanced(!ctrl.data.advanced()), ctrl.root.redraw), - }, - ['Advanced settings ', iconTag(ctrl.data.advanced() ? '' : '')] - ), - ...(ctrl.data.advanced() ? content : []), - ]); - const masterDb = (ctrl: ExplorerConfigCtrl) => h('div', [ - h('p.message', ctrl.root.trans('masterDbExplanation', 2200, minYear, '2019')), - advancedSection(ctrl, [ - h('section.date', [ - h('label', ['Since', yearInput(ctrl.data.since, () => '', ctrl.root.redraw)]), - h('label', ['Until', yearInput(ctrl.data.until, ctrl.data.since, ctrl.root.redraw)]), - ]), + h('section.date', [ + h('label', ['Since', yearInput(ctrl.data.since, () => '', ctrl.root.redraw)]), + h('label', ['Until', yearInput(ctrl.data.until, ctrl.data.since, ctrl.root.redraw)]), ]), ]); @@ -205,15 +174,12 @@ const radioButton = const lichessDb = (ctrl: ExplorerConfigCtrl) => h('div', [ - h('p.message', 'Rated games sampled from all Lichess players'), speedSection(ctrl), - advancedSection(ctrl, [ - h('section.rating', [ - h('label', ctrl.root.trans.noarg('averageElo')), - h('div.choices', allRatings.map(radioButton(ctrl, ctrl.data.rating))), - ]), - monthSection(ctrl), + h('section.rating', [ + h('label', ctrl.root.trans.noarg('averageElo')), + h('div.choices', allRatings.map(radioButton(ctrl, ctrl.data.rating))), ]), + monthSection(ctrl), ]); const speedSection = (ctrl: ExplorerConfigCtrl) => @@ -223,7 +189,10 @@ const speedSection = (ctrl: ExplorerConfigCtrl) => ]); const modeSection = (ctrl: ExplorerConfigCtrl) => - h('section.mode', [h('div.choices', allModes.map(radioButton(ctrl, ctrl.data.mode)))]); + h('section.mode', [ + h('label', ctrl.root.trans.noarg('mode')), + h('div.choices', allModes.map(radioButton(ctrl, ctrl.data.mode))), + ]); const monthInput = (prop: StoredProp, after: () => Month, redraw: Redraw) => { const validateRange = (input: HTMLInputElement) => diff --git a/ui/analyse/src/explorer/explorerView.ts b/ui/analyse/src/explorer/explorerView.ts index 821ccad18a..0dd9beba70 100644 --- a/ui/analyse/src/explorer/explorerView.ts +++ b/ui/analyse/src/explorer/explorerView.ts @@ -319,11 +319,12 @@ function show(ctrl: AnalyseCtrl): MaybeVNode { const explorerTitle = (explorer: ExplorerCtrl) => { const db = explorer.db(); - const otherLink = (name: string) => + const otherLink = (name: string, title: string) => h( 'button.button-link', { key: name, + attrs: { title }, hook: bind('click', () => explorer.config.data.db(name.toLowerCase() as ExplorerDb), explorer.reload), }, name @@ -347,30 +348,37 @@ const explorerTitle = (explorer: ExplorerCtrl) => { }, 'Player' ); - const active = (nodes: MaybeVNodes) => + const active = (nodes: MaybeVNodes, title: string) => h( 'span.active.text.' + db, { - attrs: dataIcon(''), + attrs: { title, ...dataIcon('') }, hook: db == 'player' ? bind('click', explorer.config.toggleColor, explorer.reload) : undefined, }, nodes ); const playerName = explorer.config.data.playerName.value(); + const masterDbExplanation = explorer.root.trans('masterDbExplanation', 2200, '1952', '2019'), + lichessDbExplanation = 'Rated games samples from all Lichess players'; return h('div.explorer-title', [ db == 'masters' - ? active([h('strong', 'Masters'), ' database']) + ? active([h('strong', 'Masters'), ' database'], masterDbExplanation) : explorer.config.allDbs.includes('masters') - ? otherLink('Masters') + ? otherLink('Masters', masterDbExplanation) : undefined, - db == 'lichess' ? active([h('strong', 'Lichess'), ' database']) : otherLink('Lichess'), + db == 'lichess' + ? active([h('strong', 'Lichess'), ' database'], lichessDbExplanation) + : otherLink('Lichess', lichessDbExplanation), db == 'player' - ? active([ - h(`strong${playerName.length > 14 ? '.long' : ''}`, playerName), - ' as ', - explorer.config.data.color(), - explorer.isIndexing() ? h('i.ddloader', { attrs: { title: 'Indexing...' } }) : undefined, - ]) + ? active( + [ + h(`strong${playerName.length > 14 ? '.long' : ''}`, playerName), + ' as ', + explorer.config.data.color(), + explorer.isIndexing() ? h('i.ddloader', { attrs: { title: 'Indexing...' } }) : undefined, + ], + 'Switch sides' + ) : playerLink(), ]); }; @@ -381,10 +389,7 @@ function showTitle(ctrl: AnalyseCtrl, variant: Variant) { } function showConfig(ctrl: AnalyseCtrl): VNode { - return h( - 'div.config', - [h('div.title', showTitle(ctrl, ctrl.data.game.variant))].concat(renderConfig(ctrl.explorer.config)) - ); + return h('div.config', [explorerTitle(ctrl.explorer), ...renderConfig(ctrl.explorer.config)]); } function showFailing(ctrl: AnalyseCtrl) {