luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Moving more css aside components

Browse source
This commit is contained in:
Jesús Espino 2020-10-25 22:25:55 +01:00
parent c5ad9361ab
commit 154a71574d
5 changed files with 77 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
webapp/src/components/sidebar.scss Normal file
View file

@ -0,0 +1,64 @@
.Sidebar {
flex: 0 0 230px;
display: flex;
flex-direction: column;
min-height: 100%;
background-color: rgb(247, 246, 243);
padding: 10px 0;
&.hidden {
position: absolute;
top: 0;
left: 0;
z-index: 15;
min-height: 0;
height: 50px;
width: 50px;
background: none;
padding: 0;
> div {
padding: 0;
margin: auto;
}
}
.octo-sidebar-header {
display: flex;
flex-direction: row;
font-weight: 600;
padding: 3px 20px;
margin-bottom: 5px;
}
.octo-sidebar-item {
display: flex;
flex-direction: row;
font-weight: 500;
padding: 3px 20px;
&.subitem {
color: rgba(25, 23, 18, 0.6);
font-weight: 400;
margin-left: 20px;
}
}
.octo-sidebar-title {
cursor: pointer;
flex-grow: 1;
}
.octo-sidebar-item {
&:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.octo-button {
&:hover {
background-color: rgba(0, 0, 0, 0.1);
}
}
}
}

6
webapp/src/components/sidebar.tsx
View file

@ -12,6 +12,8 @@ import MenuWrapper from '../widgets/menuWrapper'
import {WorkspaceTree} from '../viewModel/workspaceTree' import {WorkspaceTree} from '../viewModel/workspaceTree'
import {BoardView} from '../blocks/boardView' import {BoardView} from '../blocks/boardView'
import './sidebar.scss'
type Props = { type Props = {
showBoard: (id: string) => void showBoard: (id: string) => void
showView: (id: string, boardId?: string) => void showView: (id: string, boardId?: string) => void
@ -45,7 +47,7 @@ class Sidebar extends React.Component<Props, State> {
if (this.state.isHidden) { if (this.state.isHidden) {
const hamburgerRef = React.createRef<HTMLDivElement>() const hamburgerRef = React.createRef<HTMLDivElement>()
return ( return (
<div className='octo-sidebar hidden'> <div className='Sidebar octo-sidebar hidden'>
<div className='octo-sidebar-header'> <div className='octo-sidebar-header'>
<div <div
className='octo-button square' className='octo-button square'
@ -68,7 +70,7 @@ class Sidebar extends React.Component<Props, State> {
} }
return ( return (
<div className='octo-sidebar'> <div className='Sidebar octo-sidebar'>
<div className='octo-sidebar-header octo-hover-container'> <div className='octo-sidebar-header octo-hover-container'>
{'OCTO'} {'OCTO'}
<div className='octo-spacer'/> <div className='octo-spacer'/>

6
webapp/src/components/workspaceComponent.scss Normal file
View file

@ -0,0 +1,6 @@
.WorkspaceComponent {
flex: 1 1 auto;
display: flex;
flex-direction: row;
overflow: auto;
}

4
webapp/src/components/workspaceComponent.tsx
View file

@ -10,6 +10,8 @@ import BoardComponent from './boardComponent'
import {Sidebar} from './sidebar' import {Sidebar} from './sidebar'
import {TableComponent} from './tableComponent' import {TableComponent} from './tableComponent'
import './workspaceComponent.scss'
type Props = { type Props = {
workspaceTree: WorkspaceTree workspaceTree: WorkspaceTree
boardTree?: BoardTree boardTree?: BoardTree
@ -25,7 +27,7 @@ class WorkspaceComponent extends React.Component<Props> {
Utils.assert(workspaceTree) Utils.assert(workspaceTree)
const element = const element =
(<div className='octo-workspace'> (<div className='WorkspaceComponent'>
<Sidebar <Sidebar
showBoard={showBoard} showBoard={showBoard}
showView={showView} showView={showView}

73
webapp/static/main.css
View file

@ -70,79 +70,6 @@ hr {
overflow: auto; overflow: auto;
} }
/* Sidebar */
.octo-workspace {
flex: 1 1 auto;
display: flex;
flex-direction: row;
overflow: auto;
}
.octo-sidebar {
flex: 0 0 230px;
display: flex;
flex-direction: column;
min-height: 100%;
background-color: rgb(247, 246, 243);
padding: 10px 0;
}
.octo-sidebar.hidden {
position: absolute;
top: 0;
left: 0;
z-index: 15;
min-height: 0;
height: 50px;
width: 50px;
background: none;
padding: 0;
}
.octo-sidebar.hidden > div {
padding: 0;
margin: auto;
}
.octo-sidebar-header {
display: flex;
flex-direction: row;
font-weight: 600;
padding: 3px 20px;
margin-bottom: 5px;
}
.octo-sidebar-item {
display: flex;
flex-direction: row;
font-weight: 500;
padding: 3px 20px;
}
.octo-sidebar-item.subitem {
color: rgba(25, 23, 18, 0.6);
font-weight: 400;
margin-left: 20px;
}
.octo-sidebar-title {
cursor: pointer;
flex-grow: 1;
}
.octo-sidebar-item:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.octo-sidebar-item .octo-button:hover {
background-color: rgba(0, 0, 0, 0.1);
}
/* Main app */ /* Main app */
.octo-app { .octo-app {