self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2024-12-24 13:43:12 +02:00
Code Issues Releases Activity

Centered DisclosureTriangleIcon

Browse Source
This commit is contained in:
Chen-I Lim 2020-11-16 12:29:25 -08:00
parent d2d02585b2
commit 44e5b625a9
4 changed files with 29 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -99,11 +99,11 @@
}
&.expanded {
.SubmenuTriangleIcon {
.DisclosureTriangleIcon {
transform: rotate(90deg);
}
}
.SubmenuTriangleIcon {
.DisclosureTriangleIcon {
transition: 200ms ease-in-out;
transform: rotate(0deg);
}
@ -117,7 +117,7 @@
text-overflow: ellipsis;
}
.OptionsIcon, .SubmenuTriangleIcon, .DotIcon {
.OptionsIcon, .DisclosureTriangleIcon, .DotIcon {
fill: rgba(var(--sidebar-fg), 0.5);
flex-shrink: 0;
}

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

@ -18,7 +18,7 @@ import HamburgerIcon from '../widgets/icons/hamburger'
import HideSidebarIcon from '../widgets/icons/hideSidebar'
import OptionsIcon from '../widgets/icons/options'
import ShowSidebarIcon from '../widgets/icons/showSidebar'
import SubmenuTriangleIcon from '../widgets/icons/submenuTriangle'
import DisclosureTriangle from '../widgets/icons/disclosureTriangle'
import Menu from '../widgets/menu'
import MenuWrapper from '../widgets/menuWrapper'
import './sidebar.scss'
@ -95,7 +95,7 @@ class Sidebar extends React.Component<Props, State> {
<div key={board.id}>
<div className={'octo-sidebar-item ' + (collapsedBoards[board.id] ? 'collapsed' : 'expanded')}>
<IconButton
icon={<SubmenuTriangleIcon/>}
icon={<DisclosureTriangle/>}
onClick={() => {
const newCollapsedBoards = {...this.state.collapsedBoards}
newCollapsedBoards[board.id] = !newCollapsedBoards[board.id]

6
webapp/src/widgets/icons/disclosureTriangle.scss Normal file
View File

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

18
webapp/src/widgets/icons/disclosureTriangle.tsx Normal file
View File

@ -0,0 +1,18 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import './disclosureTriangle.scss'
export default function DisclosureTriangle(): JSX.Element {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
className='DisclosureTriangleIcon Icon'
viewBox='0 0 100 100'
>
<polygon points='37,35 37,65 63,50'/>
</svg>
)
}