mattermost-community · harshilsharma63 · May 27, 2021 · Apr 24, 2021 · Apr 24, 2021 · Apr 28, 2021
diff --git a/server/go.mod b/server/go.mod
@@ -27,6 +27,7 @@ require (
 	github.com/tidwall/gjson v1.7.3 // indirect
 	go.uber.org/zap v1.16.0
 	golang.org/x/crypto v0.0.0-20210322153248-0c34fe9e7dc2
+	golang.org/x/oauth2 v0.0.0-20200107190931-bf48bf16ab8d
 	golang.org/x/sys v0.0.0-20210324051608-47abb6519492 // indirect
 	gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c // indirect
 )
diff --git a/server/go.sum b/server/go.sum
@@ -1166,6 +1166,7 @@ golang.org/x/oauth2 v0.0.0-20190226205417-e64efc72b421/go.mod h1:gOpvHmFTYa4Iltr
 golang.org/x/oauth2 v0.0.0-20190319182350-c85d3e98c914/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
 golang.org/x/oauth2 v0.0.0-20190604053449-0f29369cfe45/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
 golang.org/x/oauth2 v0.0.0-20191202225959-858c2ad4c8b6/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
+golang.org/x/oauth2 v0.0.0-20200107190931-bf48bf16ab8d h1:TzXSXBo42m9gQenoE3b9BGiEpg5IG2JkU5FkPIawgtw=
 golang.org/x/oauth2 v0.0.0-20200107190931-bf48bf16ab8d/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
 golang.org/x/perf v0.0.0-20180704124530-6e6d33e29852/go.mod h1:JLpeXjPJfIyPr5TlbXLkXWLhP8nz10XfvxElABhCtcw=
 golang.org/x/sync v0.0.0-20180314180146-1d60e4601c6f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
@@ -1359,6 +1360,7 @@ google.golang.org/appengine v1.4.0/go.mod h1:xpcJRLb0r/rnEns0DIKYYv+WjYCduHsrkT7
 google.golang.org/appengine v1.5.0/go.mod h1:xpcJRLb0r/rnEns0DIKYYv+WjYCduHsrkT7/EB5XEv4=
 google.golang.org/appengine v1.6.1/go.mod h1:i06prIuMbXzDqacNJfV5OdTW448YApPu5ww/cMBSeb0=
 google.golang.org/appengine v1.6.5/go.mod h1:8WjMMxjGQR8xUklV/ARdw2HLXBOI7O7uCIDZVag1xfc=
+google.golang.org/appengine v1.6.6 h1:lMO5rYAqUxkmaj76jAkRUvt5JZgFymx/+Q5Mzfivuhc=
 google.golang.org/appengine v1.6.6/go.mod h1:8WjMMxjGQR8xUklV/ARdw2HLXBOI7O7uCIDZVag1xfc=
 google.golang.org/genproto v0.0.0-20170818010345-ee236bd376b0/go.mod h1:JiN7NxoALGmiZfu7CAH4rXhgtRTLTxftemlI0sWmxmc=
 google.golang.org/genproto v0.0.0-20180817151627-c66870c02cf8/go.mod h1:JiN7NxoALGmiZfu7CAH4rXhgtRTLTxftemlI0sWmxmc=

