diff --git a/res/css/_components.pcss b/res/css/_components.pcss index a29e7e98570..1ae7648ca30 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -209,7 +209,6 @@ @import "./views/elements/_SearchWarning.pcss"; @import "./views/elements/_ServerPicker.pcss"; @import "./views/elements/_SettingsFlag.pcss"; -@import "./views/elements/_Slider.pcss"; @import "./views/elements/_Spinner.pcss"; @import "./views/elements/_StyledCheckbox.pcss"; @import "./views/elements/_StyledRadioButton.pcss"; diff --git a/res/css/views/elements/_Slider.pcss b/res/css/views/elements/_Slider.pcss deleted file mode 100644 index 2477d542c64..00000000000 --- a/res/css/views/elements/_Slider.pcss +++ /dev/null @@ -1,126 +0,0 @@ -/* -Copyright 2020 The Matrix.org Foundation C.I.C. - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -.mx_Slider { - position: relative; - margin: 0; - flex-grow: 1; - - input[type="range"] { - height: 2.4em; - appearance: none; - width: 100%; - background: none; - font-size: 1em; /* set base multiplier for em units applied later */ - - --active-color: var(--cpd-color-bg-action-primary-rest); - --selection-dot-size: 2.4em; - - &:disabled { - cursor: not-allowed; - - --active-color: $slider-background-color; - } - - &:focus:not(:focus-visible) { - outline: none; - } - - &::-webkit-slider-runnable-track { - width: 100%; - height: 0.4em; - background: $slider-background-color; - border-radius: 5px; - border: 0 solid #000000; - } - &::-webkit-slider-thumb { - border: 0 solid #000000; - width: var(--selection-dot-size); - height: var(--selection-dot-size); - background: var(--active-color); - border-radius: 50%; - -webkit-appearance: none; - margin-top: calc(2px + 1.2em - var(--selection-dot-size)); - } - &:focus::-webkit-slider-runnable-track { - background: $slider-background-color; - } - - &::-moz-range-track { - width: 100%; - height: 0.4em; - background: $slider-background-color; - border-radius: 5px; - border: 0 solid #000000; - } - &::-moz-range-progress { - height: 0.4em; - background: var(--active-color); - border-radius: 5px; - border: 0 solid #000000; - } - &::-moz-range-thumb { - border: 0 solid #000000; - width: var(--selection-dot-size); - height: var(--selection-dot-size); - background: var(--active-color); - border-radius: 50%; - } - - &::-ms-track { - width: 100%; - height: 0.4em; - background: transparent; - border-color: transparent; - color: transparent; - } - &::-ms-fill-lower, - &::-ms-fill-upper { - background: $slider-background-color; - border: 0 solid #000000; - border-radius: 10px; - } - &::-ms-thumb { - margin-top: 1px; - width: var(--selection-dot-size); - height: var(--selection-dot-size); - background: var(--active-color); - border-radius: 50%; - } - &:focus::-ms-fill-upper { - background: $slider-background-color; - } - &::-ms-fill-lower, - &:focus::-ms-fill-lower { - background: var(--active-color); - } - } - - output { - position: absolute; - left: 50%; - transform: translateX(-50%); - - font-size: 1em; /* set base multiplier for em units applied later */ - text-align: center; - top: 3em; - - .mx_Slider_selection_label { - color: $muted-fg-color; - font: var(--cpd-font-body-md-regular); - } - } -} diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss index eb37ab743a1..f7c9a61c336 100644 --- a/res/themes/dark/css/_dark.pcss +++ b/res/themes/dark/css/_dark.pcss @@ -251,8 +251,6 @@ $progressbar-bg-color: var(--cpd-color-gray-200); $kbd-border-color: $strong-input-border-color; $visual-bell-bg-color: #800; $event-timestamp-color: $text-secondary-color; -$slider-background-color: $quinary-content; -$appearance-tab-border-color: $room-highlight-color; $composer-shadow-color: rgba(0, 0, 0, 0.28); $breadcrumb-placeholder-bg-color: #272c35; $theme-button-bg-color: #e3e8f0; diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss index d9db8465831..c1bf80310ad 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.pcss +++ b/res/themes/legacy-dark/css/_legacy-dark.pcss @@ -208,9 +208,6 @@ $breadcrumb-placeholder-bg-color: #272c35; $voice-record-stop-border-color: #6f7882; $voice-record-icon-color: #6f7882; -/* Appearance tab colors */ -$appearance-tab-border-color: $room-highlight-color; - $composer-shadow-color: tranparent; $codeblock-background-color: #2a3039; diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index 290027e5841..f277e07d8ca 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -269,9 +269,6 @@ $visual-bell-bg-color: #faa; $togglesw-off-color: #c1c9d6; $togglesw-ball-color: var(--cpd-color-bg-action-primary-rest); -/* Slider */ -$slider-background-color: #c1c9d6; - $progressbar-bg-color: rgba(141, 151, 165, 0.2); $authpage-bg-color: #2e3649; @@ -305,9 +302,6 @@ $voice-record-live-circle-color: #ff4b55; $voice-record-stop-border-color: #e3e8f0; $voice-record-icon-color: $tertiary-fg-color; -/* FontSlider colors */ -$appearance-tab-border-color: $input-darker-bg-color; - $composer-shadow-color: tranparent; $codeblock-background-color: $header-panel-bg-color; diff --git a/res/themes/light-high-contrast/css/_light-high-contrast.pcss b/res/themes/light-high-contrast/css/_light-high-contrast.pcss index 396b4946996..6bfd5b8fd4f 100644 --- a/res/themes/light-high-contrast/css/_light-high-contrast.pcss +++ b/res/themes/light-high-contrast/css/_light-high-contrast.pcss @@ -31,7 +31,6 @@ $button-secondary-bg-color: $accent-fg-color; $message-action-bar-fg-color: $primary-content; $voice-record-stop-border-color: $quinary-content; $voice-record-icon-color: $tertiary-content; -$appearance-tab-border-color: $input-darker-bg-color; $eventbubble-reply-color: $quaternary-content; $roomtopic-color: $secondary-content; @@ -104,10 +103,6 @@ $accent-1400: var(--cpd-color-green-1400); background-color: $panel-actions !important; } -.mx_FontScalingPanel_fontSlider { - background-color: $panel-actions !important; -} - .mx_ThemeChoicePanel_themeSelectors > .mx_StyledRadioButton input[type="radio"]:disabled + div { border-color: $primary-content; } diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index a201adbc44f..ee48dc80476 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -316,8 +316,6 @@ $progressbar-bg-color: var(--cpd-color-gray-200); $kbd-border-color: $strong-input-border-color; $visual-bell-bg-color: #faa; $event-timestamp-color: #acacac; -$slider-background-color: $togglesw-off-color; -$appearance-tab-border-color: $input-darker-bg-color; $composer-shadow-color: rgba(0, 0, 0, 0.04); $breadcrumb-placeholder-bg-color: #e8eef5; $theme-button-bg-color: $quinary-content; diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx deleted file mode 100644 index 44947aa6518..00000000000 --- a/src/components/views/elements/Slider.tsx +++ /dev/null @@ -1,88 +0,0 @@ -/* -Copyright 2020 The Matrix.org Foundation C.I.C. - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -import * as React from "react"; -import { ChangeEvent } from "react"; - -interface IProps { - // A callback for the selected value - onChange: (value: number) => void; - - // The current value of the slider - value: number; - - // The min and max of the slider - min: number; - max: number; - // The step size of the slider, can be a number or "any" - step: number | "any"; - - // A function for formatting the values - displayFunc: (value: number) => string; - - // Whether the slider is disabled - disabled: boolean; - - label: string; -} - -const THUMB_SIZE = 2.4; // em - -export default class Slider extends React.Component { - private get position(): number { - const { min, max, value } = this.props; - return Number(((value - min) * 100) / (max - min)); - } - - private onChange = (ev: ChangeEvent): void => { - this.props.onChange(parseInt(ev.target.value, 10)); - }; - - public render(): React.ReactNode { - let selection: JSX.Element | undefined; - - if (!this.props.disabled) { - const position = this.position; - selection = ( - - {this.props.value} - - ); - } - - return ( -
- - {selection} -
- ); - } -}