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

Initial support of themes

Browse source
This commit is contained in:
Jesús Espino 2020-10-27 11:40:32 +01:00
parent c165a2c77f
commit 5e6d676812
16 changed files with 152 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
webapp/src/components/boardCard.scss
View file

@ -8,15 +8,15 @@
border-radius: 3px; border-radius: 3px;
margin-bottom: 10px; margin-bottom: 10px;
padding: 7px 10px; padding: 7px 10px;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px; box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px;
cursor: pointer; cursor: pointer;
color: rgb(55, 53, 47); color: rgb(var(--main-fg));
transition: background 100ms ease-out 0s; transition: background 100ms ease-out 0s;
&:hover { &:hover {
background-color: #eeeeee; background-color: rgba(var(--main-fg), 0.1);
.optionsMenu { .optionsMenu {
display: block; display: block;
} }

2
webapp/src/components/button.scss
View file

@ -9,7 +9,7 @@
transition: background 100ms ease-out 0s; transition: background 100ms ease-out 0s;
&:hover { &:hover {
background-color: #eeeeee; background-color: rgba(var(--main-fg), 0.1);
} }
.octo-hovercontrol { .octo-hovercontrol {
background: rgb(239, 239, 238); background: rgb(239, 239, 238);

3
webapp/src/components/cardDetail.scss
View file

@ -39,8 +39,9 @@
width: 150px; width: 150px;
margin-right: 5px; margin-right: 5px;
color: #909090; color: #909090;
color: rgba(var(--main-fg), 0.6);
&.add-property { &.add-property {
color: rgba(55, 53, 37, 0.4); color: rgba(var(--main-fg), 0.4);
} }
} }
} }

2
webapp/src/components/comment.scss
View file

@ -40,7 +40,7 @@
} }
.comment-text { .comment-text {
color: rgb(55, 53, 47); color: rgb(var(--main-fg));
width: 100%; width: 100%;
padding-left: 25px; padding-left: 25px;
} }

2
webapp/src/components/commentsList.scss
View file

@ -17,7 +17,7 @@
} }
.newcomment { .newcomment {
color: rgba(55, 53, 47, 0.8); color: rgba(var(--main-fg), 0.8);
flex-grow: 1; flex-grow: 1;
margin-left: 5px; margin-left: 5px;
.octo-button { .octo-button {

6
webapp/src/components/dialog.scss
View file

@ -7,16 +7,16 @@
bottom: 0; bottom: 0;
z-index: 10; z-index: 10;
background-color: rgba(90, 90, 90, 0.5); background-color: rgba(var(--main-fg), 0.5);
} }
.dialog { .dialog {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #ffffff; background-color: rgb(var(--main-bg));
border-radius: 3px; border-radius: 3px;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px; box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px;
margin: 72px auto; margin: 72px auto;
padding: 0; padding: 0;
max-width: 975px; max-width: 975px;

4
webapp/src/components/filterComponent.scss
View file

@ -5,8 +5,8 @@
z-index: 10; z-index: 10;
min-width: 420px; min-width: 420px;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px; box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px;
background-color: #ffffff; background-color: rgb(var(--main-bg));
padding: 10px; padding: 10px;
.octo-filterclause { .octo-filterclause {

9
webapp/src/components/sidebar.scss
View file

@ -5,7 +5,8 @@
flex-direction: column; flex-direction: column;
min-height: 100%; min-height: 100%;
background-color: rgb(247, 246, 243); color: rgb(var(--sidebar-fg));
background-color: rgb(var(--sidebar-bg));
padding: 10px 0; padding: 10px 0;
&.hidden { &.hidden {
@ -40,7 +41,7 @@
font-weight: 500; font-weight: 500;
padding: 3px 20px; padding: 3px 20px;
&.subitem { &.subitem {
color: rgba(25, 23, 18, 0.6); color: rgba(var(--sidebar-fg), 0.6);
font-weight: 400; font-weight: 400;
margin-left: 20px; margin-left: 20px;
} }
@ -53,11 +54,11 @@
.octo-sidebar-item { .octo-sidebar-item {
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.05); background-color: rgba(var(--sidebar-fg), 0.05);
} }
.octo-button { .octo-button {
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(var(--sidebar-fg), 0.1);
} }
} }
} }

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

@ -4,6 +4,7 @@ import React from 'react'
import {FormattedMessage} from 'react-intl' import {FormattedMessage} from 'react-intl'
import {Archiver} from '../archiver' import {Archiver} from '../archiver'
import {mattermostTheme, darkTheme, lightTheme, setTheme} from '../theme'
import {Board, MutableBoard} from '../blocks/board' import {Board, MutableBoard} from '../blocks/board'
import {BoardTree} from '../viewModel/boardTree' import {BoardTree} from '../viewModel/boardTree'
import mutator from '../mutator' import mutator from '../mutator'
@ -226,6 +227,42 @@ class Sidebar extends React.Component<Props, State> {
/> />
)} )}
</FormattedMessage> </FormattedMessage>
<FormattedMessage
id='Sidebar.set-dark-theme'
defaultMessage='Set Dark Theme'
>
{(text: string) => (
<Menu.Text
id='dark-theme'
name={text}
onClick={async () => setTheme(darkTheme)}
/>
)}
</FormattedMessage>
<FormattedMessage
id='Sidebar.set-light-theme'
defaultMessage='Set Light Theme'
>
{(text: string) => (
<Menu.Text
id='light-theme'
name={text}
onClick={async () => setTheme(lightTheme)}
/>
)}
</FormattedMessage>
<FormattedMessage
id='Sidebar.set-mattermost-theme'
defaultMessage='Set Mattermost Theme'
>
{(text: string) => (
<Menu.Text
id='mattermost-theme'
name={text}
onClick={async () => setTheme(mattermostTheme)}
/>
)}
</FormattedMessage>
</Menu> </Menu>
</MenuWrapper> </MenuWrapper>
</div> </div>

