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

Merge pull request #34 from asaadmahmood/ui-updates

Browse source 
Updating Application UI
This commit is contained in:
Chen-I Lim 2021-01-27 10:14:09 -08:00 committed by GitHub
commit c812b5dc98
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
61 changed files with 300 additions and 187 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
webapp/i18n/en.json
View file

@ -121,7 +121,7 @@
"ViewHeader.export-board-archive": "Export board archive",
"ViewHeader.export-csv": "Export to CSV",
"ViewHeader.filter": "Filter",
"ViewHeader.group-by": "Group by {property}",
"ViewHeader.group-by": "Group by: {property}",
"ViewHeader.new": "New",
"ViewHeader.properties": "Properties",
"ViewHeader.search": "Search",

2
webapp/i18n/es.json
View file

@ -57,7 +57,7 @@
"ViewHeader.export-board-archive": "Exportar Archivo del Panel",
"ViewHeader.export-csv": "Exportar a CSV",
"ViewHeader.filter": "Filtrar",
"ViewHeader.group-by": "Agrupar por {property}",
"ViewHeader.group-by": "Agrupar por: {property}",
"ViewHeader.new": "Nueva",
"ViewHeader.properties": "Propiedades",
"ViewHeader.search": "Buscar",

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

@ -8,7 +8,7 @@
align-items: center;
justify-content: center;
&:not(.readonly):hover {
background-color: rgba(var(--main-fg), 0.1);
background-color: rgba(var(--body-color), 0.1);
}
&.size-s {
height: 24px;

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

@ -7,16 +7,16 @@
border-radius: 3px;
margin-bottom: 10px;
padding: 7px 10px;
box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px;
padding: 8px 16px;
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, rgba(var(--body-color), 0.1) 0px 2px 4px;
cursor: pointer;
color: rgb(var(--main-fg));
color: rgb(var(--body-color));
transition: background 100ms ease-out 0s;
&:hover {
background-color: rgba(var(--main-fg), 0.1);
background-color: rgba(var(--body-color), 0.1);
.optionsMenu {
display: block;
}
@ -32,13 +32,14 @@
right: 0;
}
> div {
margin-bottom: 3px;
}
> .octo-propertyvalue {
margin: 4px 0 0;
font-size: 12px;
line-height: 18px;
&:empty {
display: none;
}
}
.octo-icontitle {
@ -54,8 +55,8 @@
border-radius: 3px;
margin-right: 6px;
padding: 0;
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;
background: rgb(var(--body-color), 0.1);
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, rgba(var(--body-color), 0.1) 0px 2px 4px;
height: 24px;
width: 24px;
}

12
webapp/src/components/boardComponent.scss
View file

@ -11,8 +11,7 @@
flex-direction: row;
min-height: 30px;
margin-bottom: 10px;
padding: 0px 10px;
margin-bottom: 16px;
color: #909090;
}
@ -30,13 +29,17 @@
}
> div {
margin-right: 5px;
margin-right: 8px;
&:last-child {
margin: 0;
}
}
.IconButton{
background-color: unset;
&:hover {
background-color: rgba(var(--main-fg), 0.1);
background-color: rgba(var(--body-color), 0.1);
}
}
}
@ -45,7 +48,6 @@
.octo-board-body {
display: flex;
flex-direction: row;
padding: 0 10px;
flex: 0 1 auto;
}

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

