self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-10-31 00:17:42 +02:00
Code Issues Releases Activity

GH-2927 - Reducing header size for boards (#2930)

Browse Source 
* GH-2927 - Reducing header size for boards

* Updating header alignment

* Updating test
This commit is contained in:
Asaad Mahmood
2022-05-02 12:54:11 +05:00
committed by GitHub
parent f4541630e7
commit cff702462a
11 changed files with 52 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
webapp/cypress/integration/createBoard.ts
View File

@@ -72,12 +72,12 @@ describe('Create and delete board / card', () => {
cy.log('**Create card**')
cy.get('.ViewHeader').contains('New').click()
cy.get('.CardDetail').should('exist')
//Check title has focus when card is created
cy.log('**Check title has focus when card is created**')
cy.get('.CardDetail .EditableArea.title').
should('have.focus')
// Change card title
cy.log('**Change card title**')
// eslint-disable-next-line cypress/no-unnecessary-waiting
@@ -178,7 +178,7 @@ describe('Create and delete board / card', () => {
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.get('.Kanban').
trigger('dragover', {clientX: 400, clientY: Cypress.config().viewportHeight / 2}).
wait(3500).
wait(4500).
trigger('dragend')
cy.get('.Kanban').invoke('scrollLeft').should('equal', 0)

17
webapp/src/components/centerPanel.scss
View File

@@ -19,15 +19,15 @@
overflow: hidden;
> * {
padding: 0 80px;
padding: 0 32px;
@media screen and (max-width: 768px) {
padding: 0 40px;
}
&:first-child {
padding-top: 24px;
padding-top: 8px;
@media screen and (max-width: 768px) {
padding: 0 8px;
}
@@ -46,22 +46,29 @@
z-index: 100;
> .mid-head {
margin-top: 24px;
flex: 0 0 auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.ViewTitle {
flex: 1;
padding-right: 16px;
padding: 0 16px 0 0;
position: relative;
min-height: 40px;
justify-content: center;
display: flex;
flex-direction: column;
}
}
> div:nth-child(2) {
padding: 0 0 0 1px;
margin-left: 80px;
margin-left: 32px;
@media (max-width: 768px) {
margin-left: 0;

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

@@ -19,9 +19,9 @@
}
&.size-m {
height: 48px;
width: 48px;
font-size: 36px;
height: 28px;
width: 28px;
font-size: 22px;
}
&.size-l {

4
webapp/src/components/shareBoard/shareBoardButton.scss
View File

@@ -1,4 +0,0 @@
.ShareBoardButton {
margin-top: 38px;
}

4
webapp/src/components/shareBoard/shareBoardLoginButton.scss
View File

@@ -1,4 +0,0 @@
.ShareBoardLoginButton {
margin-top: 38px;
}

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

@@ -1,7 +1,7 @@
.TopBar {
position: absolute;
top: 10px;
right: 25px;
top: 8px;
right: 32px;
z-index: 10;
display: flex;
@@ -14,7 +14,7 @@
}
a.link {
font-size: 14px;
font-size: 12px;
line-height: 14px;
padding: 2px 10px;
color: rgba(var(--center-channel-color-rgb), 0.72);

4
webapp/src/components/viewHeader/viewHeader.scss
View File

@@ -5,7 +5,7 @@
border-bottom: solid 1px rgba(var(--center-channel-color-rgb), 0.16);
margin: 16px 0 0;
padding: 12px 8px;
padding: 8px 0;
color: rgba(var(--center-channel-color-rgb), 0.64);
align-items: center;
@@ -46,8 +46,6 @@
display: flex;
flex-direction: row;
position: relative;
padding: 6px 8px;
margin: -8px;
.MenuWrapper {
display: flex;

11
webapp/src/components/viewTitle.scss
View File

@@ -3,16 +3,18 @@
flex: 0 0 auto;
display: flex;
flex-direction: row;
align-items: center;
align-items: flex-start;
min-width: 300px;
min-height: 28px;
}
> .add-buttons {
flex-direction: row;
min-height: 36px;
color: rgba(var(--center-channel-color-rgb), 0.4);
width: 100%;
align-items: flex-start;
position: absolute;
top: -28px;
.Icon:last-child {
margin-left: 6px;
@@ -23,7 +25,6 @@
}
.Button {
min-height: 28px;
display: none;
line-height: 1;
}
@@ -36,12 +37,14 @@
}
.IconSelector {
margin-right: 10px;
margin-right: 8px;
}
.Editable {
margin-bottom: 0;
flex-grow: 1;
font-size: 25px;
line-height: 30px;
}
>.description>* {

6
webapp/src/components/viewTitle.tsx
View File

@@ -46,7 +46,7 @@ const ViewTitle = (props: Props) => {
{!readonly && !board.icon &&
<Button
emphasis='default'
size='small'
size='xsmall'
onClick={onAddRandomIcon}
icon={
<CompassIcon
@@ -62,7 +62,7 @@ const ViewTitle = (props: Props) => {
{!readonly && board.showDescription &&
<Button
emphasis='default'
size='small'
size='xsmall'
onClick={onHideDescription}
icon={
<CompassIcon
@@ -78,7 +78,7 @@ const ViewTitle = (props: Props) => {
{!readonly && !board.showDescription &&
<Button
emphasis='default'
size='small'
size='xsmall'
onClick={onShowDescription}
icon={
<CompassIcon

8
webapp/src/styles/_typography.scss
View File

@@ -6,14 +6,6 @@ h3,
font-weight: 600;
}
.focalboard-body {
.title {
font-size: 40px;
line-height: 40px;
margin: 0 0 10px;
}
}
.font-semibold {
font-weight: 600;
}

20
webapp/src/widgets/buttons/button.scss
View File

@@ -109,6 +109,26 @@
color: rgb(var(--button-bg-rgb));
}
&.size--xsmall {
font-size: 12px;
padding: 0 10px;
height: 24px;
.CompassIcon {
font-size: 14.4px;
width: 12px;
height: 12px;
&:first-child {
margin-right: 6px;
}
&:last-child {
margin-left: 6px;
}
}
}
&.size--small {
font-size: 12px;
padding: 0 16px;