14
webapp/src/components/tableComponent.scss
View file

@ -4,8 +4,8 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
color: rgba(55, 53, 47); color: rgb(var(--main-fg));
border-right: solid 1px rgba(55, 53, 47, 0.09); border-right: solid 1px rgba(var(--main-fg), 0.09);
box-sizing: border-box; box-sizing: border-box;
padding: 5px 8px 6px 8px; padding: 5px 8px 6px 8px;
@ -68,28 +68,28 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
border-bottom: solid 1px rgba(55, 53, 47, 0.09); border-bottom: solid 1px rgba(var(--main-fg), 0.09);
} }
.octo-table-header { .octo-table-header {
.octo-table-cell { .octo-table-cell {
color: rgba(55, 53, 47, 0.6); color: rgba(var(--main-fg), 0.6);
.octo-label { .octo-label {
color: rgba(55, 53, 47, 0.6); color: rgba(var(--main-fg), 0.6);
} }
} }
} }
.octo-table-footer { .octo-table-footer {
.octo-table-cell { .octo-table-cell {
color: rgba(55, 53, 47, 0.6); color: rgba(var(--main-fg), 0.6);
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
border-right: none; border-right: none;
padding-left: 15px; padding-left: 15px;
&:hover { &:hover {
background-color: rgba(55, 53, 47, 0.08); background-color: rgba(var(--main-fg), 0.08);
} }
} }
} }

8
webapp/src/components/viewHeader.tsx
View file

