Add DoubleProgressBar styles to Treedip

Copied style files and swatches from Svingle. Ticket: https://phabricator.wikimedia.org/T381396
wmde · Dec 10, 2024 · d26a008 · d26a008
1 parent 9246b09
commit d26a008
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 0 deletions.
diff --git a/src/themes/Treedip/ProgressBar/DoubleProgressBar.scss b/src/themes/Treedip/ProgressBar/DoubleProgressBar.scss
@@ -0,0 +1,76 @@
+@use 'src/components/ProgressBar/DoubleProgressBar';
+@use 'transitionsDouble';
+
+.wmde-banner {
+	@include DoubleProgressBar.layout;
+
+	.wmde-banner {
+		&-double-progress {
+			margin: 0;
+			font-weight: bold;
+			font-size: 12px;
+
+			&-amount,
+			&-time {
+				height: 24px;
+				line-height: 24px;
+				padding-right: 10px;
+				border-radius: 12px;
+
+				&-fill,
+				&-difference {
+					color: var( --double-progress-color );
+					height: 100%;
+					padding: 0 10px;
+				}
+
+				&-fill {
+					display: flex;
+					justify-content: right;
+				}
+			}
+
+			&-right-text {
+				float: right;
+				color: var( --double-progress-right-text-color );
+			}
+
+			&-amount {
+				margin-bottom: 5px;
+				background: var( --double-progress-time-background );
+
+				&-fill,
+				&-difference {
+					border-radius: 12px;
+				}
+
+				&-fill {
+					background: var( --double-progress-time-fill-background );
+					z-index: 2;
+				}
+
+				&-difference {
+					background: var( --double-progress-difference-background );
+					z-index: 1;
+					text-align: right;
+				}
+			}
+
+			&-time {
+				background: var( --double-progress-amount-background );
+
+				&-fill {
+					border-radius: 12px;
+					background: var( --double-progress-amount-fill-background );
+				}
+			}
+
+			&.is-late-progress {
+				.wmde-banner-double-progress-amount-fill,
+				.wmde-banner-double-progress-time-fill {
+					justify-content: space-between;
+				}
+			}
+		}
+	}
+}
diff --git a/src/themes/Treedip/ProgressBar/_transitionsDouble.scss b/src/themes/Treedip/ProgressBar/_transitionsDouble.scss
@@ -0,0 +1,41 @@
+@use '../variables/globals';
+
+.wmde-banner {
+	&-double-progress-amount-difference,
+	&-double-progress-time-fill,
+	&-double-progress-amount-fill {
+		transition: width 3000ms globals.$banner-easing;
+		width: 0;
+		max-width: 100%;
+	}
+
+	&-double-progress-amount-difference,
+	&-double-progress-time-fill {
+		min-width: 80px;
+	}
+
+	&-double-progress-amount-fill {
+		min-width: 80px;
+	}
+
+	&-double-progress .text-fade {
+		opacity: 0;
+		transition: opacity 300ms globals.$banner-easing;
+		transition-delay: 3000ms;
+	}
+
+	&--visible {
+		.wmde-banner-double-progress-amount-difference,
+		.wmde-banner-double-progress-time-fill {
+			width: var( --wmde-banner-progress-bar-time-width );
+		}
+
+		.wmde-banner-double-progress-amount-fill {
+			width: var( --wmde-banner-progress-bar-width );
+		}
+
+		.wmde-banner-double-progress .text-fade {
+			opacity: 1;
+		}
+	}
+}
diff --git a/src/themes/Treedip/swatches/color_dark.scss b/src/themes/Treedip/swatches/color_dark.scss
@@ -12,15 +12,18 @@ $grey700: #292929;
 $grey800: #1f1f1f;
 
 $red100: #ff8888;
+$red500: #fb4848;
 $red600: #e60f00;
 
+$blue100: #dff1ff;
 $blue600: #547fd5;
 $blue700: #436fc7;
 $blue800: #20303f;
 
 @mixin swatch(
 	$slider: false,
 	$progress-bar: false,
+	$double-progress-bar: false,
 	$select-group: false,
 	$select-group-bubble: false,
 	$select-group-button: false,
@@ -84,6 +87,17 @@ $blue800: #20303f;
 		--progress-bar-fill-color: #{$white};
 	}
 
