self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2024-12-24 13:43:12 +02:00
Code Issues Releases Activity

Moving more css aside components

Browse Source
This commit is contained in:
Jesús Espino 2020-10-25 19:44:42 +01:00
parent 148a7f2ade
commit 03c6a3461f
6 changed files with 72 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
webapp/src/components/filterComponent.scss Normal file
View File

@ -0,0 +1,19 @@
.FilterComponent {
position: absolute;
top: 25px;
left: -200px;
min-width: 420px;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px;
background-color: #ffffff;
padding: 10px;
.octo-filterclause {
display: flex;
flex-direction: row;
> div {
display: flex;
flex-direction: row;
}
}
}

5
webapp/src/components/filterComponent.tsx
View File

@ -14,6 +14,8 @@ import {Utils} from '../utils'
import MenuWrapper from '../widgets/menuWrapper'
import Menu from '../widgets/menu'
import './filterComponent.scss'
type Props = {
boardTree: BoardTree
onClose: () => void
@ -74,8 +76,7 @@ class FilterComponent extends React.Component<Props> {
return (
<div
className='octo-modal octo-filter-dialog'
style={{position: 'absolute', top: 25, left: -200}}
className='FilterComponent'
ref={this.node}
>
{filters.map((filter) => {

11
webapp/src/widgets/menu.tsx
View File

@ -2,6 +2,8 @@
// See LICENSE.txt for license information.
import React from 'react'
import Switch from './switch'
type MenuOptionProps = {
id: string,
name: string,
@ -96,11 +98,10 @@ class SwitchOption extends React.Component<SwitchOptionProps> {
>
<div className='menu-name'>{name}</div>
{icon && <div className={`icon ${icon}`}/>}
<div className={isOn ? 'octo-switch on' : 'octo-switch'}>
<div
className='octo-switch-inner'
/>
</div>
<Switch
isOn={isOn}
onChanged={() => {}}
/>
</div>
)
}

30
webapp/src/widgets/switch.scss Normal file
View File

@ -0,0 +1,30 @@
.Switch {
display: flex;
flex-shrink: 0;
box-sizing: content-box;
height: 14px;
width: 26px;
border-radius: 44px;
padding: 2px;
background-color: rgba(135, 131, 120, 0.3);
transition: background 200ms ease 0s, box-shadow 200ms ease 0s;
&.on {
background-color: rgba(46, 170, 220);
.octo-switch-inner {
transform: translateX(12px) translateY(0px);
}
}
.octo-switch-inner {
width: 14px;
height: 14px;
border-radius: 44px;
background: white;
transition: transform 200ms ease-out 0s, background 200ms ease-out 0s;
transform: translateX(0px) translateY(0px);
}
}

45
webapp/src/components/switch.tsx → webapp/src/widgets/switch.tsx
View File

@ -2,10 +2,11 @@
// See LICENSE.txt for license information.
import React from 'react'
import './switch.scss'
type Props = {
onChanged: (isOn: boolean) => void
isOn: boolean
style?: React.CSSProperties
}
type State = {
@ -13,15 +14,12 @@ type State = {
}
// Switch is an on-off style switch / checkbox
class Switch extends React.Component<Props, State> {
export default class Switch extends React.Component<Props, State> {
static defaultProps = {
isMarkdown: false,
isMultiline: false,
}
elementRef = React.createRef<HTMLDivElement>()
innerElementRef = React.createRef<HTMLDivElement>()
constructor(props: Props) {
super(props)
this.state = {isOn: props.isOn}
@ -31,35 +29,20 @@ class Switch extends React.Component<Props, State> {
return true
}
focus(): void {
this.elementRef.current.focus()
// Put cursor at end
document.execCommand('selectAll', false, null)
document.getSelection().collapseToEnd()
}
render(): JSX.Element {
const {style} = this.props
const {isOn} = this.state
const className = isOn ? 'octo-switch on' : 'octo-switch'
const element =
(<div
ref={this.elementRef}
className={className}
style={style}
onClick={() => {
this.onClicked()
}}
>
<div
ref={this.innerElementRef}
className='octo-switch-inner'
/>
</div>)
return element
const className = isOn ? 'Switch on' : 'Switch'
return (
<div
className={className}
onClick={() => {
this.onClicked()
}}
>
<div className='octo-switch-inner'/>
</div>
)
}
private async onClicked() {

68
webapp/static/main.css
View File

@ -326,42 +326,6 @@ hr {
background-color: #507090;
}
/*-- Modal --*/
.octo-modal-back {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(90, 90, 90, 0.1);
}
.octo-modal {
position: absolute;
z-index: 10;
min-width: 180px;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px;
background-color: #ffffff;
}
/*-- Filter modal dialog --*/
.octo-filter-dialog {
min-width: 420px;
padding: 10px;
}
.octo-filterclause {
display: flex;
flex-direction: row;
}
.octo-filterclause > div {
display: flex;
flex-direction: row;
}
/*-- Menu --*/
.menu {
@ -666,38 +630,6 @@ hr {
padding: 0;
}
/* Switch */
.octo-switch {
display: flex;
flex-shrink: 0;
box-sizing: content-box;
height: 14px;
width: 26px;
border-radius: 44px;
padding: 2px;
background-color: rgba(135, 131, 120, 0.3);
transition: background 200ms ease 0s, box-shadow 200ms ease 0s;
}
.octo-switch-inner {
width: 14px;
height: 14px;
border-radius: 44px;
background: white;
transition: transform 200ms ease-out 0s, background 200ms ease-out 0s;
transform: translateX(0px) translateY(0px);
}
.octo-switch.on {
background-color: rgba(46, 170, 220);
}
.octo-switch.on .octo-switch-inner {
transform: translateX(12px) translateY(0px);
}
/* Flash Panel */
.flashPanel {