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

Migrating some icons to Compass icons

Browse source
This commit is contained in:
Jesús Espino 2021-06-18 18:08:15 +02:00
parent 967e6e8078
commit c004c7c86d
16 changed files with 81 additions and 269 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
webapp/package.json
View file

@ -54,7 +54,7 @@
},
"globals": {
"ts-jest": {
"tsConfig": "./src/tsconfig.json"
"tsconfig": "./src/tsconfig.json"
}
},
"transform": {

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

@ -108,7 +108,9 @@
}
}
.OptionsIcon,
.OptionsIcon {
color: rgba(var(--sidebar-fg), 0.5);
}
.DisclosureTriangleIcon,
.DotIcon {
fill: rgba(var(--sidebar-fg), 0.5);
@ -116,7 +118,7 @@
}
.Menu .OptionsIcon {
fill: unset;
color: unset;
}
.HideSidebarIcon {

39
webapp/src/components/table/__snapshots__/table.test.tsx.snap
View file

@ -485,44 +485,17 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = `
<div
class="Button IconButton"
>
<svg
class="OptionsIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="30"
cy="50"
r="5"
/>
<circle
cx="50"
cy="50"
r="5"
/>
<circle
cx="70"
cy="50"
r="5"
/>
</svg>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</div>
<div
class="Button IconButton"
>
<svg
class="AddIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polyline
points="30,50 70,50"
/>
<polyline
points="50,30 50,70"
/>
</svg>
<i
class="CompassIcon icon-plus AddIcon"
/>
</div>
</div>
</div>

195
webapp/src/components/table/__snapshots__/tableGroupHeaderRow.test.tsx.snap
View file

@ -95,44 +95,17 @@ exports[`should match snapshot with Group 1`] = `
<div
class="Button IconButton"
>
<svg
class="OptionsIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="30"
cy="50"
r="5"
/>
<circle
cx="50"
cy="50"
r="5"
/>
<circle
cx="70"
cy="50"
r="5"
/>
</svg>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</div>
<div
class="Button IconButton"
>
<svg
class="AddIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polyline
points="30,50 70,50"
/>
<polyline
points="50,30 50,70"
/>
</svg>
<i
class="CompassIcon icon-plus AddIcon"
/>
</div>
</div>
</div>
@ -186,44 +159,17 @@ exports[`should match snapshot, add new 1`] = `
<div
class="Button IconButton"
>
<svg
class="OptionsIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="30"
cy="50"
r="5"
/>
<circle
cx="50"
cy="50"
r="5"
/>
<circle
cx="70"
cy="50"
r="5"
/>
</svg>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</div>
<div
class="Button IconButton"
>
<svg
class="AddIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polyline
points="30,50 70,50"
/>
<polyline
points="50,30 50,70"
/>
</svg>
<i
class="CompassIcon icon-plus AddIcon"
/>
</div>
</div>
</div>
@ -277,44 +223,17 @@ exports[`should match snapshot, edit title 1`] = `
<div
class="Button IconButton"
>
<svg
class="OptionsIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="30"
cy="50"
r="5"
/>
<circle
cx="50"
cy="50"
r="5"
/>
<circle
cx="70"
cy="50"
r="5"
/>
</svg>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</div>
<div
class="Button IconButton"
>
<svg
class="AddIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polyline
points="30,50 70,50"
/>
<polyline
points="50,30 50,70"
/>
</svg>
<i
class="CompassIcon icon-plus AddIcon"
/>
</div>
</div>
</div>
@ -368,44 +287,17 @@ exports[`should match snapshot, hide group 1`] = `
<div
class="Button IconButton"
>
<svg
class="OptionsIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="30"
cy="50"
r="5"
/>
<circle
cx="50"
cy="50"
r="5"
/>
<circle
cx="70"
cy="50"
r="5"
/>
</svg>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</div>
<div
class="Button IconButton"
>
<svg
class="AddIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polyline
points="30,50 70,50"
/>
<polyline
points="50,30 50,70"
/>
</svg>
<i
class="CompassIcon icon-plus AddIcon"
/>
</div>
</div>
</div>
@ -455,44 +347,17 @@ exports[`should match snapshot, no groups 1`] = `
<div
class="Button IconButton"
>
<svg
class="OptionsIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="30"
cy="50"
r="5"
/>
<circle
cx="50"
cy="50"
r="5"
/>
<circle
cx="70"
cy="50"
r="5"
/>
</svg>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</div>
<div
class="Button IconButton"
>
<svg
class="AddIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polyline
points="30,50 70,50"
/>
<polyline
points="50,30 50,70"
/>
</svg>
<i
class="CompassIcon icon-plus AddIcon"
/>
</div>
</div>
</div>

2
webapp/src/components/table/tableGroupHeaderRow.test.tsx
View file

@ -189,7 +189,7 @@ test('should match snapshot, add new', async () => {
const {container} = render(component)
const triangle = container.querySelector('svg.AddIcon')
const triangle = container.querySelector('i.AddIcon')
expect(triangle).not.toBeNull()
act(() => {

2
webapp/src/widgets/buttons/buttonWithMenu.scss
View file

@ -34,7 +34,7 @@
background-color: rgba(var(--button-bg), 0.8);
}
.DropdownIcon {
stroke: rgb(var(--button-fg));
color: rgb(var(--button-fg));
}
}
}

5
webapp/src/widgets/icons/Link.tsx
View file

@ -7,6 +7,9 @@ import CompassIcon from './compassIcon'
export default function LinkIcon(): JSX.Element {
return (
<CompassIcon icon={'link-variant'}/>
<CompassIcon
icon='link-variant'
className='LinkIcon'
/>
)
}

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

@ -1,7 +1,4 @@
.AddIcon {
stroke: rgb(var(--body-color), 0.5);
stroke-width: 4px;
fill: none;
width: 24px;
height: 24px;
color: rgb(var(--body-color), 0.5);
font-size: 16px;
}

14
webapp/src/widgets/icons/add.tsx
View file

@ -3,17 +3,15 @@
import React from 'react'
import CompassIcon from './compassIcon'
import './add.scss'
export default function AddIcon(): JSX.Element {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
className='AddIcon Icon'
viewBox='0 0 100 100'
>
<polyline points='30,50 70,50'/>
<polyline points='50,30 50,70'/>
</svg>
<CompassIcon
icon='plus'
className='AddIcon'
/>
)
}

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

@ -1,7 +1,4 @@
.CloseIcon {
stroke: rgb(var(--body-color), 0.5);
stroke-width: 4px;
fill: none;
width: 24px;
height: 24px;
color: rgb(var(--body-color), 0.5);
font-size: 24px;
}

14
webapp/src/widgets/icons/close.tsx
View file

@ -3,17 +3,15 @@
import React from 'react'
import CompassIcon from './compassIcon'
import './close.scss'
export default function CloseIcon(): JSX.Element {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
className='CloseIcon Icon'
viewBox='0 0 100 100'
>
<polyline points='30,30 70,70'/>
<polyline points='70,30 30,70'/>
</svg>
<CompassIcon
icon='close'
className='CloseIcon'
/>
)
}

