From bcbd413e571d772a4438f57138169ad1a6a3b5a8 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Wed, 31 Mar 2021 18:17:28 -0400 Subject: Definition collapsing when overflowing (#1575) * Add double-down-chevron.svg * Add options * Update dictionary importers * Update settings * Add support for collapsible definitions * Improve case when there is a very small amount of overflow * Fix incorrect enabled state of newly imported dictionaries --- ext/css/display.css | 71 ++++++++++++++++++++++++++++++++++++++++++++++++++++ ext/css/material.css | 1 + ext/css/settings.css | 39 +++++++++++++++++++++++++++++ 3 files changed, 111 insertions(+) (limited to 'ext/css') diff --git a/ext/css/display.css b/ext/css/display.css index 887a04a6..c8669fa2 100644 --- a/ext/css/display.css +++ b/ext/css/display.css @@ -101,6 +101,9 @@ --animation-duration: 0.125s; --animation-duration2: calc(2 * var(--animation-duration)); + --collapsible-definition-line-count: 3; + --collapsible-definition-test-offset: 0.2em; + /* Colors */ --background-color: #ffffff; --glossary-image-background-color: #eeeeee; @@ -1154,6 +1157,74 @@ button.action-button[data-icon=source-term]::before { opacity: 0; white-space: pre-wrap; } +.definition-item { + display: list-item; + position: relative; +} +.definition-item-inner.collapsible.collapsed { + max-height: calc(1em * var(--collapsible-definition-line-count) * var(--line-height)); + overflow: hidden; +} +.definition-item-inner.collapse-test { + max-height: calc(1em * var(--collapsible-definition-line-count) * var(--line-height) + var(--collapsible-definition-test-offset)); + overflow: hidden; +} +.definition-item-inner { + display: flex; + flex-flow: row nowrap; +} +.definition-item-content { + flex: 1 1 auto; + background-color: transparent; + transition: background-color var(--animation-duration) ease-in-out; +} +button.definition-item-expansion-button { + --button-content-color: var(--text-color-light4); + --button-border-color: transparent; + --button-background-color: transparent; + + --button-hover-content-color: var(--text-color-light1); + --button-hover-border-color: var(--accent-color-lighter); + --button-hover-background-color: var(--accent-color-lighter); + + --button-active-content-color: var(--text-color); + --button-active-border-color: var(--accent-color-light); + --button-active-background-color: var(--accent-color-light); + + --button-padding-vertical: 0; + --button-padding-horizontal: 0.125em; + + flex: 0 0 auto; + order: 1; + border-radius: 0; + border: 0; +} +.definition-item-inner:not(.collapsible)>button.definition-item-expansion-button { + display: none; +} +button.definition-item-expansion-button:hover+.definition-item-content, +button.definition-item-expansion-button:active+.definition-item-content, +button.definition-item-expansion-button:focus+.definition-item-content { + background-color: var(--accent-color-transparent25); +} +button.definition-item-expansion-button:focus:not(:focus-visible)+.definition-item-content { + background-color: transparent; +} +button.definition-item-expansion-button:focus:hover+.definition-item-content, +button.definition-item-expansion-button:focus:active+.definition-item-content, +button.definition-item-expansion-button:focus:focus-visible+.definition-item-content { + background-color: var(--accent-color-transparent25); +} +.definition-item-expansion-button-icon { + transform: rotate(0deg); + width: calc(16em / var(--font-size-no-units)); + height: calc(16em / var(--font-size-no-units)); + background-color: var(--button-current-content-color); + transition: background-color var(--animation-duration) ease-in-out; +} +.definition-item-inner.collapsible:not(.collapsed)>button.definition-item-expansion-button>.definition-item-expansion-button-icon { + transform: rotate(180deg); +} /* Frequencies */ diff --git a/ext/css/material.css b/ext/css/material.css index 703f1268..08345769 100644 --- a/ext/css/material.css +++ b/ext/css/material.css @@ -234,6 +234,7 @@ .icon[data-icon=question-mark-thick] { --icon-image: url(/images/question-mark-thick.svg); } .icon[data-icon=left-chevron] { --icon-image: url(/images/left-chevron.svg); } .icon[data-icon=right-chevron] { --icon-image: url(/images/right-chevron.svg); } +.icon[data-icon=double-down-chevron] { --icon-image: url(/images/double-down-chevron.svg); } .icon[data-icon=plus-thick] { --icon-image: url(/images/plus-thick.svg); } .icon[data-icon=clipboard] { --icon-image: url(/images/clipboard.svg); } .icon[data-icon=key] { --icon-image: url(/images/key.svg); } diff --git a/ext/css/settings.css b/ext/css/settings.css index e2485925..22439409 100644 --- a/ext/css/settings.css +++ b/ext/css/settings.css @@ -47,6 +47,7 @@ --outline-item-icon-size: 32px; --input-short-width: calc(var(--input-width-large) / 2 - var(--padding) / 2); --input-short-height: 24px; + --input-medium-width: calc(var(--input-width-large) * 0.75); --fab-button-size: 56px; --fab-button-padding: 16px; --modal-width: 600px; @@ -657,6 +658,11 @@ input[type=number].short-width, select.short-width { width: var(--input-short-width); } +input[type=text].medium-width, +input[type=number].medium-width, +select.medium-width { + width: var(--input-medium-width); +} input[type=text].short-height, input[type=number].short-height, select.short-height { @@ -2125,6 +2131,39 @@ button.hotkey-list-item-enabled-button[data-scope-count='0'] { background-color: var(--warning-color); } +.collapsible-dictionary-list { + width: 100%; + display: flex; + flex-flow: column nowrap; + align-items: stretch; +} +.collapsible-dictionary-item { + display: flex; + flex-flow: row nowrap; + align-items: center; + margin-left: calc(var(--modal-padding-horizontal) * -1); + margin-right: calc(var(--modal-padding-horizontal) * -1); + padding: var(--settings-group-inner-horizontal-padding-fourth) var(--modal-padding-horizontal); +} +.collapsible-dictionary-item:not(:first-child) { + border-top: var(--thin-border-size) solid var(--separator-color2); +} +.collapsible-dictionary-cell { + display: flex; + flex-flow: row nowrap; + align-items: center; +} +.collapsible-dictionary-cell:first-of-type { + flex: 1 1 auto; +} +.collapsible-dictionary-cell:not(:first-of-type) { + flex: 0 0 auto; + margin-left: 1em; +} +.collapsible-dictionary-cell-label { + margin-left: 0.375em; +} + /* Generic layouts */ .margin-above { -- cgit v1.2.3