anki/ts/card-info/Revlog.svelte
Matthias Metelka 8142176f84
Introduce new color palette using Sass maps (#2016)
* Remove --medium-border variable

* Implement color palette using Sass maps

I hand-picked the gray tones, the other colors are from the Tailwind CSS v3 palette.

Significant changes:
- light theme is brighter
- dark theme is darker
- borders are softer

I also deleted some platform- and night-mode-specific code.

* Use custom colors for note view switch

* Use same placeholder color for all inputs

* Skew color palette for more dark values

by removing gray[3], which wasn't used anywhere. Slight adjustments were made to the darker tones.

* Adjust frame- window- and border colors

* Give deck browser entries --frame-bg as background color

* Define styling for QComboBox and QLineEdit globally

* Experiment with CSS filter for inline-colors

Inside darker inputs, some colors like dark blue will be hard to read, so we could try to improve text-color contrast with global adjustments depending on the theme.

* Use different map structure for _vars.scss

after @hgiesel's idea: https://github.com/ankitects/anki/pull/2016#discussion_r947087871

* Move custom QLineEdit styles out of searchbar.py

* Merge branch 'main' into color-palette

* Revert QComboBox stylesheet override

* Align gray color palette more with macOS

* Adjust light theme

* Use --slightly-grey-text for options tab color

* Replace gray tones with more neutral values

* Improve categorization of global colors

by renaming almost all of them and sorting them into separate maps.

* Saturate highlight-bg in light theme

* Tweak gray tones

* Adjust box-shadow of EditingArea to make fields look inset

* Add Sass functions to access color palette and semantic variables

in response to https://github.com/ankitects/anki/pull/2016#issuecomment-1220571076

* Showcase use of access functions in several locations

@hgiesel in buttons.scss I access the color palette directly. Is this what you meant by "... keep it local to the component, and possibly make it global at a later time ..."?

* Fix focus box shadow transition and remove default shadow for a cleaner look

I couldn't quite get the inset look the way I wanted, because inset box-shadows do not respect the border radius, therefore causing aliasing.

* Tweak light theme border and shadow colors

* Add functions and colors to base_lib

* Add vars_lib as dependency to base_lib and button_mixins_lib

* Improve uses of default-themed variables

* Use old --frame-bg color and use darker tone for canvas-default

* Return CSS var by default and add palette-of function for raw value

* Showcase use of palette-of function

The #{...} syntax is required only because the use cases are CSS var definitions. In other cases a simple palette-of(keyword, theme) would suffice.

* Light theme: decrease brightness of canvas-default and adjust fg-default

* Use canvas-inset variable for switch knob

* Adjust light theme

* Add back box-shadow to EditingArea

* Light theme: darken background and flatten transition

also set hue and saturation of gray-8 to 0 (like all the other grays).

* Reduce flag colors to single default value

* Tweak card/note accent colors

* Experiment with inset look for fields again

Is this too dark in night mode? It's the same color used for all other text inputs.

* Dark theme: make border-default one shade darker

* Tweak inset shadow color

* Dark theme: make border-faint darker than canvas-default

meaning two shades darker than it currently was.

* Fix PlainTextInput not expanding

* Dark theme: use less saturated flag colors

* Adjust gray tones

* Fix nested variables not getting extracted correctly

* Rename canvas-outset to canvas-elevated

* Light theme: darken canvas-default

* Make canvas-elevated a bit darker

* Rename variables and use them in various components

* Refactor button mixins

* Remove fusion vars from Anki

* Adjust button gradients

* Refactor button mixins

* Fix deck browser table td background color

* Use color function in buttons.scss

* Rework QTabWidget stylesheet

* Fix crash on browser open

* Perfect QTableView header

* Fix bottom toolbar button gradient

* Fix focus outline of bottom toolbar buttons

* Fix custom webview scrollbar

* Fix uses of vars in various webviews

The command @use vars as * lead to repeated inclusion of the CSS vars.

* Enable primary button color with mixin

* Run prettier

* Fix Python code style issues

* Tweak colors

* Lighten scrollbar shades in light theme

* Fix code style issues caused by merge

* Fix harsh border color in editor

caused by leftover --medium-border variables, probably introduced with a merge commit.

* Compile Sass before extracting Python colors/props

This means the Python side doesn't need to worry about the map structure and Sass functions, just copy the output CSS values.

* Desaturate primary button colors by 10%

* Convert accidentally capitalized variable names to lowercase

* Simplify color definitions with qcolor function

* Remove default border-focus variable

* Remove redundant colon

* Apply custom scrollbar CSS only on Windows and Linux

* Make border-subtle color brighter than background in dark theme

* Make border-subtle color a shade brighter in light theme

* Use border-subtle for NoteEditor and EditorToolbar border

* Small patches
2022-09-16 14:11:18 +10:00

198 lines
5.8 KiB
Svelte

<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import * as tr2 from "../lib/ftl";
import { Stats } from "../lib/proto";
import { timeSpan, Timestamp } from "../lib/time";
type StatsRevlogEntry = Stats.CardStatsResponse.StatsRevlogEntry;
export let revlog: StatsRevlogEntry[];
function reviewKindClass(entry: StatsRevlogEntry): string {
switch (entry.reviewKind) {
case Stats.RevlogEntry.ReviewKind.LEARNING:
return "revlog-learn";
case Stats.RevlogEntry.ReviewKind.REVIEW:
return "revlog-review";
case Stats.RevlogEntry.ReviewKind.RELEARNING:
return "revlog-relearn";
}
return "";
}
function reviewKindLabel(entry: StatsRevlogEntry): string {
switch (entry.reviewKind) {
case Stats.RevlogEntry.ReviewKind.LEARNING:
return tr2.cardStatsReviewLogTypeLearn();
case Stats.RevlogEntry.ReviewKind.REVIEW:
return tr2.cardStatsReviewLogTypeReview();
case Stats.RevlogEntry.ReviewKind.RELEARNING:
return tr2.cardStatsReviewLogTypeRelearn();
case Stats.RevlogEntry.ReviewKind.FILTERED:
return tr2.cardStatsReviewLogTypeFiltered();
case Stats.RevlogEntry.ReviewKind.MANUAL:
return tr2.cardStatsReviewLogTypeManual();
}
}
function ratingClass(entry: StatsRevlogEntry): string {
if (entry.buttonChosen === 1) {
return "revlog-ease1";
}
return "";
}
interface RevlogRow {
date: string;
time: string;
reviewKind: string;
reviewKindClass: string;
rating: number;
ratingClass: string;
interval: string;
ease: string;
takenSecs: string;
}
function revlogRowFromEntry(entry: StatsRevlogEntry): RevlogRow {
const timestamp = new Timestamp(entry.time);
return {
date: timestamp.dateString(),
time: timestamp.timeString(),
reviewKind: reviewKindLabel(entry),
reviewKindClass: reviewKindClass(entry),
rating: entry.buttonChosen,
ratingClass: ratingClass(entry),
interval: timeSpan(entry.interval),
ease: entry.ease ? `${entry.ease / 10}%` : "",
takenSecs: timeSpan(entry.takenSecs, true),
};
}
$: revlogRows = revlog.map(revlogRowFromEntry);
</script>
{#if revlog.length > 0}
<div class="revlog-table">
<div class="column">
<div class="column-head">{tr2.cardStatsReviewLogDate()}</div>
<div class="column-content">
{#each revlogRows as row, _index}
<div>
<b>{row.date}</b>
<span class="hidden-xs">@ {row.time}</span>
</div>
{/each}
</div>
</div>
<div class="column hidden-xs">
<div class="column-head">{tr2.cardStatsReviewLogType()}</div>
<div class="column-content">
{#each revlogRows as row, _index}
<div class={row.reviewKindClass}>
{row.reviewKind}
</div>
{/each}
</div>
</div>
<div class="column">
<div class="column-head">{tr2.cardStatsReviewLogRating()}</div>
<div class="column-content">
{#each revlogRows as row, _index}
<div class={row.ratingClass}>{row.rating}</div>
{/each}
</div>
</div>
<div class="column">
<div class="column-head">{tr2.cardStatsInterval()}</div>
<div class="column-content right">
{#each revlogRows as row, _index}
<div>{row.interval}</div>
{/each}
</div>
</div>
<div class="column hidden-xs">
<div class="column-head">{tr2.cardStatsEase()}</div>
<div class="column-content">
{#each revlogRows as row, _index}
<div>{row.ease}</div>
{/each}
</div>
</div>
<div class="column">
<div class="column-head">{tr2.cardStatsReviewLogTimeTaken()}</div>
<div class="column-content right">
{#each revlogRows as row, _index}
<div>{row.takenSecs}</div>
{/each}
</div>
</div>
</div>
{/if}
<style lang="scss">
.revlog-table {
width: 100%;
max-width: 50em;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
white-space: nowrap;
}
.column {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&:not(:last-child) {
margin-right: 0.5em;
}
}
.column-head {
font-weight: bold;
}
.column-content {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
&.right {
align-items: flex-end;
}
> div:empty::after {
/* prevent collapsing of empty rows */
content: "\00a0";
}
}
.revlog-learn {
color: var(--state-new);
}
.revlog-review {
color: var(--state-review);
}
.revlog-relearn,
.revlog-ease1 {
color: var(--state-learn);
}
@media only screen and (max-device-width: 480px) and (orientation: portrait) {
.hidden-xs {
display: none;
}
}
</style>