@ -116,7 +116,7 @@ class ViewHeader extends React.Component<Props, State> {
return ( return (
<div className='ViewHeader'> <div className='ViewHeader'>
<Editable <Editable
style={{color: '#000000', fontWeight: 600}} style={{color: 'rgb(var(--main-fg))', fontWeight: 600}}
text={activeView.title} text={activeView.title}
placeholderText='Untitled View' placeholderText='Untitled View'
onChanged={(text) => { onChanged={(text) => {
@ -126,7 +126,7 @@ class ViewHeader extends React.Component<Props, State> {
<MenuWrapper> <MenuWrapper>
<div <div
className='octo-button' className='octo-button'
style={{color: '#000000', fontWeight: 600}} style={{color: 'rgb(var(--main-fg))', fontWeight: 600}}
> >
<div className='imageDropdown'/> <div className='imageDropdown'/>
</div> </div>
@ -180,7 +180,7 @@ class ViewHeader extends React.Component<Props, State> {
values={{ values={{
property: ( property: (
<span <span
style={{color: '#000000'}} style={{color: 'rgb(var(--main-fg))'}}
id='groupByLabel' id='groupByLabel'
> >
{boardTree.groupByProperty?.name} {boardTree.groupByProperty?.name}
@ -268,7 +268,7 @@ class ViewHeader extends React.Component<Props, State> {
ref={this.searchFieldRef} ref={this.searchFieldRef}
text={boardTree.getSearchText()} text={boardTree.getSearchText()}
placeholderText={intl.formatMessage({id: 'ViewHeader.search-text', defaultMessage: 'Search text'})} placeholderText={intl.formatMessage({id: 'ViewHeader.search-text', defaultMessage: 'Search text'})}
style={{color: '#000000'}} style={{color: 'rgb(var(--main-fg))'}}
onChanged={(text) => { onChanged={(text) => {
this.searchChanged(text) this.searchChanged(text)
}} }}

2
webapp/src/main.tsx
View file

@ -4,9 +4,11 @@ import React from 'react'
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
import App from './app' import App from './app'
import {setTheme, lightTheme} from './theme'
import './styles/main.scss' import './styles/main.scss'
import './styles/colors.scss' import './styles/colors.scss'
import './styles/images.scss' import './styles/images.scss'
setTheme(lightTheme)
ReactDOM.render(<App/>, document.getElementById('octo-tasks-app')) ReactDOM.render(<App/>, document.getElementById('octo-tasks-app'))

49
webapp/src/styles/main.scss
View file

@ -1,3 +1,12 @@
:root {
--main-bg: 255, 255, 255;
--main-fg: 55, 53, 47;
--button-bg: 80, 170, 221;
--button-fg: 255, 255, 255;
--sidebar-bg: '247, 246, 243';
--sidebar-fg: '55, 53, 47';
}
* { * {
box-sizing: border-box; box-sizing: border-box;
outline: 0; outline: 0;
@ -10,7 +19,13 @@ html, body {
width: 100%; width: 100%;
height: 100%; height: 100%;
color: rgb(55, 53, 47); color: rgb(var(--main-fg));
background: rgb(var(--main-bg));
}
input {
background: rgb(var(--main-bg));
color: rgb(var(--main-fg));
} }
body { body {
@ -20,7 +35,7 @@ body {
/* -webkit-font-smoothing: auto; */ /* -webkit-font-smoothing: auto; */
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
--cursor-color: rgb(55, 53, 47); --cursor-color: rgb(var(--main-fg));
} }
a { a {
@ -34,8 +49,8 @@ hr {
width: 100%; width: 100%;
height: 1px; height: 1px;
border: none; border: none;
color: rgba(55, 53, 47, 0.09); color: rgba(var(--main-fg), 0.09);
background-color: rgba(55, 53, 47, 0.09); background-color: rgba(var(--main-fg), 0.09);
margin-bottom: 8px; margin-bottom: 8px;
} }
@ -96,7 +111,7 @@ hr {
padding: 0 5px; padding: 0 5px;
border-radius: 3px; border-radius: 3px;
line-height: 20px; line-height: 20px;
color: rgb(55, 53, 47); color: rgb(var(--main-fg));
white-space: nowrap white-space: nowrap
} }
@ -116,17 +131,17 @@ hr {
transition: background 100ms ease-out 0s; transition: background 100ms ease-out 0s;
&:hover { &:hover {
background-color: #eeeeee; background-color: rgba(var(--main-fg), 0.1);
} }
} }
.filled { .filled {
color: #ffffff; color: #ffffff;
background-color: #50aadd; background-color: rgb(var(--button-bg));
padding: 2px 10px; padding: 2px 10px;
&:hover { &:hover {
background-color: #507090; background-color: rgb(var(--button-bg), 0.8);
} }
} }
@ -139,7 +154,7 @@ hr {
min-height: 30px; min-height: 30px;
width: 100%; width: 100%;
color:rgba(55, 53, 47, 0.4); color:rgba(var(--main-fg), 0.4);
} }
.octo-icon { .octo-icon {
@ -164,10 +179,10 @@ hr {
/*-- Property list --*/ /*-- Property list --*/
.octo-propertyvalue { .octo-propertyvalue {
color: rgb(55, 53, 47); color: rgb(var(--main-fg));
padding: 0 5px; padding: 0 5px;
&.empty { &.empty {
color: rgba(55, 53, 47, 0.4); color: rgba(var(--main-fg), 0.4);
} }
} }
@ -182,13 +197,13 @@ hr {
} }
.octo-placeholder { .octo-placeholder {
color: rgba(55, 53, 47, 0.4); color: rgba(var(--main-fg), 0.4);
} }
[contentEditable=true]:empty:before{ [contentEditable=true]:empty:before{
content: attr(placeholder); content: attr(placeholder);
display: block; display: block;
color: rgba(55, 53, 47, 0.4); color: rgba(var(--main-fg), 0.4);
} }
@ -200,7 +215,7 @@ hr {
.octo-button { .octo-button {
&.octo-hovercontrol { &.octo-hovercontrol {
background: rgb(239, 239, 238); background: rgba(var(--main-fg), 0.1);
} }
&.square { &.square {
@ -225,8 +240,8 @@ hr {
right: 6px; right: 6px;
top: 4px; top: 4px;
cursor: pointer; cursor: pointer;
background: rgb(239, 239, 238); background: rgb(var(--main-fg), 0.1);
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px; box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px;
padding: 0 5px; padding: 0 5px;
&.square { &.square {
@ -280,7 +295,7 @@ hr {
min-height: 30px; min-height: 30px;
width: 100%; width: 100%;
color:rgba(55, 53, 47, 0.4); color:rgba(var(--main-fg), 0.4);
} }
.octo-block img { .octo-block img {

47
webapp/src/theme.ts Normal file
View file

@ -0,0 +1,47 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
export type Theme = {
mainBg: string
mainFg: string
buttonBg: string
buttonFg: string
sidebarBg: string
sidebarFg: string
}
export const darkTheme = {
mainBg: '55, 53, 47',
mainFg: '200, 200, 200',
buttonBg: '80, 170, 221',
buttonFg: '255, 255, 255',
sidebarBg: '75, 73, 67',
sidebarFg: '255, 255, 255',
}
export const lightTheme = {
mainBg: '255, 255, 255',
mainFg: '55, 53, 47',
buttonBg: '80, 170, 221',
buttonFg: '255, 255, 255',
sidebarBg: '247, 246, 243',
sidebarFg: '55, 53, 47',
}
export const mattermostTheme = {
mainBg: '255, 255, 255',
mainFg: '55, 53, 47',
buttonBg: '22, 109, 224',
buttonFg: '255, 255, 255',
sidebarBg: '20, 93, 191',
sidebarFg: '255, 255, 255',
}
export function setTheme(theme: Theme): void {
document.documentElement.style.setProperty('--main-bg', theme.mainBg)
document.documentElement.style.setProperty('--main-fg', theme.mainFg)
document.documentElement.style.setProperty('--button-bg', theme.buttonBg)
document.documentElement.style.setProperty('--button-fg', theme.buttonFg)
document.documentElement.style.setProperty('--sidebar-bg', theme.sidebarBg)
document.documentElement.style.setProperty('--sidebar-fg', theme.sidebarFg)
}

2
webapp/src/widgets/editable.scss
View file

@ -5,7 +5,7 @@
min-width: 100px; min-width: 100px;
} }
&::placeholder{ &::placeholder{
color: rgba(55, 53, 47, 0.4); color: rgba(var(--main-fg), 0.4);
opacity: 1; opacity: 1;
} }
} }

7
webapp/src/widgets/menu/menu.scss
View file

@ -2,10 +2,11 @@
position: absolute; position: absolute;
z-index: 15; z-index: 15;
min-width: 180px; min-width: 180px;
background-color: #ffffff; background-color: rgb(var(--main-bg));
color: rgb(var(--main-fg));
border-radius: 3px; border-radius: 3px;
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; box-shadow: rgba(var(--main-fg), 0.05) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 3px 6px, rgba(var(--main-fg), 0.2) 0px 9px 24px;
&.top { &.top {
bottom: 100%; bottom: 100%;
@ -19,7 +20,7 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
color: rgb(55, 53, 47); color: rgb(var(--main-fg));
} }
.menu-option { .menu-option {