diff --git a/webapp/cypress/integration/createBoard.js b/webapp/cypress/integration/createBoard.js
@@ -25,7 +25,7 @@ describe('Create and delete board / card', () => {
 
     it('Can set the board title', () => {
         // Board title
-        cy.get('.ViewTitle>.Editable.title').
+        cy.get('.Editable.title').
             type(boardTitle).
             type('{enter}').
             should('have.value', boardTitle);

diff --git a/webapp/src/components/cardDetail/cardDetail.scss b/webapp/src/components/cardDetail/cardDetail.scss
@@ -1,7 +1,4 @@
 .CardDetail {
-    .title {
-        width: 100%;
-    }
 
     .add-buttons {
         display: flex;

diff --git a/webapp/src/components/centerPanel.scss b/webapp/src/components/centerPanel.scss
@@ -1,8 +1,48 @@
 .CenterPanel {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+
     .octo-board {
         flex: 0 1 auto;
 
         display: flex;
         flex-direction: column;
     }
 }
+
+
+.BoardComponent {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+
+    > * {
+
+        padding: 0 80px;
+
+        @media screen and (max-width: 768px) {
+            padding: 0 40px;
+        }
+
+        &:first-child {
+            padding-top: 24px;
+            @media screen and (max-width: 768px) {
+                padding: 0 8px;
+            }
+        }
+
+        &:last-child {
+            padding-bottom: 8px;
+        }
+    }
+
+    > .top-head {
+        position: sticky;
+        top: 0;
+        left: 0;
+        background: rgb(var(--main-bg));
+        z-index: 100;
+    }
+}
diff --git a/webapp/src/components/centerPanel.tsx b/webapp/src/components/centerPanel.tsx
@@ -107,7 +107,7 @@ class CenterPanel extends React.Component<Props, State> {
 
         return (
             <div
-                className='BoardComponent octo-app'
+                className='BoardComponent'
                 ref={this.backgroundRef}
                 onClick={(e) => {
                     this.backgroundClicked(e)
@@ -129,54 +129,55 @@ class CenterPanel extends React.Component<Props, State> {
                     />
                 </RootPortal>}
 
-                <div className='octo-frame'>
+                <div className='top-head'>
                     <TopBar/>
                     <ViewTitle
                         key={board.id + board.title}
                         board={board}
                         readonly={this.props.readonly}
                     />
-
-                    <div className={activeView.viewType === 'board' ? 'octo-board' : 'octo-table'}>
-                        <ViewHeader
-                            boardTree={boardTree}
-                            showView={showView}
-                            setSearchText={this.props.setSearchText}
-                            addCard={() => this.addCard('', true)}
-                            addCardFromTemplate={this.addCardFromTemplate}
-                            addCardTemplate={this.addCardTemplate}
-                            editCardTemplate={this.editCardTemplate}
-                            readonly={this.props.readonly}
-                        />
-                        {activeView.viewType === 'board' &&
-                            <Kanban
-                                boardTree={boardTree}
-                                selectedCardIds={this.state.selectedCardIds}
-                                readonly={this.props.readonly}
-                                onCardClicked={this.cardClicked}
-                                addCard={this.addCard}
-                            />}
-                        {activeView.viewType === 'table' &&
-                            <Table
-                                boardTree={boardTree}
-                                selectedCardIds={this.state.selectedCardIds}
-                                readonly={this.props.readonly}
-                                cardIdToFocusOnRender={this.state.cardIdToFocusOnRender}
-                                showCard={this.showCard}
-                                addCard={(show) => this.addCard('', show)}
-                                onCardClicked={this.cardClicked}
-                                intl={this.props.intl}
-                            />}
-                        {activeView.viewType === 'gallery' &&
-                            <Gallery
-                                boardTree={boardTree}
-                                readonly={this.props.readonly}
-                                onCardClicked={this.cardClicked}
-                                selectedCardIds={this.state.selectedCardIds}
-                                addCard={(show) => this.addCard('', show)}
-                            />}
-                    </div>
+                    <ViewHeader
+                        boardTree={boardTree}
+                        showView={showView}
+                        setSearchText={this.props.setSearchText}
+                        addCard={() => this.addCard('', true)}
+                        addCardFromTemplate={this.addCardFromTemplate}
+                        addCardTemplate={this.addCardTemplate}
+                        editCardTemplate={this.editCardTemplate}
+                        readonly={this.props.readonly}
+                    />
                 </div>
+
+                {activeView.viewType === 'board' &&
+                <Kanban
+                    boardTree={boardTree}
+                    selectedCardIds={this.state.selectedCardIds}
+                    readonly={this.props.readonly}
+                    onCardClicked={this.cardClicked}
+                    addCard={this.addCard}
+                />}
+
+                {activeView.viewType === 'table' &&
+                <Table
+                    boardTree={boardTree}
+                    selectedCardIds={this.state.selectedCardIds}
+                    readonly={this.props.readonly}
+                    cardIdToFocusOnRender={this.state.cardIdToFocusOnRender}
+                    showCard={this.showCard}
+                    addCard={(show) => this.addCard('', show)}
+                    onCardClicked={this.cardClicked}
+                    intl={this.props.intl}
+                />}
+
+                {activeView.viewType === 'gallery' &&
+                <Gallery
+                    boardTree={boardTree}
+                    readonly={this.props.readonly}
+                    onCardClicked={this.cardClicked}
+                    selectedCardIds={this.state.selectedCardIds}
+                    addCard={(show) => this.addCard('', show)}
+                />}
+
             </div>
         )
     }

diff --git a/webapp/src/components/dialog.scss b/webapp/src/components/dialog.scss
@@ -5,8 +5,13 @@
         left: 0;
         right: 0;
         bottom: 0;
-        z-index: 10;
+        z-index: 200;
+    }
 
+    .wrapper {
+        position: absolute;
+        width: 100%;
+        height: 100%;
         background-color: rgba(var(--body-color), 0.5);
     }
 

diff --git a/webapp/src/components/dialog.tsx b/webapp/src/components/dialog.tsx
@@ -36,28 +36,30 @@ const Dialog = React.memo((props: Props) => {
                 }
             }}
         >
-            <div className='dialog' >
-                <div className='toolbar'>
-                    {toolsMenu &&
-                    <>
-                        <IconButton
-                            onClick={props.onClose}
-                            icon={<CloseIcon/>}
-                            title={closeDialogText}
-                            className='IconButton--large'
-                        />
-                        <div className='octo-spacer'/>
-                        <MenuWrapper>
+            <div className='wrapper' >
+                <div className='dialog' >
+                    <div className='toolbar'>
+                        {toolsMenu &&
+                        <>
                             <IconButton
+                                onClick={props.onClose}
+                                icon={<CloseIcon/>}
+                                title={closeDialogText}
                                 className='IconButton--large'
-                                icon={<OptionsIcon/>}
                             />
-                            {toolsMenu}
-                        </MenuWrapper>
-                    </>
-                    }
+                            <div className='octo-spacer'/>
+                            <MenuWrapper>
+                                <IconButton
+                                    className='IconButton--large'
+                                    icon={<OptionsIcon/>}
+                                />
+                                {toolsMenu}
+                            </MenuWrapper>
+                        </>
+                        }
+                    </div>
+                    {props.children}
                 </div>
-                {props.children}
             </div>
         </div>
     )

diff --git a/webapp/src/components/gallery/galleryCard.scss b/webapp/src/components/gallery/galleryCard.scss
@@ -27,7 +27,7 @@
         position: absolute;
         right: 10px;
         top: 10px;
-        z-index: 3000;
+        z-index: 30;
         .IconButton {
             background-color: rgba(var(--body-color), 0.13);
         }

diff --git a/webapp/src/components/kanban/kanban.scss b/webapp/src/components/kanban/kanban.scss
@@ -4,8 +4,11 @@
         flex-direction: row;
 
         min-height: 30px;
-        margin-bottom: 16px;
+        padding-bottom: 16px;
         color: #909090;
+        position: fixed;
+        z-index: 1;
+        background: rgb(var(--main-bg));
     }
 
     .octo-board-header-cell {
@@ -55,6 +58,7 @@
         display: flex;
         flex-direction: row;
         flex: 0 1 auto;
+        margin-top: 50px;
     }
 
     .octo-board-column {

diff --git a/webapp/src/components/table/table.scss b/webapp/src/components/table/table.scss
@@ -88,6 +88,10 @@
     }
 
     .octo-table-header {
+        position: fixed;
+        z-index: 1;
+        background: rgb(var(--main-bg));
+
         .octo-table-cell {
             color: rgba(var(--body-color), 0.6);
 
@@ -112,7 +116,7 @@
         }
     }
 
-    .MenuWrapper {  
+    .MenuWrapper {
         width: 100%;
         max-width: calc(100% - 5px);
 

diff --git a/webapp/src/components/table/tableRow.scss b/webapp/src/components/table/tableRow.scss
@@ -10,7 +10,7 @@
             color: rgba(var(--body-color), 0.64);
             background-color: rgba(var(--body-color), 0.1);
             box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px,
-                rgba(var(--body-color), 0.1) 0px 2px 4px;
+            rgba(var(--body-color), 0.1) 0px 2px 4px;
             height: 90%;
             width: 100%;
         }
@@ -27,4 +27,8 @@
             display: block;
         }
     }
+
+    &:nth-child(2) {
+        margin-top: 48px;
+    }
 }
diff --git a/webapp/src/components/viewTitle.scss b/webapp/src/components/viewTitle.scss
@@ -1,16 +1,21 @@
 .ViewTitle {
-    flex: 0 0 auto;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    min-width: 300px;
+    > div {
+        flex: 0 0 auto;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        min-width: 300px;
+    }
 
-    &.add-buttons {
+    > .add-buttons {
         flex-direction: row;
         min-height: 30px;
         color: rgba(var(--body-color), 0.4);
         width: 100%;
         align-items: flex-start;
+        .Icon {
+            margin-left: 0.5em;
+        }
         .Button {
             display: none;
         }
@@ -30,7 +35,7 @@
         flex-grow: 1;
     }
 
-    &.description > * {
+    > .description > * {
         flex-grow: 1;
     }
 }