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 22:11:27 +01:00
parent 07f8f7eb55
commit 33a4b35464
3 changed files with 100 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
webapp/src/components/tableComponent.scss Normal file
View File

@ -0,0 +1,97 @@
.TableComponent {
.octo-table-cell {
flex: 0 0 auto;
display: flex;
flex-direction: row;
color: rgba(55, 53, 47);
border-right: solid 1px rgba(55, 53, 47, 0.09);
box-sizing: border-box;
padding: 5px 8px 6px 8px;
width: 150px;
min-height: 32px;
font-size: 14px;
line-height: 21px;
overflow: hidden;
position: relative;
.octo-icontitle {
.octo-icon {
min-width: 20px;
}
}
&.title-cell {
width: 280px;
}
&:focus-within {
background-color: rgba(46, 170, 220, 0.15);
border: 1px solid rgba(46, 170, 220, 0.6);
}
.octo-editable {
padding: 0 5px;
display: relative;
left: -5px;
}
.octo-editable.octo-editable.active {
overflow: hidden;
}
.octo-propertyvalue {
line-height: 17px;
}
.octo-button,
.octo-editable,
.octo-propertyvalue
{
text-align: left;
white-space: nowrap;
}
}
.octo-table-body {
display: flex;
flex-direction: column;
padding: 0 10px;
}
.octo-table-header,
.octo-table-row,
.octo-table-footer {
display: flex;
flex-direction: row;
border-bottom: solid 1px rgba(55, 53, 47, 0.09);
}
.octo-table-header {
.octo-table-cell {
color: rgba(55, 53, 47, 0.6);
.octo-label {
color: rgba(55, 53, 47, 0.6);
}
}
}
.octo-table-footer {
.octo-table-cell {
color: rgba(55, 53, 47, 0.6);
cursor: pointer;
width: 100%;
border-right: none;
padding-left: 15px;
&:hover {
background-color: rgba(55, 53, 47, 0.08);
}
}
}
}

4
webapp/src/components/tableComponent.tsx
View File

@ -20,6 +20,8 @@ import ViewHeader from './viewHeader'
import ViewTitle from './viewTitle'
import TableHeaderMenu from './tableHeaderMenu'
import './tableComponent.scss'
type Props = {
boardTree?: BoardTree
showView: (id: string) => void
@ -73,7 +75,7 @@ class TableComponent extends React.Component<Props, State> {
this.cardIdToRowMap.clear()
return (
<div className='octo-app'>
<div className='TableComponent octo-app'>
{this.state.shownCard &&
<RootPortal>
<CardDialog

90
webapp/static/main.css
View File

@ -396,11 +396,6 @@ hr {
margin-right: 15px;
}
.octo-table-cell .octo-icontitle .octo-icon {
min-width: 20px;
}
/*-- Property list --*/
.octo-propertyvalue {
@ -432,20 +427,6 @@ hr {
color: rgba(55, 53, 47, 0.4);
}
.octo-table-cell:focus-within {
background-color: rgba(46, 170, 220, 0.15);
border: 1px solid rgba(46, 170, 220, 0.6);
}
.octo-table-cell .octo-editable {
padding: 0 5px;
display: relative;
left: -5px;
}
.octo-table-cell .octo-editable.octo-editable.active {
overflow: hidden;
}
.octo-propertyvalue.octo-editable.active,
.octo-table-cell .octo-editable.active {
@ -453,77 +434,6 @@ hr {
box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
}
/* Table */
.octo-table-body {
display: flex;
flex-direction: column;
padding: 0 10px;
}
.octo-table-header,
.octo-table-row,
.octo-table-footer {
display: flex;
flex-direction: row;
border-bottom: solid 1px rgba(55, 53, 47, 0.09);
}
.octo-table-cell {
flex: 0 0 auto;
display: flex;
flex-direction: row;
color: rgba(55, 53, 47);
border-right: solid 1px rgba(55, 53, 47, 0.09);
box-sizing: border-box;
padding: 5px 8px 6px 8px;
width: 150px;
min-height: 32px;
font-size: 14px;
line-height: 21px;
overflow: hidden;
position: relative;
}
.octo-table-cell.title-cell {
width: 280px;
}
.octo-table-cell .octo-propertyvalue {
line-height: 17px;
}
.octo-table-header .octo-table-cell,
.octo-table-header .octo-table-cell .octo-label {
color: rgba(55, 53, 47, 0.6);
}
.octo-table-footer .octo-table-cell {
color: rgba(55, 53, 47, 0.6);
cursor: pointer;
width: 100%;
border-right: none;
padding-left: 15px;
}
.octo-table-footer .octo-table-cell:hover {
background-color: rgba(55, 53, 47, 0.08);
}
.octo-table-cell .octo-button,
.octo-table-cell .octo-editable,
.octo-table-cell .octo-propertyvalue
{
text-align: left;
white-space: nowrap;
}
.octo-button.octo-hovercontrol {
background: rgb(239, 239, 238);
}