+	@if $double-progress-bar {
+		--double-progress-color: #{$white};
+		--double-progress-time-background: #{$red100};
+		--double-progress-time-fill-background: #{$red600};
+		--double-progress-difference-background: #{$red500};
+
+		--double-progress-amount-background: #{$blue100};
+		--double-progress-amount-fill-background: #{$blue700};
+		--double-progress-right-text-color: #{$grey700};
+	}
+
 	@if $select-group {
 		--select-group-background: #{$white};
 		--select-group-radio-label-color: #{$black};

diff --git a/src/themes/Treedip/swatches/color_light.scss b/src/themes/Treedip/swatches/color_light.scss
@@ -10,15 +10,19 @@ $grey500: #808080;
 $grey600: #747474;
 $grey700: #202122;
 
+$red100: #ffe8e8;
+$red500: #fb4848;
 $red600: #990a00;
 $red700: #7d0a00;
 
+$blue100: #dff1ff;
 $blue600: #4465a7;
 $blue700: #2a4b8d;
 
 @mixin swatch(
 	$slider: false,
 	$progress-bar: false,
+	$double-progress-bar: false,
 	$select-group: false,
 	$select-group-bubble: false,
 	$select-group-button: false,
@@ -83,6 +87,17 @@ $blue700: #2a4b8d;
 		--progress-bar-fill-color: #{$white};
 	}
 
+	@if $double-progress-bar {
+		--double-progress-color: #{$white};
+		--double-progress-time-background: #{$red100};
+		--double-progress-time-fill-background: #{$red600};
+		--double-progress-difference-background: #{$red500};
+
+		--double-progress-amount-background: #{$blue100};
+		--double-progress-amount-fill-background: #{$blue700};
+		--double-progress-right-text-color: #{$grey700};
+	}
+
 	@if $select-group {
 		--select-group-background: #{$white};
 		--select-group-radio-label-color: #{$black};

diff --git a/src/themes/Treedip/swatches/skin_default.scss b/src/themes/Treedip/swatches/skin_default.scss
@@ -2,6 +2,7 @@
 
 $slider: false !default;
 $progress-bar: false !default;
+$double-progress-bar: false !default;
 $select-group: false !default;
 $select-group-bubble: false !default;
 $select-group-button: false !default;
@@ -16,6 +17,7 @@ $minimised-banner: false !default;
 	@include color_light.swatch(
 		$slider,
 		$progress-bar,
+		$double-progress-bar,
 		$select-group,
 		$select-group-bubble,
 		$select-group-button,

diff --git a/src/themes/Treedip/swatches/skin_vector-2022.scss b/src/themes/Treedip/swatches/skin_vector-2022.scss
@@ -3,6 +3,7 @@
 
 $slider: false !default;
 $progress-bar: false !default;
+$double-progress-bar: false !default;
 $select-group: false !default;
 $select-group-bubble: false !default;
 $select-group-button: false !default;
@@ -16,6 +17,7 @@ $fallback-banner: false !default;
 	@include color_light.swatch(
 		$slider,
 		$progress-bar,
+		$double-progress-bar,
 		$select-group,
 		$select-group-bubble,
 		$select-group-button,
@@ -31,6 +33,7 @@ $fallback-banner: false !default;
 	@include color_dark.swatch(
 		$slider,
 		$progress-bar,
+		$double-progress-bar,
 		$select-group,
 		$select-group-bubble,
 		$select-group-button,
@@ -47,6 +50,7 @@ $fallback-banner: false !default;
 		@include color_dark.swatch(
 			$slider,
 			$progress-bar,
+			$double-progress-bar,
 			$select-group,
 			$select-group-bubble,
 			$select-group-button,
@@ -62,6 +66,7 @@ $fallback-banner: false !default;
 		@include color_light.swatch(
 			$slider,
 			$progress-bar,
+			$double-progress-bar,
 			$select-group,
 			$select-group-bubble,
 			$select-group-button,