From 97e2af124cb83201fb3afb18b9c2f275f73fc14f Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Fri, 24 Jul 2020 13:59:32 +0200 Subject: [PATCH] Circular progress (#3257) --- packages/page-poll/src/index.tsx | 15 +++- packages/page-settings/src/I18n/index.tsx | 49 ++++++----- packages/react-components/src/CardSummary.tsx | 6 +- packages/react-components/src/Progress.tsx | 81 +++++++++++++++++-- packages/react-components/src/Spinner.tsx | 1 - packages/react-components/src/styles/index.ts | 4 - packages/react-components/src/styles/theme.ts | 4 - 7 files changed, 120 insertions(+), 40 deletions(-) diff --git a/packages/page-poll/src/index.tsx b/packages/page-poll/src/index.tsx index 444431ac56..4f570fa8c8 100644 --- a/packages/page-poll/src/index.tsx +++ b/packages/page-poll/src/index.tsx @@ -134,11 +134,11 @@ function PollApp ({ className }: Props): React.ReactElement { ?
: (
+ -
) } @@ -260,11 +260,20 @@ export default React.memo(styled(PollApp)` } .result { - margin: 2.2rem 0 0 0; + align-items: center; + display: flex; + justify-content: flex-end; + margin: 0; text-align: right; + .ui--FormatBalance { + font-size: 1.2rem; + font-weight: 100; + line-height: 1; + } + .ui--Progress { - margin-bottom: 0.5rem; + margin: 0.75rem; } } `); diff --git a/packages/page-settings/src/I18n/index.tsx b/packages/page-settings/src/I18n/index.tsx index 81f187bf3d..d40044cdfb 100644 --- a/packages/page-settings/src/I18n/index.tsx +++ b/packages/page-settings/src/I18n/index.tsx @@ -216,34 +216,38 @@ function Translate ({ className }: Props): React.ReactElement {
- ('the language to display translations for')} - onChange={setLng} - options={keys} - value={lng} - /> +
+ ('the language to display translations for')} + onChange={setLng} + options={keys} + value={lng} + /> + {t('{{done}}/{{total}}, {{progress}}% done', { replace: progressDisplay(modProgress) })} +
- {t('{{done}}/{{total}}, {{progress}}% done', { replace: progressDisplay(modProgress) })} - ('the module to display strings for')} - onChange={setRecord} - options={modules} - value={record} - /> +
+ ('the module to display strings for')} + onChange={setRecord} + options={modules} + value={record} + /> + {t('{{done}}/{{total}}, {{progress}}% done', { replace: progressDisplay(allProgress[record]) })} +
- {t('{{done}}/{{total}}, {{progress}}% done', { replace: progressDisplay(allProgress[record]) })}
@@ -284,8 +288,17 @@ function Translate ({ className }: Props): React.ReactElement { } export default React.memo(styled(Translate)` - .ui--Progress:last-child { - margin: 0.25rem; + .ui--Column { + display: flex; + + > div:first-child { + flex: 1; + text-align: right; + } + } + + .ui--Progress { + margin: 0 0 0 0.25rem; } .toggleWrapper { diff --git a/packages/react-components/src/CardSummary.tsx b/packages/react-components/src/CardSummary.tsx index 10bb1499f5..77fec0bde2 100644 --- a/packages/react-components/src/CardSummary.tsx +++ b/packages/react-components/src/CardSummary.tsx @@ -79,8 +79,8 @@ function CardSummary ({ children, className = '', help, label, progress }: Props ) } - {progress && } + {progress && } ); } @@ -102,10 +102,10 @@ export default React.memo(styled(CardSummary)` } .ui--Progress { - margin: 0.2rem 0 -0.5rem; + margin: 0.5rem 0 0 0.75rem; } - > div { + > .ui--Labelled { font-size: 1.75rem; font-weight: 100; position: relative; diff --git a/packages/react-components/src/Progress.tsx b/packages/react-components/src/Progress.tsx index 8012522570..1beedc2aa9 100644 --- a/packages/react-components/src/Progress.tsx +++ b/packages/react-components/src/Progress.tsx @@ -28,21 +28,88 @@ function Progress ({ className = '', percent, total, value }: Props): React.Reac return null; } + const angle = width * 360 / 100; + const firstHalfAngle = angle <= 180 + ? angle + : 180; + const secondHalfAngle = angle <= 180 + ? 0 + : angle - 180; + return (
-
+
+
+
+
+
+
+
+
{width.toFixed(1)}%
+
); } export default React.memo(styled(Progress)` background: rgba(0, 0, 0, 0.05); - border-radius: 0.25rem; - margin: 1em 0 2.5em; - overflow: hidden; + border-radius: 100%; + height: 4.5rem; + position: relative; + width: 4.5rem; - > div { - height: 0.25rem; - min-width: 0; + .clip { + bottom: 0; + clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); + left: 0; + position: absolute; + right: 0; + top: 0; + + div { + border-radius: 100%; + bottom: 0; + clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); + left: 0; + position: absolute; + right: 0; + transform: rotate(0); + top: 0; + zoom: 1; + } + } + + .clip+.clip { + clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); + + div { + clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); + } + } + + .inner { + align-items: center; + background: rgba(245, 244, 243, 87.5%); + border-radius: 100%; + bottom: 0.375rem; + display: flex; + justify-content: center; + left: 0.375rem; + position: absolute; + right: 0.375rem; + top: 0.375rem; + + div { + line-height: 1; + font-family: sans-serif; + font-size: 1rem; + font-weight: 500; + } } `); diff --git a/packages/react-components/src/Spinner.tsx b/packages/react-components/src/Spinner.tsx index 46cb7f033e..3ded514208 100644 --- a/packages/react-components/src/Spinner.tsx +++ b/packages/react-components/src/Spinner.tsx @@ -47,7 +47,6 @@ export default React.memo(styled(Spinner)` img { margin: 0 auto; - opacity: 1; } } diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts index 2499eb2ab2..fe4326e066 100644 --- a/packages/react-components/src/styles/index.ts +++ b/packages/react-components/src/styles/index.ts @@ -71,10 +71,6 @@ export default createGlobalStyle` border-bottom-color: ${getHighlight}; } - .ui--Progress > div { - background-color: ${getHighlight} !important; - } - .ui.negative.button, .ui.buttons .negative.button { background: #666 !important; diff --git a/packages/react-components/src/styles/theme.ts b/packages/react-components/src/styles/theme.ts index 75a4c9b2b0..0d89884876 100644 --- a/packages/react-components/src/styles/theme.ts +++ b/packages/react-components/src/styles/theme.ts @@ -54,10 +54,6 @@ export default css` } } - .ui--Progress > div { - background-color: ${colorBtnDefault}; - } - .ui.modal > .header:not(.ui) { border-bottom-color: ${colorBtnDefault}; }