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;
margin-bottom: 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;
color: rgb(55, 53, 47);
color: rgb(var(--main-fg));
transition: background 100ms ease-out 0s;
&:hover {
background-color: #eeeeee;
background-color: rgba(var(--main-fg), 0.1);
.optionsMenu {
display: block;
}

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

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

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

@ -39,8 +39,9 @@
width: 150px;
margin-right: 5px;
color: #909090;
color: rgba(var(--main-fg), 0.6);
&.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 {
color: rgb(55, 53, 47);
color: rgb(var(--main-fg));
width: 100%;
padding-left: 25px;
}

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

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

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

@ -7,16 +7,16 @@
bottom: 0;
z-index: 10;
background-color: rgba(90, 90, 90, 0.5);
background-color: rgba(var(--main-fg), 0.5);
}
.dialog {
display: flex;
flex-direction: column;
background-color: #ffffff;
background-color: rgb(var(--main-bg));
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;
padding: 0;
max-width: 975px;

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

@ -5,8 +5,8 @@
z-index: 10;
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;
box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px;
background-color: rgb(var(--main-bg));
padding: 10px;
.octo-filterclause {

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

@ -5,7 +5,8 @@
flex-direction: column;
min-height: 100%;
background-color: rgb(247, 246, 243);
color: rgb(var(--sidebar-fg));
background-color: rgb(var(--sidebar-bg));
padding: 10px 0;
&.hidden {
@ -40,7 +41,7 @@
font-weight: 500;
padding: 3px 20px;
&.subitem {
color: rgba(25, 23, 18, 0.6);
color: rgba(var(--sidebar-fg), 0.6);
font-weight: 400;
margin-left: 20px;
}
@ -53,11 +54,11 @@
.octo-sidebar-item {
&:hover {
background-color: rgba(0, 0, 0, 0.05);
background-color: rgba(var(--sidebar-fg), 0.05);
}
.octo-button {
&: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 {Archiver} from '../archiver'
import {mattermostTheme, darkTheme, lightTheme, setTheme} from '../theme'
import {Board, MutableBoard} from '../blocks/board'
import {BoardTree} from '../viewModel/boardTree'
import mutator from '../mutator'
@ -226,6 +227,42 @@ class Sidebar extends React.Component<Props, State> {
/>
)}
</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>
</MenuWrapper>
</div>

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

@ -4,8 +4,8 @@
display: flex;
flex-direction: row;
color: rgba(55, 53, 47);
border-right: solid 1px rgba(55, 53, 47, 0.09);
color: rgb(var(--main-fg));
border-right: solid 1px rgba(var(--main-fg), 0.09);
box-sizing: border-box;
padding: 5px 8px 6px 8px;
@ -68,28 +68,28 @@
display: flex;
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-cell {
color: rgba(55, 53, 47, 0.6);
color: rgba(var(--main-fg), 0.6);
.octo-label {
color: rgba(55, 53, 47, 0.6);
color: rgba(var(--main-fg), 0.6);
}
}
}
.octo-table-footer {
.octo-table-cell {
color: rgba(55, 53, 47, 0.6);
color: rgba(var(--main-fg), 0.6);
cursor: pointer;
width: 100%;
border-right: none;
padding-left: 15px;
&: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 (
<div className='ViewHeader'>
<Editable
style={{color: '#000000', fontWeight: 600}}
style={{color: 'rgb(var(--main-fg))', fontWeight: 600}}
text={activeView.title}
placeholderText='Untitled View'
onChanged={(text) => {
@ -126,7 +126,7 @@ class ViewHeader extends React.Component<Props, State> {
<MenuWrapper>
<div
className='octo-button'
style={{color: '#000000', fontWeight: 600}}
style={{color: 'rgb(var(--main-fg))', fontWeight: 600}}
>
<div className='imageDropdown'/>
</div>
@ -180,7 +180,7 @@ class ViewHeader extends React.Component<Props, State> {
values={{
property: (
<span
style={{color: '#000000'}}
style={{color: 'rgb(var(--main-fg))'}}
id='groupByLabel'
>
{boardTree.groupByProperty?.name}
@ -268,7 +268,7 @@ class ViewHeader extends React.Component<Props, State> {
ref={this.searchFieldRef}
text={boardTree.getSearchText()}
placeholderText={intl.formatMessage({id: 'ViewHeader.search-text', defaultMessage: 'Search text'})}
style={{color: '#000000'}}
style={{color: 'rgb(var(--main-fg))'}}
onChanged={(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 App from './app'
import {setTheme, lightTheme} from './theme'
import './styles/main.scss'
import './styles/colors.scss'
import './styles/images.scss'
setTheme(lightTheme)
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;
outline: 0;
@ -10,7 +19,13 @@ html, body {
width: 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 {
@ -20,7 +35,7 @@ body {
/* -webkit-font-smoothing: auto; */
font-size: 14px;
line-height: 24px;
--cursor-color: rgb(55, 53, 47);
--cursor-color: rgb(var(--main-fg));
}
a {
@ -34,8 +49,8 @@ hr {
width: 100%;
height: 1px;
border: none;
color: rgba(55, 53, 47, 0.09);
background-color: rgba(55, 53, 47, 0.09);
color: rgba(var(--main-fg), 0.09);
background-color: rgba(var(--main-fg), 0.09);
margin-bottom: 8px;
}
@ -96,7 +111,7 @@ hr {
padding: 0 5px;
border-radius: 3px;
line-height: 20px;
color: rgb(55, 53, 47);
color: rgb(var(--main-fg));
white-space: nowrap
}
@ -116,17 +131,17 @@ hr {
transition: background 100ms ease-out 0s;
&:hover {
background-color: #eeeeee;
background-color: rgba(var(--main-fg), 0.1);
}
}
.filled {
color: #ffffff;
background-color: #50aadd;
background-color: rgb(var(--button-bg));
padding: 2px 10px;
&:hover {
background-color: #507090;
background-color: rgb(var(--button-bg), 0.8);
}
}
@ -139,7 +154,7 @@ hr {
min-height: 30px;
width: 100%;
color:rgba(55, 53, 47, 0.4);
color:rgba(var(--main-fg), 0.4);
}
.octo-icon {
@ -164,10 +179,10 @@ hr {
/*-- Property list --*/
.octo-propertyvalue {
color: rgb(55, 53, 47);
color: rgb(var(--main-fg));
padding: 0 5px;
&.empty {
color: rgba(55, 53, 47, 0.4);
color: rgba(var(--main-fg), 0.4);
}
}
@ -182,13 +197,13 @@ hr {
}
.octo-placeholder {
color: rgba(55, 53, 47, 0.4);
color: rgba(var(--main-fg), 0.4);
}
[contentEditable=true]:empty:before{
content: attr(placeholder);
display: block;
color: rgba(55, 53, 47, 0.4);
color: rgba(var(--main-fg), 0.4);
}
@ -200,7 +215,7 @@ hr {
.octo-button {
&.octo-hovercontrol {
background: rgb(239, 239, 238);
background: rgba(var(--main-fg), 0.1);
}
&.square {
@ -225,8 +240,8 @@ hr {
right: 6px;
top: 4px;
cursor: pointer;
background: rgb(239, 239, 238);
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px;
background: rgb(var(--main-fg), 0.1);
box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px;
padding: 0 5px;
&.square {
@ -280,7 +295,7 @@ hr {
min-height: 30px;
width: 100%;
color:rgba(55, 53, 47, 0.4);
color:rgba(var(--main-fg), 0.4);
}
.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;
}
&::placeholder{
color: rgba(55, 53, 47, 0.4);
color: rgba(var(--main-fg), 0.4);
opacity: 1;
}
}

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

@ -2,10 +2,11 @@
position: absolute;
z-index: 15;
min-width: 180px;
background-color: #ffffff;
background-color: rgb(var(--main-bg));
color: rgb(var(--main-fg));
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 {
bottom: 100%;
@ -19,7 +20,7 @@
padding: 0;
margin: 0;
color: rgb(55, 53, 47);
color: rgb(var(--main-fg));
}
.menu-option {