OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Remove references to font

pull/21833/head
Jorik Schellekens 2020-04-21 11:01:52 +01:00
parent db1141b162
commit dd841fcde9
2 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
res/css/structures/_FontSlider.scss
View File

@ -14,20 +14,20 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_fontSlider { .mx_Slider {
position: relative; position: relative;
margin: 0px; margin: 0px;
@mixin mx_Settings_fullWidthField; @mixin mx_Settings_fullWidthField;
} }
.mx_fontSlider_dotContainer { .mx_Slider_dotContainer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
} }
.mx_fontSlider_bar { .mx_Slider_bar {
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
@ -37,12 +37,12 @@ limitations under the License.
align-items: center; align-items: center;
} }
.mx_fontSlider_bar > hr { .mx_Slider_bar > hr {
width: 100%; width: 100%;
border: 0.2rem solid $fontSlider-background-color; border: 0.2rem solid $fontSlider-background-color;
} }
.mx_fontSlider_selection { .mx_Slider_selection {
display: flex; display: flex;
align-items: center; align-items: center;
width: calc(100% - 2.2rem); width: calc(100% - 2.2rem);
@ -50,7 +50,7 @@ limitations under the License.
position: absolute; position: absolute;
} }
.mx_fontSlider_selectionDot { .mx_Slider_selectionDot {
transition: left 0.25s; transition: left 0.25s;
position: absolute; position: absolute;
width: 1.1rem; width: 1.1rem;
@ -61,13 +61,13 @@ limitations under the License.
z-index: 10; z-index: 10;
} }
.mx_fontSlider_selection > hr { .mx_Slider_selection > hr {
transition: width 0.25s; transition: width 0.25s;
margin: 0; margin: 0;
border: 0.2rem solid $fontSlider-selection-color; border: 0.2rem solid $fontSlider-selection-color;
} }
.mx_fontSlider_dot { .mx_Slider_dot {
transition: background-color 0.2s ease-in; transition: background-color 0.2s ease-in;
height: 1rem; height: 1rem;
width: 1rem; width: 1rem;
@ -77,11 +77,11 @@ limitations under the License.
z-index: 0; z-index: 0;
} }
.mx_fontSlider_dotActive { .mx_Slider_dotActive {
background-color: $fontSlider-selection-color; background-color: $fontSlider-selection-color;
} }
.mx_fontSlider_dotValue { .mx_Slider_dotValue {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

22
src/components/structures/FontSlider.tsx
View File

@ -18,8 +18,8 @@ import * as React from 'react';
import * as PropTypes from 'prop-types'; import * as PropTypes from 'prop-types';
type SliderProps = { type SliderProps = {
// A callback for the new value onclick // A callback for the selected value
updateFontSize: (size: number) => null; onSelectionChange: (value: number) => null;
// The current value of the slider // The current value of the slider
value: number; value: number;
@ -37,7 +37,7 @@ export default class Slider extends React.Component<SliderProps> {
static propTypes = { static propTypes = {
// A callback for the new value onclick // A callback for the new value onclick
updateFontSize: PropTypes.func, onSelectionChange: PropTypes.func,
// The current value of the slider // The current value of the slider
value: PropTypes.number, value: PropTypes.number,
@ -59,22 +59,22 @@ export default class Slider extends React.Component<SliderProps> {
const dots = this.props.values.map(v => const dots = this.props.values.map(v =>
<Dot active={v<=this.props.value} <Dot active={v<=this.props.value}
label={this.props.displayFunc(v)} label={this.props.displayFunc(v)}
onClick={() => this.props.updateFontSize(v)} onClick={() => this.props.onSelectionChange(v)}
key={v} key={v}
/>); />);
const offset = this._offset(this.props.values, this.props.value); const offset = this._offset(this.props.values, this.props.value);
return <div className="mx_fontSlider"> return <div className="mx_Slider">
<div> <div>
<div className="mx_fontSlider_bar"> <div className="mx_Slider_bar">
<hr /> <hr />
<div className="mx_fontSlider_selection"> <div className="mx_Slider_selection">
<div className="mx_fontSlider_selectionDot" style={{left: "calc(-0.55rem + " + offset + "%)"}} /> <div className="mx_Slider_selectionDot" style={{left: "calc(-0.55rem + " + offset + "%)"}} />
<hr style={{width: offset + "%"}} /> <hr style={{width: offset + "%"}} />
</div> </div>
</div> </div>
<div className="mx_fontSlider_dotContainer"> <div className="mx_Slider_dotContainer">
{dots} {dots}
</div> </div>
</div> </div>
@ -106,9 +106,9 @@ class Dot extends React.Component<DotProps> {
} }
render(): React.ReactNode { render(): React.ReactNode {
const className = "mx_fontSlider_dot" + (this.props.active? " mx_fontSlider_dotActive": ""); const className = "mx_Slider_dot" + (this.props.active? " mx_Slider_dotActive": "");
return <span onClick={this.props.onClick} className="mx_fontSlider_dotValue"> return <span onClick={this.props.onClick} className="mx_Slider_dotValue">
<div className={className} /> <div className={className} />
<div> <div>
{this.props.label} {this.props.label}