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

Updating icons for calendar mvp

Browse source
This commit is contained in:
Asaad Mahmood 2021-11-10 15:27:24 +05:00
parent 6c96c26157
commit e16e715e8a
11 changed files with 68 additions and 185 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -23,10 +23,6 @@
position: relative;
color: rgb(var(--sidebar-text-rgb));
.Icon {
stroke: rgba(var(--sidebar-text-rgb), 1);
}
&:not(.subitem) {
&::before {
content: '';
@ -53,9 +49,8 @@
}
> .Icon {
stroke: rgba(var(--sidebar-text-rgb), 0.3);
height: 14px;
width: 14px;
height: 18px;
width: 18px;
margin-right: 8px;
flex-shrink: 0;

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

@ -1,4 +0,0 @@
.AddIcon {
color: rgb(var(--center-channel-color-rgb), 0.5);
font-size: 16px;
}

8
webapp/src/widgets/icons/board.scss
View file

@ -1,6 +1,6 @@
@use './standardIcon.scss';
.BoardIcon {
@extend %standard-icon;
stroke-width: 8px;
}
// .BoardIcon {
// @extend %standard-icon;
// stroke-width: 8px;
// }

42
webapp/src/widgets/icons/board.tsx
View file

@ -8,43 +8,19 @@ import './board.scss'
export default function BoardIcon(): JSX.Element {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
className='BoardIcon Icon'
width='24'
height='24'
viewBox='0 0 24 24'
fill='none'
fill='currentColor'
xmlns='http://www.w3.org/2000/svg'
className='BoardIcon Icon'
>
<g opacity='0.64'>
<rect
x='3'
y='3'
width='18'
height='18'
rx='1'
stroke='white'
strokeWidth='2'
/>
<rect
x='6'
y='6'
width='2'
height='6'
fill='white'
/>
<rect
x='11'
y='6'
width='2'
height='10'
fill='white'
/>
<rect
x='16'
y='6'
width='2'
height='3'
fill='white'
<g opacity='0.8'>
<path
fillRule='evenodd'
clipRule='evenodd'
d='M4 4H20V20H4V4ZM2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V20C22 21.1046 21.1046 22 20 22H4C2.89543 22 2 21.1046 2 20V4ZM8 6H6V12H8V6ZM11 6H13V16H11V6ZM18 6H16V9H18V6Z'
fill='currentColor'
/>
</g>
</svg>

74
webapp/src/widgets/icons/calendar.tsx
View file

@ -11,74 +11,16 @@ export default function CalendarIcon(): JSX.Element {
width='24'
height='24'
viewBox='0 0 24 24'
fill='none'
className='CalendarIcon Icon'
fill='currentColor'
xmlns='http://www.w3.org/2000/svg'
className='CalendarIcon Icon'
>
<g opacity='0.64'>
<rect
x='3'
y='3'
width='18'
height='18'
rx='1'
stroke='white'
strokeWidth='2'
/>
<rect
x='20'
y='7'
width='2'
height='16'
transform='rotate(90 20 7)'
fill='white'
/>
<rect
x='6'
y='11'
width='2'
height='2'
fill='white'
/>
<rect
x='8'
y='15'
width='2'
height='2'
transform='rotate(90 8 15)'
fill='white'
/>
<rect
x='13'
y='11'
width='2'
height='2'
transform='rotate(90 13 11)'
fill='white'
/>
<rect
x='13'
y='15'
width='2'
height='2'
transform='rotate(90 13 15)'
fill='white'
/>
<rect
x='18'
y='11'
width='2'
height='2'
transform='rotate(90 18 11)'
fill='white'
/>
<rect
x='18'
y='15'
width='2'
height='2'
transform='rotate(90 18 15)'
fill='white'
<g opacity='0.8'>
<path
fillRule='evenodd'
clipRule='evenodd'
d='M4 4H20V7L4 7V4ZM4 9L4 20H20V9L4 9ZM2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V20C22 21.1046 21.1046 22 20 22H4C2.89543 22 2 21.1046 2 20V4ZM6 11H8V13H6V11ZM8 17V15H6V17H8ZM13 11V13H11V11H13ZM13 17V15H11V17H13ZM18 11V13H16V11H18ZM18 17V15H16V17H18Z'
fill='currentColor'
/>
</g>
</svg>

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

@ -3,18 +3,15 @@
import React from 'react'
import CompassIcon from './compassIcon'
import './delete.scss'
export default function DeleteIcon(): JSX.Element {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
className='DeleteIcon Icon'
viewBox='0 0 448 512'
>
<path
d='M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z'
/>
</svg>
<CompassIcon
icon='trash-can-outline'
className='trash-can-outline'
/>
)
}

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

@ -3,18 +3,15 @@
import React from 'react'
import CompassIcon from './compassIcon'
import './duplicate.scss'
export default function DuplicateIcon(): JSX.Element {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
className='DuplicateIcon Icon'
viewBox='0 0 512 512'
>
<path
d='M464 0H144c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h48c26.51 0 48-21.49 48-48V48c0-26.51-21.49-48-48-48zM362 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h42v224c0 26.51 21.49 48 48 48h224v42a6 6 0 0 1-6 6zm96-96H150a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h308a6 6 0 0 1 6 6v308a6 6 0 0 1-6 6z'
/>
</svg>
<CompassIcon
icon='content-copy'
className='content-copy'
/>
)
}

17
webapp/src/widgets/icons/gallery.tsx
View file

@ -8,13 +8,22 @@ import './gallery.scss'
export default function GalleryIcon(): JSX.Element {
return (
<svg
width='24'
height='24'
viewBox='0 0 24 24'
fill='currentColor'
xmlns='http://www.w3.org/2000/svg'
className='GalleryIcon Icon'
viewBox='0 0 512 512'
>
<path
d='M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z'
/>
<g opacity='0.8'>
<path
fillRule='evenodd'
clipRule='evenodd'
d='M4 4H20V16.4462L16.3273 10.3784C15.9432 9.74384 15.0262 9.7336 14.6281 10.3594L10.6479 16.6154L8.83356 14.2458C8.43849 13.7299 7.66396 13.7219 7.25832 14.2296L4 18.3077V4ZM2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V20C22 21.1046 21.1046 22 20 22H4C2.89543 22 2 21.1046 2 20V4ZM8.04507 11.7014C9.06719 11.7014 9.89577 10.8728 9.89577 9.8507C9.89577 8.82859 9.06719 8 8.04507 8C7.02296 8 6.19437 8.82859 6.19437 9.8507C6.19437 10.8728 7.02296 11.7014 8.04507 11.7014Z'
fill='currentColor'
/>
</g>
</svg>
)
}

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

@ -1,8 +1,4 @@
.StandardIcon,
%standard-icon {
stroke: rgba(var(--center-channel-color-rgb), 0.5);
stroke-width: 4px;
fill: none;
width: 24px;
height: 24px;
}

48
webapp/src/widgets/icons/table.tsx
View file

@ -11,50 +11,16 @@ export default function TableIcon(): JSX.Element {
width='24'
height='24'
viewBox='0 0 24 24'
fill='none'
fill='currentColor'
xmlns='http://www.w3.org/2000/svg'
className='TableIcon Icon'
>
<g opacity='0.64'>
<rect
x='3'
y='3'
width='18'
height='18'
rx='1'
stroke='white'
strokeWidth='2'
/>
<rect
x='8'
y='4'
width='2'
height='16'
fill='white'
/>
<rect
x='20'
y='8'
width='2'
height='16'
transform='rotate(90 20 8)'
fill='white'
/>
<rect
x='20'
y='8'
width='2'
height='16'
transform='rotate(90 20 8)'
fill='white'
/>
<rect
x='20'
y='14'
width='2'
height='16'
transform='rotate(90 20 14)'
fill='white'
<g opacity='0.8'>
<path
fillRule='evenodd'
clipRule='evenodd'
d='M20 4H10V8L20 8V4ZM8 4V8H4V4H8ZM4 14L4 10H8V14H4ZM4 16L4 20H8V16H4ZM10 16V20H20V16L10 16ZM20 14V10L10 10V14L20 14ZM4 2C2.89543 2 2 2.89543 2 4V20C2 21.1046 2.89543 22 4 22H20C21.1046 22 22 21.1046 22 20V4C22 2.89543 21.1046 2 20 2H4Z'
fill='currentColor'
/>
</g>
</svg>

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

@ -34,6 +34,16 @@
color: rgb(var(--center-channel-color-rgb));
.CompassIcon {
font-size: 18px;
opacity: 0.56;
width: 18px;
&:before {
margin: 0;
}
}
> .menu-option {
display: flex;
flex-direction: row;
@ -70,9 +80,8 @@
> .Icon {
opacity: 0.56;
width: 16px;
height: 16px;
line-height: 16px;
width: 18px;
height: 18px;
}
> .IconButton .Icon {