diff options
-rw-r--r-- | webapp/components/sidebar_right_menu.jsx | 22 | ||||
-rw-r--r-- | webapp/sass/layout/_sidebar-menu.scss | 7 | ||||
-rw-r--r-- | webapp/utils/constants.jsx | 1 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 3 |
4 files changed, 31 insertions, 2 deletions
diff --git a/webapp/components/sidebar_right_menu.jsx b/webapp/components/sidebar_right_menu.jsx index 6122f60e8..63fe94c5d 100644 --- a/webapp/components/sidebar_right_menu.jsx +++ b/webapp/components/sidebar_right_menu.jsx @@ -298,6 +298,25 @@ export default class SidebarRightMenu extends React.Component { </li> ); + const leaveTeam = ( + <li key='leaveTeam_li'> + <a + id='leaveTeam' + href='#' + onClick={GlobalActions.showLeaveTeamModal} + > + <span + className='icon' + dangerouslySetInnerHTML={{__html: Constants.LEAVE_TEAM_SVG}} + /> + <FormattedMessage + id='navbar_dropdown.leave' + defaultMessage='Leave Team' + /> + </a> + </li> + ); + if (isAdmin) { teamSettingsLink = ( <li> @@ -430,7 +449,7 @@ export default class SidebarRightMenu extends React.Component { } let teamDivider = null; - if (teamSettingsLink || manageLink || joinAnotherTeamLink || createTeam) { + if (teamSettingsLink || manageLink || joinAnotherTeamLink || createTeam || leaveTeam) { teamDivider = <li className='divider'/>; } @@ -501,6 +520,7 @@ export default class SidebarRightMenu extends React.Component { {teamSettingsLink} {manageLink} {createTeam} + {leaveTeam} {joinAnotherTeamLink} {consoleDivider} {consoleLink} diff --git a/webapp/sass/layout/_sidebar-menu.scss b/webapp/sass/layout/_sidebar-menu.scss index 4af2f6243..b4d4f15fd 100644 --- a/webapp/sass/layout/_sidebar-menu.scss +++ b/webapp/sass/layout/_sidebar-menu.scss @@ -70,6 +70,13 @@ line-height: 40px; padding: 0 15px; + svg { + fill-opacity: 0.85; + position: relative; + top: 4px; + width: 18px; + } + .icon { display: inline-block; left: -5px; diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx index e8dc583ef..986e1b758 100644 --- a/webapp/utils/constants.jsx +++ b/webapp/utils/constants.jsx @@ -456,6 +456,7 @@ export const Constants = { SCROLL_BOTTOM_ICON: "<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'viewBox='-239 239 21 23' style='enable-background:new -239 239 21 23;' xml:space='preserve'> <path d='M-239,241.4l2.4-2.4l8.1,8.2l8.1-8.2l2.4,2.4l-10.5,10.6L-239,241.4z M-228.5,257.2l8.1-8.2l2.4,2.4l-10.5,10.6l-10.5-10.6 l2.4-2.4L-228.5,257.2z'/> </svg>", VIDEO_ICON: "<svg width='55%'height='100%'viewBox='0 0 13 8'> <g transform='matrix(1,0,0,1,-507,-146)'> <g transform='matrix(0.0133892,0,0,0.014499,500.635,142.838)'> <path d='M1158,547.286L1158,644.276C1158,684.245 1125.55,716.694 1085.58,716.694L579.341,716.694C539.372,716.694 506.922,684.245 506.922,644.276L506.922,306.322C506.922,266.353 539.371,233.904 579.341,233.903L1085.58,233.903C1125.55,233.904 1158,266.353 1158,306.322L1158,402.939L1359.75,253.14C1365.83,248.362 1373.43,245.973 1382.56,245.973C1386.61,245.973 1390.83,246.602 1395.22,247.859C1408.4,252.134 1414.99,259.552 1414.99,270.113L1414.99,680.485C1414.99,691.046 1408.4,698.464 1395.22,702.739C1390.83,703.996 1386.61,704.624 1382.56,704.624C1373.43,704.624 1365.83,702.236 1359.75,697.458L1158,547.286Z'/> </g> </g> </svg>", PIN_ICON: "<svg width='19px' height='19px' viewBox='0 0 25 25' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='1.414'><path d='M24.78 9.236L15.863.316l-1.487 4.46-4.46 4.46L8.43 7.75 3.972 9.235l4.458 4.458L.776 24.388l10.627-7.72 4.46 4.46 1.485-4.46-1.486-1.485 4.46-4.46 4.46-1.487z' fill-rule='nonzero'/></svg>", + LEAVE_TEAM_SVG: "<svg width='100%' height='100%' viewBox='0 0 164 164' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round; stroke-miterlimit:1.41421;'> <path d='M26.023,164L26.023,7.035L26.022,0.32L137.658,0.32L137.658,164L124.228,164L124.228, 13.749L39.452,13.749L39.452,164L26.023, 164ZM118.876,164L118.876,18.619L58.137,32.918L58.137,149.701L118.876,164Z'/></svg>", THEMES: { default: { type: 'Organization', diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 9827dfb34..84b02beb1 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -504,7 +504,8 @@ export function applyTheme(theme) { changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a, .app__body .sidebar--menu', 'color:' + changeOpacity(theme.sidebarText, 0.8)); changeCss('.sidebar--left .nav-pills__container li > h4, .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.6)); changeCss('.app__body .sidebar--left .sidebar__switcher button, .sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText); - changeCss('.sidebar--left .status .offline--icon', 'fill:' + theme.sidebarText); + changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText); + changeCss('.sidebar--left .status .offline--icon, .app__body .sidebar--menu svg', 'fill:' + theme.sidebarText); changeCss('.sidebar--left .status.status--group', 'background:' + changeOpacity(theme.sidebarText, 0.3)); changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a, .app__body .sidebar--menu .divider', 'border-color:' + changeOpacity(theme.sidebarText, 0.2)); changeCss('.app__body .sidebar--left .sidebar__switcher', 'border-color:' + changeOpacity(theme.sidebarText, 0.2)); |