@ -7,7 +7,7 @@
display: flex;
flex-direction: column;
min-height: 30px;
color:rgba(var(--main-fg), 0.4);
color:rgba(var(--body-color), 0.4);
width: 100%;
align-items: flex-start;
.Button {
@ -44,20 +44,20 @@
.octo-propertyname {
width: 150px;
margin-right: 5px;
color: rgba(var(--main-fg), 0.6);
color: rgba(var(--body-color), 0.6);
.Button {
text-align: left;
justify-content: unset;
}
&.add-property {
color: rgba(var(--main-fg), 0.4);
color: rgba(var(--body-color), 0.4);
}
}
&.add-content {
.Button {
opacity: 0;
color: rgba(var(--main-fg), 0.6);
color: rgba(var(--body-color), 0.6);
}
&:hover {
.Button {

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

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

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

@ -18,7 +18,7 @@
}
.newcomment {
color: rgba(var(--main-fg), 0.8);
color: rgba(var(--body-color), 0.8);
flex-grow: 1;
margin-left: 5px;
}

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

@ -9,7 +9,7 @@
}
.divider {
padding-top: 16px;
border-bottom: 1px solid rgba(var(--main-fg), 0.09);
border-bottom: 1px solid rgba(var(--body-color), 0.09);
margin-bottom: 17px;
flex-grow: 1;
}

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

@ -7,16 +7,15 @@
bottom: 0;
z-index: 10;
background-color: rgba(var(--main-fg), 0.5);
background-color: rgba(var(--body-color), 0.5);
}
.dialog {
display: flex;
flex-direction: column;
background-color: rgb(var(--main-bg));
border-radius: 3px;
box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px;
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, rgba(var(--body-color), 0.1) 0px 2px 4px;
border-radius: var(--modal-rad);
padding: 0;
overflow-x: hidden;
@ -54,8 +53,7 @@
> .toolbar {
display: flex;
flex-direction: row;
height: 30px;
margin: 10px;
padding: 16px;
}
> .content {
display: flex;

7
webapp/src/components/dialog.tsx
View file

@ -54,11 +54,14 @@ export default class Dialog extends React.PureComponent<Props> {
onClick={this.closeClicked}
icon={<CloseIcon/>}
title={'Close dialog'}
className='hideOnWidescreen'
className='hideOnWidescreen IconButton--large'
/>
<div className='octo-spacer'/>
<MenuWrapper>
<IconButton icon={<OptionsIcon/>}/>
<IconButton
className='IconButton--large'
icon={<OptionsIcon/>}
/>
{toolsMenu}
</MenuWrapper>
</>

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

@ -1,12 +1,12 @@
.Modal {
position: absolute;
top: 25px;
left: -230px;
left: -240px;
z-index: 10;
background-color: rgb(var(--main-bg));
padding: 10px;
border-radius: 3px;
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;
box-shadow: var(--elevation-4);
@media screen and (max-width: 430px) {
position: fixed;

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

@ -2,7 +2,7 @@
display: flex;
flex-direction: column;
padding: 5px;
color: rgb(var(--main-fg));
color: rgb(var(--body-color));
font-weight: normal;
line-height: normal;

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

@ -2,7 +2,7 @@
display: flex;
flex-direction: column;
padding: 5px;
color: rgb(var(--main-fg));
color: rgb(var(--body-color));
max-width: 400px;
> .row {

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

@ -1,13 +1,13 @@
.Sidebar {
flex: 0 0 230px;
flex: 0 0 240px;
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
min-height: 100%;
color: rgb(var(--sidebar-fg));
background-color: rgb(var(--sidebar-bg));
padding-top: 10px;
min-height: 100%;
color: rgb(var(--sidebar-fg));
background-color: rgb(var(--sidebar-bg));
padding: 12px 0;
&.hidden {
position: absolute;
@ -19,7 +19,8 @@
width: 50px;
background: none;
padding: 0;
> div {
>div {
padding: 0;
margin: auto;
}
@ -34,6 +35,10 @@
flex: 1 1 auto;
overflow-y: auto;
max-width: 250px;
>div {
margin-bottom: 16px;
}
}
.octo-sidebar-header {
@ -42,7 +47,14 @@
font-weight: 600;
padding: 3px 20px;
margin-bottom: 5px;
margin-bottom: 16px;
height: 48px;
align-items: center;
button {
font-size: 16px;
font-weight: 600;
}
>.heading {
line-height: 30px;
@ -51,6 +63,7 @@
>.IconButton {
background-color: var(--sidebar-bg);
&:hover {
background-color: rgba(var(--sidebar-fg), 0.1);
}
@ -60,13 +73,16 @@
.hamburger-icon {
display: block;
}
.show-icon {
display: none;
}
&:hover {
.hamburger-icon {
display: none;
}
.show-icon {
display: block;
}
@ -77,19 +93,24 @@
.octo-sidebar-item {
display: flex;
flex-direction: row;
font-weight: 500;
padding: 3px 20px;
padding: 0 16px 0 8px;
height: 36px;
align-items: center;
&:hover {
background-color: rgba(var(--sidebar-fg), 0.05);
background-color: rgba(var(--sidebar-fg), 0.08);
}
&.subitem {
color: rgba(var(--sidebar-fg), 0.6);
padding-left: 20px;
color: rgba(var(--sidebar-fg), 0.64);
font-weight: 400;
margin-left: 20px;
}
&.no-views {
color: rgba(var(--sidebar-fg), 0.4);
&:hover {
background-color: rgba(var(--sidebar-bg));
}
@ -97,15 +118,19 @@
>.IconButton {
background-color: var(--sidebar-bg);
&:hover {
background-color: rgba(var(--sidebar-fg), 0.1);
}
}
.MenuWrapper {
display: none;
}
&:hover {
display: flex;
.MenuWrapper {
display: block;
}
@ -116,6 +141,7 @@
transform: rotate(90deg);
}
}
.DisclosureTriangleIcon {
transition: 200ms ease-in-out;
transform: rotate(0deg);
@ -123,6 +149,7 @@
}
.octo-sidebar-title {
font-weight: 600;
cursor: pointer;
flex-grow: 1;
white-space: nowrap;
@ -130,7 +157,9 @@
text-overflow: ellipsis;
}
.OptionsIcon, .DisclosureTriangleIcon, .DotIcon {
.OptionsIcon,
.DisclosureTriangleIcon,
.DotIcon {
fill: rgba(var(--sidebar-fg), 0.5);
flex-shrink: 0;
}

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

@ -285,12 +285,12 @@ class Sidebar extends React.Component<Props, State> {
</MenuWrapper>
<MenuWrapper>
<Button>
<div className='octo-sidebar-item subitem'>
<FormattedMessage
id='Sidebar.settings'
defaultMessage='Settings'
/>
</Button>
</div>
<Menu position='top'>
<Menu.Text
id='import'

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

@ -2,22 +2,24 @@
.octo-table-cell {
flex: 0 0 auto;
display: flex;
align-items: center;
flex-direction: row;
color: rgb(var(--main-fg));
border-right: solid 1px rgba(var(--main-fg), 0.09);
color: rgb(var(--body-color));
border-right: solid 1px rgba(var(--body-color), 0.09);
box-sizing: border-box;
padding: 5px 8px 6px 8px;
padding: 8px;
min-height: 32px;
font-size: 14px;
line-height: 21px;
line-height: 20px;
position: relative;
&.title-cell {
padding-left: 16px;
}
.octo-icontitle {
flex: 1 1 auto;
.octo-icon {
min-width: 20px;
}
@ -60,8 +62,7 @@
}
.octo-editable,
.octo-propertyvalue
{
.octo-propertyvalue {
text-align: left;
white-space: nowrap;
}
@ -70,7 +71,6 @@
.octo-table-body {
display: flex;
flex-direction: column;
padding: 0 10px;
}
.octo-table-header,
@ -79,28 +79,30 @@
display: flex;
flex-direction: row;
border-bottom: solid 1px rgba(var(--main-fg), 0.09);
border-bottom: solid 1px rgba(var(--body-color), 0.09);
}
.octo-table-header {
.octo-table-cell {
color: rgba(var(--main-fg), 0.6);
color: rgba(var(--body-color), 0.6);
.octo-label {
color: rgba(var(--main-fg), 0.6);
color: rgba(var(--body-color), 0.6);
}
}
}
.octo-table-footer {
.octo-table-cell {
color: rgba(var(--main-fg), 0.6);
color: rgba(var(--body-color), 0.6);
cursor: pointer;
width: 100%;
border-right: none;
padding-left: 15px;
&:hover {
background-color: rgba(var(--main-fg), 0.08);
background-color: rgba(var(--body-color), 0.08);
}
}
}

2
webapp/src/components/tableComponent.tsx
View file

@ -116,7 +116,7 @@ class TableComponent extends React.Component<Props, State> {
<div
id='mainBoardHeader'
ref={titleRef}
className='octo-table-cell title-cell header-cell'
className='octo-table-cell header-cell'
style={{overflow: 'unset', width: this.columnWidth(Constants.titleColumnId)}}
>
<MenuWrapper

11
webapp/src/components/tableRow.scss
View file

@ -1,11 +1,18 @@
.TableRow {
.open-button {
display: none;
.Button {
background-color: rgba(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: 2px 4px;
font-size: 11px;
text-transform: uppercase;
font-weight: 600;
color: rgba(var(--body-color), .64);
background-color: rgba(var(--body-color), 0.1);
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, rgba(var(--body-color), 0.1) 0px 2px 4px;
}
}
&:hover {
.open-button {
display: block;

18
webapp/src/components/viewHeader.scss
View file

@ -3,15 +3,19 @@
display: flex;
flex-direction: row;
border-bottom: solid 1px rgba(var(--main-fg), 0.16);
margin-bottom: 10px;
padding: 10px 10px;
color: rgba(var(--main-fg), 0.5);
border-bottom: solid 1px rgba(var(--body-color), 0.16);
margin: 16px 0;
padding: 12px 8px;
color: rgba(var(--body-color), 0.64);
align-items: center;
> div {
margin-right: 5px;
white-space: nowrap
margin-right: 16px;
white-space: nowrap;
&:last-child {
margin: 0;
}
}
#groupByLabel {
@ -21,7 +25,7 @@
.IconButton {
background: none;
&:hover {
background: rgba(var(--main-fg), 0.1);
background: rgba(var(--body-color), 0.1);
}
}

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

@ -137,7 +137,7 @@ class ViewHeader extends React.Component<Props, State> {
<Button>
<FormattedMessage
id='ViewHeader.group-by'
defaultMessage='Group by {property}'
defaultMessage='Group by: {property}'
values={{
property: (
<span

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

@ -8,7 +8,7 @@
&.add-buttons {
flex-direction: row;
min-height: 30px;
color:rgba(var(--main-fg), 0.4);
color:rgba(var(--body-color), 0.4);
width: 100%;
align-items: flex-start;
.Button {

3
webapp/src/main.tsx
View file

@ -6,8 +6,9 @@ import ReactDOM from 'react-dom'
import App from './app'
import {loadTheme} from './theme'
import './styles/variables.scss'
import './styles/main.scss'
import './styles/colors.scss'
import './styles/labels.scss'
loadTheme()
ReactDOM.render(<App/>, document.getElementById('octo-tasks-app'))

2
webapp/src/pages/loginPage.scss
View file

@ -9,7 +9,7 @@
align-items: center;
justify-content: flex-start;
flex-direction: column;
box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.3) 0px 4px 8px;
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, rgba(var(--body-color), 0.3) 0px 4px 8px;
@media screen and (max-width: 430px) {
position: fixed;

2
webapp/src/pages/registerPage.scss
View file

@ -9,7 +9,7 @@
align-items: center;
justify-content: flex-start;
flex-direction: column;
box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.3) 0px 4px 8px;
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, rgba(var(--body-color), 0.3) 0px 4px 8px;
@media screen and (max-width: 430px) {
position: fixed;

20
webapp/src/styles/colors.scss → webapp/src/styles/labels.scss
View file

@ -1,49 +1,49 @@
.propColor0,
.propColorDefault {
background-color: rgba(206, 205, 202, 0.5);
background-color: var(--prop-default);
}
.propColor1, .propColor1:hover,
.propColorGray, .propColorGray:hover {
background-color: rgba(155, 154, 151, 0.4);
background-color: var(--prop-gray);
}
.propColor2, .propColor2:hover,
.propColorBrown, .propColorBrown:hover {
background-color: rgba(140, 46, 0, 0.2);
background-color: var(--prop-brown);
}
.propColor3, .propColor3:hover,
.propColorOrange, .propColorOrange:hover {
background-color: rgba(245, 93, 0, 0.2);
background-color: var(--prop-orange);
}
.propColor4, .propColor4:hover,
.propColorYellow, .propColorYellow:hover {
background-color: rgba(233, 168, 0, 0.2);
background-color: var(--prop-yellow);
}
.propColor5, .propColor5:hover,
.propColorGreen, .propColorGreen:hover {
background-color: rgba(0, 135, 107, 0.2);
background-color: var(--prop-green);
}
.propColor6, .propColor6:hover,
.propColorBlue, .propColorBlue:hover {
background-color: rgba(0, 120, 233, 0.2);
background-color: var(--prop-blue);
}
.propColor7, .propColor7:hover,
.propColorPurple, .propColorPurple:hover {
background-color: rgba(103, 36, 222, 0.2);
background-color: var(--prop-purple);
}
.propColor8, .propColor8:hover,
.propColorPink, .propColorPink:hover {
background-color: rgba(221, 0, 129, 0.2);
background-color: var(--prop-pink);
}
.propColor9, .propColor9:hover,
.propColorRed, .propColorRed:hover {
background-color: rgba(255, 0, 26, 0.2);
background-color: var(--prop-red);
}

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

@ -1,19 +1,11 @@
: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;
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
user-select: none; /* Likely future */
font-family: 'Open Sans', sans-serif;
}
html, body {
@ -22,13 +14,13 @@ html, body {
width: 100%;
height: 100%;
color: rgb(var(--main-fg));
color: rgb(var(--body-color));
background: rgb(var(--main-bg));
}
input, textarea {
background: rgb(var(--main-bg));
color: rgb(var(--main-fg));
color: rgb(var(--body-color));
-webkit-user-select: auto; /* Chrome all / Safari all */
-moz-user-select: auto; /* Firefox all */
@ -39,11 +31,11 @@ input, textarea {
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
font-family: 'Open Sans', sans-serif;
/* -webkit-font-smoothing: auto; */
font-size: 14px;
line-height: 24px;
--cursor-color: rgb(var(--main-fg));
--cursor-color: rgb(var(--body-color));
}
a {
@ -57,11 +49,19 @@ hr {
width: 100%;
height: 1px;
border: none;
color: rgba(var(--main-fg), 0.09);
background-color: rgba(var(--main-fg), 0.09);
color: rgba(var(--body-color), 0.09);
background-color: rgba(var(--body-color), 0.09);
margin-bottom: 8px;
}
button {
&.style--none {
background: transparent;
border: none;
padding: 0;
}
}
.page-loading {
margin: 50px auto;
}
@ -107,10 +107,10 @@ hr {
flex-direction: column;
overflow: scroll;
padding: 10px 95px 50px 95px;
padding: 24px 80px 8px;
@media screen and (max-width: 768px) {
padding: 10px 10px 50px 10px;
padding: 8px 40px;
}
}
@ -119,12 +119,17 @@ hr {
}
.octo-label {
display: inline-block;
padding: 0 5px;
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 3px;
line-height: 20px;
color: rgb(var(--main-fg));
white-space: nowrap
color: rgba(var(--body-color), .8);
white-space: nowrap;
text-transform: uppercase;
font-weight: 600;
font-size: 13px;
}
.octo-spacer {
@ -150,10 +155,10 @@ hr {
/*-- Property list --*/
.octo-propertyvalue {
color: rgb(var(--main-fg));
color: rgb(var(--body-color));
padding: 0 5px;
&.empty {
color: rgba(var(--main-fg), 0.4);
color: rgba(var(--body-color), 0.4);
}
}
@ -168,7 +173,7 @@ hr {
}
.octo-placeholder {
color: rgba(var(--main-fg), 0.4);
color: rgba(var(--body-color), 0.4);
}
[contentEditable=true] {
@ -181,7 +186,7 @@ hr {
[contentEditable=true]:empty:before{
content: attr(placeholder);
display: block;
color: rgba(var(--main-fg), 0.4);
color: rgba(var(--body-color), 0.4);
}

34
webapp/src/styles/variables.scss Normal file
View file

@ -0,0 +1,34 @@
:root {
--body-color: 38, 38, 38;
--main-bg: 255, 255, 255;
--button-bg: 80, 170, 221;
--button-fg: 255, 255, 255;
--sidebar-bg: 20, 93, 191;
--sidebar-fg: 55, 53, 47;
--button-bg: 22, 109, 204;
--link-color: 35, 137, 215;
// Label Colors
--prop-default: #fff;
--prop-gray: #EDEDED;
--prop-brown: #F7DDC3;
--prop-orange: #ffd3c1;
--prop-yellow: #f7f0b6;
--prop-green: #c7eac3;
--prop-blue: #B1D1F6;
--prop-purple: #e6d0ff;
--prop-pink: #ffd6e9;
--prop-red: #ffa9a9;
// Elevations
--elevation-1: 0 2px 3px 0 rgba(0, 0, 0, .8);
--elevation-2: 0 4px 6px 0 rgba(0, 0, 0, .12);
--elevation-3: 0 6px 14px 0 rgba(0, 0, 0, .12);
--elevation-4: 0 8px 24px 0 rgba(0, 0, 0, .12);
--elevation-5: 0 12px 32px 0 rgba(0, 0, 0, .12);
--elevation-6: 0 20px 32px 0 rgba(0, 0, 0, .12);
// Radius
--default-rad: 4px;
--modal-rad: 8px;
}

16
webapp/src/widgets/buttons/button.scss
View file

@ -4,16 +4,18 @@
align-items: center;
text-align: center;
justify-content: center;
border-radius: 5px;
padding: 0 5px;
border-radius: var(--default-rad);
padding: 4px 8px;
min-width: 20px;
cursor: pointer;
overflow: hidden;
transition: background 100ms ease-out 0s;
background: transparent;
border: none;
transition: background 100ms ease-out 0s;
color: inherit;
&:hover {
background-color: rgba(var(--main-fg), 0.1);
background-color: rgba(var(--body-color), 0.1);
}
&.filled {
@ -27,8 +29,8 @@
}
&.active {
color: rgb(45, 170, 220);
font-weight: 500;
color: rgb(var(--link-color));
font-weight: 600;
}
.Icon {

7
webapp/src/widgets/buttons/button.tsx
View file

@ -5,7 +5,7 @@ import React from 'react'
import './button.scss'
type Props = {
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
children?: React.ReactNode
title?: string
icon?: React.ReactNode
@ -16,13 +16,14 @@ type Props = {
export default class Button extends React.PureComponent<Props> {
render(): JSX.Element {
return (
<div
<button
type='button'
onClick={this.props.onClick}
className={`Button ${this.props.active ? 'active' : ''} ${this.props.filled ? 'filled' : ''}`}
title={this.props.title}
>
{this.props.icon}
{this.props.children}
</div>)
</button>)
}
}

11
webapp/src/widgets/buttons/iconButton.scss
View file

@ -3,10 +3,21 @@
width: 24px;
padding: 0;
margin: 0;
.Icon {
height: 24px;
width: 24px;
padding: 0;
margin: 0;
}
&--large {
width: 40px;
height: 40px;
.Icon {
width: 32px;
height: 32px;
}
}
}

2
webapp/src/widgets/buttons/iconButton.tsx
View file

@ -11,7 +11,7 @@ type Props = {
className?: string
}
export default class IconButton extends React.PureComponent<Props> {
export default class cIconButton extends React.PureComponent<Props> {
render(): JSX.Element {
let className = 'Button IconButton'
if (this.props.className) {

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

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

10
webapp/src/widgets/emojiPicker.scss
View file

@ -1,20 +1,20 @@
.EmojiPicker {
.emoji-mart {
color: rgb(var(--main-fg));
color: rgb(var(--body-color));
background: rgb(var(--main-bg));
border-color: rgba(var(--main-fg), 0.16);
border-color: rgba(var(--body-color), 0.16);
.emoji-mart-bar {
border: 0 solid rgba(var(--main-fg), 0.16);
border: 0 solid rgba(var(--body-color), 0.16);
border-bottom-width: 1px
}
.emoji-mart-search input {
border: 1px solid rgba(var(--main-fg), 0.16);
border: 1px solid rgba(var(--body-color), 0.16);
}
.emoji-mart-category-label span {
background: rgb(var(--main-bg));
}
.emoji-mart-search-icon svg {
fill: rgb(var(--main-fg));
fill: rgb(var(--body-color));
}
}
}

2
webapp/src/widgets/icons/add.scss
View file

@ -1,5 +1,5 @@
.AddIcon {
stroke: rgb(var(--main-fg), 0.5);
stroke: rgb(var(--body-color), 0.5);
stroke-width: 4px;
fill: none;
width: 24px;

2
webapp/src/widgets/icons/check.scss
View file

@ -1,5 +1,5 @@
.CheckIcon {
stroke: rgba(var(--main-fg), 0.5);
stroke: rgba(var(--body-color), 0.5);
stroke-width: 8px;
fill: none;
width: 24px;

2
webapp/src/widgets/icons/close.scss
View file

@ -1,5 +1,5 @@
.CloseIcon {
stroke: rgb(var(--main-fg), 0.5);
stroke: rgb(var(--body-color), 0.5);
stroke-width: 4px;
fill: none;
width: 24px;

2
webapp/src/widgets/icons/delete.scss
View file

@ -1,5 +1,5 @@
.DeleteIcon {
fill: rgba(var(--main-fg), 0.5);
fill: rgba(var(--body-color), 0.5);
stroke: none;
width: 24px;
height: 24px;

2
webapp/src/widgets/icons/disclosureTriangle.scss
View file

@ -1,5 +1,5 @@
.DisclosureTriangleIcon {
fill: rgba(var(--main-fg), 0.7);
fill: rgba(var(--body-color), 0.7);
stroke: none;
width: 24px;
height: 24px;

2
webapp/src/widgets/icons/divider.scss
View file

@ -1,5 +1,5 @@
.DividerIcon {
fill: rgba(var(--main-fg), 0.7);
fill: rgba(var(--body-color), 0.7);
stroke: none;
width: 24px;
height: 24px;

2
webapp/src/widgets/icons/dot.scss
View file

@ -1,5 +1,5 @@
.DotIcon {
fill: rgba(var(--main-fg), 0.5);
fill: rgba(var(--body-color), 0.5);
width: 24px;
height: 24px;
}

2
webapp/src/widgets/icons/dropdown.scss
View file

@ -1,6 +1,6 @@
.DropdownIcon {
fill: none;
stroke: rgb(var(--main-fg));
stroke: rgb(var(--body-color));
stroke-width: 4px;
width: 24px;
height: 24px;

2
webapp/src/widgets/icons/duplicate.scss
View file

@ -1,5 +1,5 @@
.DuplicateIcon {
fill: rgba(var(--main-fg), 0.7);
fill: rgba(var(--body-color), 0.7);
stroke: none;
width: 24px;
height: 24px;

2
webapp/src/widgets/icons/emoji.scss
View file

@ -1,5 +1,5 @@
.EmojiIcon {
fill: rgba(var(--main-fg), 0.7);
fill: rgba(var(--body-color), 0.7);
stroke: none;
width: 24px;
height: 24px;

2
webapp/src/widgets/icons/hamburger.scss
View file

@ -1,5 +1,5 @@
.HamburgerIcon {
stroke: rgba(var(--main-fg), 0.5);
stroke: rgba(var(--body-color), 0.5);
stroke-width: 6px;
fill: none;
width: 24px;

2
webapp/src/widgets/icons/hide.scss
View file

@ -1,5 +1,5 @@
.HideIcon {
fill: rgba(var(--main-fg), 0.7);
fill: rgba(var(--body-color), 0.7);
stroke: none;
width: 24px;
height: 24px;

2
webapp/src/widgets/icons/hideSidebar.scss
View file

@ -1,5 +1,5 @@
.HideSidebarIcon {
stroke: rgba(var(--main-fg), 0.5);
stroke: rgba(var(--body-color), 0.5);
stroke-width: 6px;
fill: none;
width: 24px;

2
webapp/src/widgets/icons/image.scss
View file

@ -1,5 +1,5 @@
.ImageIcon {
fill: rgba(var(--main-fg), 0.7);
fill: rgba(var(--body-color), 0.7);
stroke: none;
width: 24px;
height: 24px;

2
webapp/src/widgets/icons/options.scss
View file

@ -1,5 +1,5 @@
.OptionsIcon {
fill: rgba(var(--main-fg), 0.5);
fill: rgba(var(--body-color), 0.5);
width: 24px;
height: 24px;
}

2
webapp/src/widgets/icons/show.scss
View file

@ -1,5 +1,5 @@
.ShowIcon {
fill: rgba(var(--main-fg), 0.7);
fill: rgba(var(--body-color), 0.7);
stroke: none;
width: 24px;
height: 24px;

2
webapp/src/widgets/icons/showSidebar.scss
View file

@ -1,5 +1,5 @@
.ShowSidebarIcon {
stroke: rgba(var(--main-fg), 0.5);
stroke: rgba(var(--body-color), 0.5);
stroke-width: 6px;
fill: none;
width: 24px;

2
webapp/src/widgets/icons/sortDown.scss
View file

@ -1,5 +1,5 @@
.SortDownIcon {
stroke: rgba(var(--main-fg), 0.5);
stroke: rgba(var(--body-color), 0.5);
stroke-width: 8px;
fill: none;
width: 24px;

2
webapp/src/widgets/icons/sortUp.scss
View file

@ -1,5 +1,5 @@
.SortUpIcon {
stroke: rgba(var(--main-fg), 0.5);
stroke: rgba(var(--body-color), 0.5);
stroke-width: 8px;
fill: none;
width: 24px;

2
webapp/src/widgets/icons/standardIcon.scss
View file

@ -1,5 +1,5 @@
.StandardIcon {
stroke: rgba(var(--main-fg), 0.5);
stroke: rgba(var(--body-color), 0.5);
stroke-width: 4px;
fill: none;
width: 24px;

2
webapp/src/widgets/icons/submenuTriangle.scss
View file

@ -1,5 +1,5 @@
.SubmenuTriangleIcon {
fill: rgba(var(--main-fg), 0.7);
fill: rgba(var(--body-color), 0.7);
stroke: none;
width: 24px;
height: 24px;

2
webapp/src/widgets/icons/text.scss
View file

@ -1,5 +1,5 @@
.TextIcon {
fill: rgba(var(--main-fg), 0.7);
fill: rgba(var(--body-color), 0.7);
stroke: none;
width: 24px;
height: 24px;

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

@ -1,18 +1,19 @@
.Menu {
display: flex;
flex-direction: column;
position: absolute;
z-index: 15;
min-width: 180px;
background-color: rgb(var(--main-bg));
color: rgb(var(--main-fg));
border-radius: 3px;
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;
position: absolute;
z-index: 15;
min-width: 180px;
background-color: rgb(var(--main-bg));
color: rgb(var(--body-color));
border-radius: var(--default-rad);
box-shadow: var(--elevation-4);
.menu-contents {
display: flex;
flex-direction: column;
padding: 8px 0;
min-width: 240px;
}
.menu-options {
@ -26,7 +27,7 @@
padding: 0;
margin: 0;
color: rgb(var(--main-fg));
color: rgb(var(--body-color));
>.menu-option {
display: flex;
@ -34,15 +35,18 @@
align-items: center;
font-weight: 400;
padding: 2px 10px;
height: 32px;
padding: 4px 20px;
cursor: pointer;
&:hover {
background: rgba(90, 90, 90, 0.1);
background: rgba(var(--button-bg), 0.08);
}
>* {
margin-left: 5px;
margin-left: 16px;
}
>*:first-child {
margin-left: 0;
}
@ -54,14 +58,16 @@
}
>.SubmenuTriangleIcon {
fill: rgba(var(--main-fg), 0.7);
fill: rgba(var(--body-color), 0.7);
}
>.Icon {
opacity: 0.56;
width: 16px;
height: 16px;
line-height: 16px;
}
>.IconButton .Icon {
margin-right: 0;
}
@ -78,13 +84,15 @@
&.top {
bottom: 100%;
}
&.left {
right: 0;
}
}
}
.Menu, .SubMenuOption .SubMenu {
.Menu,
.SubMenuOption .SubMenu {
@media screen and (max-width: 430px) {
position: fixed;
top: 0;
@ -92,7 +100,7 @@
right: 0;
bottom: 0;
min-width: 0;
background-color: rgba(var(--main-fg), 0.5);
background-color: rgba(var(--body-color), 0.5);
border-radius: 0;
padding: 10px;
@ -120,10 +128,12 @@
>* {
flex: 0 0 auto;
}
>.noicon {
width: 16px;
height: 16px;
}
>.menu-name {
font-size: 16px;
justify-content: center;
@ -131,9 +141,10 @@
}
}
}
@media not screen and (max-width: 430px) {
.hideOnWidescreen {
/* Hide controls (e.g. close button) on larger screens */
/* Hide controls (e.g. close button) on larger screens */
display: none !important;
}
}

3
webapp/src/widgets/menu/separatorOption.scss
View file

@ -1,3 +1,4 @@
.MenuSeparator {
border-bottom: solid 1px rgba(var(--main-fg), 0.16);
border-bottom: solid 1px rgba(var(--body-color), 0.16);
margin: 8px 0;
}

6
webapp/src/widgets/menu/subMenuOption.scss
View file

@ -6,11 +6,11 @@
z-index: 16;
min-width: 180px;
background-color: rgb(var(--main-bg));
color: rgb(var(--main-fg));
color: rgb(var(--body-color));
margin: 0 !important;
border-radius: 3px;
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;
box-shadow: rgba(var(--body-color), 0.05) 0px 0px 0px 1px, rgba(var(--body-color), 0.1) 0px 3px 6px, rgba(var(--body-color), 0.2) 0px 9px 24px;
left: 100%;
&.top {
bottom: 0;
@ -22,7 +22,7 @@
@media screen and (max-width: 430px) {
.SubMenu {
background-color: rgba(var(--main-fg), 0.8) !important;
background-color: rgba(var(--body-color), 0.8) !important;
}
}
}

4
webapp/src/widgets/switch.scss
View file

@ -7,11 +7,11 @@
width: 26px;
border-radius: 44px;
padding: 2px;
background-color: rgba(135, 131, 120, 0.3);
background-color: rgba(var(--body-color), 0.24);
transition: background 200ms ease 0s, box-shadow 200ms ease 0s;
&.on {
background-color: rgba(46, 170, 220);
background-color: rgb(var(--button-bg));
.octo-switch-inner {
transform: translateX(12px) translateY(0px);
}

11
webapp/src/widgets/valueSelector.scss
View file

@ -1,15 +1,16 @@
.ValueSelector {
width: 100%;
border-radius: 5px;
color: rgb(var(--main-fg));
border-radius: var(--default-rad);
color: rgb(var(--body-color));
&:hover {
background-color: rgba(var(--main-fg), 0.1),
background-color: rgba(var(--body-color), 0.1),
}
> .octo-label {
margin: 0 10px;
&.empty {
color: rgba(var(--main-fg), 0.6);
color: rgba(var(--body-color), 0.6);
}
}
@ -25,7 +26,7 @@
.IconButton {
background-color: unset;
&:hover {
background-color: rgba(var(--main-fg), 0.1);
background-color: rgba(var(--body-color), 0.1);
}
}
}