3
webapp/src/widgets/icons/compassIcon.tsx
View file

@ -5,12 +5,13 @@ import React from 'react'
type Props = {
icon: string,
className: string,
}
export default function CompassIcon(props: Props): JSX.Element {
// All compass icon classes start with icon,
// so not expecting that prefix in props.
return (
<i className={`CompassIcon icon-${props.icon}`}/>
<i className={`CompassIcon icon-${props.icon} ${props.className}`}/>
)
}

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

@ -1,7 +1,4 @@
.DropdownIcon {
fill: none;
stroke: rgb(var(--body-color));
stroke-width: 4px;
width: 24px;
height: 24px;
color: rgb(var(--body-color));
font-size: 16px;
}

15
webapp/src/widgets/icons/dropdown.tsx
View file

@ -3,18 +3,15 @@
import React from 'react'
import CompassIcon from './compassIcon'
import './dropdown.scss'
export default function DropdownIcon(): JSX.Element {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
className='DropdownIcon Icon'
viewBox='0 0 100 100'
>
<polyline
points='30,35 50,55 70,35'
/>
</svg>
<CompassIcon
icon='chevron-down'
className='DropdownIcon'
/>
)
}

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

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

27
webapp/src/widgets/icons/options.tsx
View file

@ -3,30 +3,15 @@
import React from 'react'
import CompassIcon from './compassIcon'
import './options.scss'
export default function OptionsIcon(): JSX.Element {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
className='OptionsIcon Icon'
viewBox='0 0 100 100'
>
<circle
cx='30'
cy='50'
r='5'
/>
<circle
cx='50'
cy='50'
r='5'
/>
<circle
cx='70'
cy='50'
r='5'
/>
</svg>
<CompassIcon
icon='dots-horizontal'
className='OptionsIcon'
/>
)
}