self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-01-23 18:34:02 +02:00
Code Issues Releases Activity

GH-1919 fix unexpected dialog close (#2828)

Browse Source 
* fix: seperate dialog backdrop and wrapper

* test: update snapshot
This commit is contained in:
KyeongSoo Kim 2022-05-19 17:31:53 +09:00 committed by GitHub
parent 1923846b21
commit 6e7326d4e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 82 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
webapp/src/components/__snapshots__/cardDialog.test.tsx.snap
View File

@ -5,6 +5,9 @@ exports[`components/cardDialog already following card 1`] = `
<div
class="Dialog dialog-back cardDialog"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>
@ -285,6 +288,9 @@ exports[`components/cardDialog return a cardDialog readonly 1`] = `
<div
class="Dialog dialog-back cardDialog"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>
@ -394,6 +400,9 @@ exports[`components/cardDialog return cardDialog menu content 1`] = `
<div
class="Dialog dialog-back cardDialog"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>
@ -783,6 +792,9 @@ exports[`components/cardDialog return cardDialog menu content and cancel delete
<div
class="Dialog dialog-back cardDialog"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>
@ -1063,6 +1075,9 @@ exports[`components/cardDialog should match snapshot 1`] = `
<div
class="Dialog dialog-back cardDialog"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>
@ -1343,6 +1358,9 @@ exports[`components/cardDialog should match snapshot without permissions 1`] = `
<div
class="Dialog dialog-back cardDialog"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>

6
webapp/src/components/__snapshots__/confirmationDialogBox.test.tsx.snap
View File

@ -5,6 +5,9 @@ exports[`/components/confirmationDialogBox confirmDialog should match snapshot 1
<div
class="Dialog dialog-back confirmation-dialog-box"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>
@ -77,6 +80,9 @@ exports[`/components/confirmationDialogBox confirmDialog with Confirm Button Tex
<div
class="Dialog dialog-back confirmation-dialog-box"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>

6
webapp/src/components/__snapshots__/dialog.test.tsx.snap
View File

@ -5,6 +5,9 @@ exports[`components/dialog should match snapshot 1`] = `
<div
class="Dialog dialog-back undefined"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>
@ -43,6 +46,9 @@ exports[`components/dialog should return dialog and click on cancel button 1`] =
<div
class="Dialog dialog-back undefined"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>

3
webapp/src/components/boardTemplateSelector/__snapshots__/boardTemplateSelectorItem.test.tsx.snap
View File

@ -145,6 +145,9 @@ exports[`components/boardTemplateSelector/boardTemplateSelectorItem should trigg
<div
class="Dialog dialog-back DeleteBoardDialog"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>

10
webapp/src/components/dialog.scss
View File

@ -8,11 +8,17 @@
z-index: 200;
}
.wrapper {
position: absolute;
.backdrop {
position: fixed;
z-index: -1;
width: 100%;
height: 100%;
background-color: rgba(var(--center-channel-color-rgb), 0.5);
}
.wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;

17
webapp/src/components/dialog.tsx
View File

@ -1,6 +1,6 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import React, {useRef} from 'react'
import {useIntl} from 'react-intl'
import {useHotkeys} from 'react-hotkeys-hook'
@ -31,14 +31,25 @@ const Dialog = (props: Props) => {
useHotkeys('esc', () => props.onClose())
const isBackdropClickedRef = useRef(false)
return (
<div className={`Dialog dialog-back ${props.className}`}>
<div className='backdrop'/>
<div
className='wrapper'
onClick={(e) => {
e.stopPropagation()
if (e.target === e.currentTarget) {
props.onClose()
if(!isBackdropClickedRef.current){
return
}
isBackdropClickedRef.current = false
props.onClose()
}}
onMouseDown={(e) => {
if(e.target === e.currentTarget){
isBackdropClickedRef.current = true
}
}}
>

27
webapp/src/components/shareBoard/__snapshots__/shareBoard.test.tsx.snap
View File

@ -5,6 +5,9 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy l
<div
class="Dialog dialog-back ShareBoardDialog"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>
@ -1213,6 +1216,9 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Select
<div
class="Dialog dialog-back ShareBoardDialog"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>
@ -1410,6 +1416,9 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Select
<div
class="Dialog dialog-back ShareBoardDialog"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>
@ -1729,6 +1738,9 @@ exports[`src/components/shareBoard/shareBoard return shareBoard, and click switc
<div
class="Dialog dialog-back ShareBoardDialog"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>
@ -1975,6 +1987,9 @@ exports[`src/components/shareBoard/shareBoard return shareBoardComponent and cli
<div
class="Dialog dialog-back ShareBoardDialog"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>
@ -2221,6 +2236,9 @@ exports[`src/components/shareBoard/shareBoard should match snapshot 1`] = `
<div
class="Dialog dialog-back ShareBoardDialog"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>
@ -2444,6 +2462,9 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
<div
class="Dialog dialog-back ShareBoardDialog"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>
@ -2667,6 +2688,9 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
<div
class="Dialog dialog-back ShareBoardDialog"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>
@ -2890,6 +2914,9 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
<div
class="Dialog dialog-back ShareBoardDialog"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>