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

GH-4278 - Updating card modal attach btn (#4361)

Browse source 
* GH-4278 - Updating card modal attach btn

* Updating flex

* Updating test

* Updating test
This commit is contained in:
Asaad Mahmood 2022-12-20 18:36:02 +05:00 committed by GitHub
parent a43228c4d2
commit 401062d128
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 65 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
mattermost-plugin/webapp/src/components/__snapshots__/boardSelector.test.tsx.snap
View file

@ -31,7 +31,9 @@ exports[`components/boardSelector escape button should unmount the component 1`]
<div <div
class="toolbar--right" class="toolbar--right"
> >
<div> <div
class="d-flex"
>
<button <button
class="Button emphasis--secondary" class="Button emphasis--secondary"
type="button" type="button"
@ -134,7 +136,9 @@ exports[`components/boardSelector renders with no results 1`] = `
<div <div
class="toolbar--right" class="toolbar--right"
> >
<div> <div
class="d-flex"
>
<button <button
class="Button emphasis--secondary" class="Button emphasis--secondary"
type="button" type="button"
@ -238,7 +242,9 @@ exports[`components/boardSelector renders with some results 1`] = `
<div <div
class="toolbar--right" class="toolbar--right"
> >
<div> <div
class="d-flex"
>
<button <button
class="Button emphasis--secondary" class="Button emphasis--secondary"
type="button" type="button"
@ -440,7 +446,9 @@ exports[`components/boardSelector renders without start searching 1`] = `
<div <div
class="toolbar--right" class="toolbar--right"
> >
<div> <div
class="d-flex"
>
<button <button
class="Button emphasis--secondary" class="Button emphasis--secondary"
type="button" type="button"

24
webapp/src/components/__snapshots__/cardDialog.test.tsx.snap
View file

@ -28,7 +28,9 @@ exports[`components/cardDialog already following card 1`] = `
<div <div
class="toolbar--right" class="toolbar--right"
> >
<div> <div
class="d-flex"
>
<button <button
type="button" type="button"
> >
@ -470,7 +472,9 @@ exports[`components/cardDialog return a cardDialog readonly 1`] = `
<div <div
class="toolbar--right" class="toolbar--right"
> >
<div> <div
class="d-flex"
>
<button <button
type="button" type="button"
> >
@ -599,7 +603,9 @@ exports[`components/cardDialog return cardDialog menu content 1`] = `
<div <div
class="toolbar--right" class="toolbar--right"
> >
<div> <div
class="d-flex"
>
<button <button
type="button" type="button"
> >
@ -946,7 +952,9 @@ exports[`components/cardDialog return cardDialog menu content and cancel delete
<div <div
class="toolbar--right" class="toolbar--right"
> >
<div> <div
class="d-flex"
>
<button <button
type="button" type="button"
> >
@ -1156,7 +1164,9 @@ exports[`components/cardDialog should match snapshot 1`] = `
<div <div
class="toolbar--right" class="toolbar--right"
> >
<div> <div
class="d-flex"
>
<button <button
type="button" type="button"
> >
@ -1366,7 +1376,9 @@ exports[`components/cardDialog should match snapshot without permissions 1`] = `
<div <div
class="toolbar--right" class="toolbar--right"
> >
<div> <div
class="d-flex"
>
<button <button
type="button" type="button"
> >

16
webapp/src/components/cardDialog.scss
View file

@ -12,19 +12,7 @@
.cardFollowBtn { .cardFollowBtn {
display: inline-flex; display: inline-flex;
&.attach { &--attach {
margin-right: 20px; margin-right: 8px;
color: rgba(var(--center-channel-color-rgb), 0.64);
background-color: rgba(var(--center-channel-color-rgb), 0.08);
}
&.follow {
color: rgba(var(--center-channel-color-rgb), 0.64);
background-color: rgba(var(--center-channel-color-rgb), 0.08);
}
&.unfollow {
color: rgb(var(--button-bg-rgb));
background-color: rgba(var(--button-bg-rgb), 0.08);
} }
} }

5
webapp/src/components/cardDialog.tsx
View file

@ -223,7 +223,8 @@ const CardDialog = (props: Props): JSX.Element => {
<BoardPermissionGate permissions={[Permission.ManageBoardCards]}> <BoardPermissionGate permissions={[Permission.ManageBoardCards]}>
<Button <Button
icon={<CompassIcon icon='paperclip'/>} icon={<CompassIcon icon='paperclip'/>}
className='cardFollowBtn attach' className='cardFollowBtn cardFollowBtn--attach'
emphasis='gray'
size='medium' size='medium'
onClick={addElement} onClick={addElement}
> >
@ -238,6 +239,7 @@ const CardDialog = (props: Props): JSX.Element => {
<> <>
<Button <Button
className='cardFollowBtn follow' className='cardFollowBtn follow'
emphasis='gray'
size='medium' size='medium'
onClick={() => mutator.followBlock(props.cardId, 'card', me!.id)} onClick={() => mutator.followBlock(props.cardId, 'card', me!.id)}
> >
@ -250,6 +252,7 @@ const CardDialog = (props: Props): JSX.Element => {
<> <>
<Button <Button
className='cardFollowBtn unfollow' className='cardFollowBtn unfollow'
emphasis='tertiary'
size='medium' size='medium'
onClick={() => mutator.unfollowBlock(props.cardId, 'card', me!.id)} onClick={() => mutator.unfollowBlock(props.cardId, 'card', me!.id)}
> >

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

@ -63,7 +63,7 @@ const Dialog = (props: Props) => {
{subtitle && <h5 className='dialog-subtitle'>{subtitle}</h5>} {subtitle && <h5 className='dialog-subtitle'>{subtitle}</h5>}
</div> </div>
<div className='toolbar--right'> <div className='toolbar--right'>
{toolbar && <div>{toolbar}</div>} {toolbar && <div className='d-flex'>{toolbar}</div>}
{toolsMenu && <MenuWrapper> {toolsMenu && <MenuWrapper>
<IconButton <IconButton
size='medium' size='medium'

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

@ -89,6 +89,34 @@
} }
} }
&.emphasis--quaternary {
background: transparent;
color: rgb(var(--button-bg-rgb));
&:hover {
background: rgba(var(--button-bg-rgb), 0.08);
}
&:active {
background-color: rgb(var(--button-bg-rgb), 0.12);
}
}
&.emphasis--gray {
background: transparent;
color: rgba(var(--center-channel-color-rgb), 0.64);
&:hover {
color: rgba(var(--center-channel-color-rgb), 0.72);
background: rgba(var(--center-channel-color-rgb), 0.08);
}
&:active {
color: rgb(var(--button-bg-rgb));
background-color: rgb(var(--button-bg-rgb), 0.12);
}
}
&.emphasis--danger { &.emphasis--danger {
color: rgb(var(--button-danger-color-rgb)); color: rgb(var(--button-danger-color-rgb));
background-color: rgb(var(--button-danger-bg-rgb)); background-color: rgb(var(--button-danger-bg-rgb));