diff --git a/src/components/BrowserFilter/BrowserFilter.scss b/src/components/BrowserFilter/BrowserFilter.scss
index 5585ba7d28..25bab6bf8e 100644
--- a/src/components/BrowserFilter/BrowserFilter.scss
+++ b/src/components/BrowserFilter/BrowserFilter.scss
@@ -22,7 +22,7 @@
&:hover svg {
fill: white;
}
-
+
&.disabled {
cursor: not-allowed;
color: #66637A;
@@ -98,7 +98,7 @@
padding: 11px 0;
text-align: center;
- > a {
+ > button {
margin-right: 10px;
&:last-child {
diff --git a/src/components/BrowserMenu/BrowserMenu.scss b/src/components/BrowserMenu/BrowserMenu.scss
index 4c357e980d..9c73ca3341 100644
--- a/src/components/BrowserMenu/BrowserMenu.scss
+++ b/src/components/BrowserMenu/BrowserMenu.scss
@@ -90,11 +90,10 @@
}
.item {
- padding: 6px 14px;
+ padding: 4px 14px;
white-space: nowrap;
cursor: pointer;
color: white;
- height: 26px;
&:hover {
background: $blue;
diff --git a/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js b/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js
index fdc088bea0..59a789a1a6 100644
--- a/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js
+++ b/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js
@@ -137,7 +137,7 @@ export default class ColumnsConfiguration extends React.Component {
onClick={this.showAll.bind(this)} />
diff --git a/src/components/Modal/Modal.react.js b/src/components/Modal/Modal.react.js
index 5bea30db9d..9a267b6203 100644
--- a/src/components/Modal/Modal.react.js
+++ b/src/components/Modal/Modal.react.js
@@ -55,26 +55,24 @@ let Modal = (({
let footer = customFooter || (
- {showCancel ? : null}
- }
+ { showContinue &&
- {
- showContinue === true ?
+ onClick={onContinue}
+ progress={progress} /> }
: null}
+ onClick={onConfirm}
+ progress={progress} />
);
diff --git a/src/components/Modal/Modal.scss b/src/components/Modal/Modal.scss
index e49cbd1b97..171c32e4cf 100644
--- a/src/components/Modal/Modal.scss
+++ b/src/components/Modal/Modal.scss
@@ -43,7 +43,7 @@
position: absolute;
font-size: 14px;
color: white;
- top: 49px;
+ top: 52px;
left: 28px;
}
diff --git a/src/components/PermissionsDialog/PermissionsDialog.scss b/src/components/PermissionsDialog/PermissionsDialog.scss
index bebaee7ef4..9bfd2837a1 100644
--- a/src/components/PermissionsDialog/PermissionsDialog.scss
+++ b/src/components/PermissionsDialog/PermissionsDialog.scss
@@ -12,18 +12,18 @@
$writeColWidth: 92px;
$addFieldColWidth: 118px;
$deleteColWidth: 44px;
-
+
$sumReadColsWidth: calc(3 * #{$colWidth});
$sumWriteColsWidth: calc(3 * #{$writeColWidth});
-
+
$permissionsDialogWidth: calc(#{$labelWidth} + (2 * #{$colWidth}) + #{$deleteColWidth});
$permissionsDialogMaxWidth: calc(#{$labelWidth} + #{$sumReadColsWidth} + #{$sumWriteColsWidth} + #{$addFieldColWidth} + #{$deleteColWidth});
-
+
$simplePointerWriteWidth: calc( #{$colWidth} + #{$addFieldColWidth});
$pointerWriteWidth: calc( #{$sumWriteColsWidth} + #{$addFieldColWidth});
-
+
$clpDialogWidth: calc(#{$permissionsDialogWidth} + #{$addFieldColWidth});
-
+
.dialog {
@include modalAnimation();
position: absolute;
@@ -35,10 +35,10 @@
overflow: hidden;
transition: width 0.3s 0.15s ease-out;
}
-
+
.clp{
width: $clpDialogWidth;
-
+
.level{
width: $clpDialogWidth;
}
@@ -47,13 +47,13 @@
width: $addFieldColWidth;
}
}
-
+
.clp.advanced{
.fourth {
width: $colWidth;
}
}
-
+
.header {
height: 50px;
background: $blue;
@@ -62,23 +62,23 @@
line-height: 50px;
font-size: 16px;
text-align: center;
-
+
.settings {
position: absolute;
top: 15px;
right: 15px;
cursor: pointer;
-
+
svg {
fill: #0E69A1;
vertical-align: top;
}
-
+
&:hover svg {
fill: #094367;
}
}
-
+
.arrow {
position: absolute;
@include arrow('up', 12px, 6px, #0E69A1);
@@ -86,8 +86,8 @@
right: 19px;
}
}
-
-
+
+
.level {
height: 50px;
width: $permissionsDialogWidth; // width: 658px;
@@ -95,14 +95,14 @@
position: relative;
color: white;
transition: width 0.3s 0.15s ease-out;
-
+
> div {
margin: 0;
position: absolute;
top: 10px;
right: 10px;
}
-
+
> span {
display: inline-block;
font-size: 12;
@@ -111,13 +111,13 @@
padding-left: 20px;
}
}
-
+
.tableWrap {
height: 300px;
overflow-y: auto;
overflow-x: hidden;
}
-
+
.second, .third, .fourth {
width: $colWidth;
}
@@ -130,18 +130,18 @@
.nineth {
width: $deleteColWidth;
}
-
+
.table {
position: relative;
min-height:300px;
-
+
.overlay {
position: absolute;
top: 0;
bottom: 0;
pointer-events: none;
background: rgba(0,0,40,0.03);
-
+
&.second {
left: $labelWidth;
}
@@ -156,31 +156,31 @@
}
}
}
-
+
.footer {
position: relative;
height: 51px;
border-top: 1px solid #e3e3ea;
-
+
.details {
font-size: 12px;
padding-left: 20px;
-
+
a {
color: $blue;
}
}
-
+
.actions {
float: right;
padding: 10px 15px;
-
- a {
+
+ button {
margin-left: 10px;
}
}
}
-
+
.headers {
overflow: hidden;
transition: height .3s cubic-bezier(0.645,0.045,0.355,1) .5s;
@@ -190,7 +190,7 @@
text-align: center;
color: white;
font-size: 12px;
-
+
div {
float: left;
border-left: 1px solid white;
@@ -199,32 +199,32 @@
vertical-align: top;
}
}
-
+
.readHeader {
width: $sumReadColsWidth;
}
-
+
.writeHeader {
width: $sumWriteColsWidth;
}
-
+
.addHeader {
width: $addFieldColWidth;
border-right: 1px solid white;
}
-
+
.advanced {
width: $permissionsDialogMaxWidth;
-
+
.level {
width: $permissionsDialogMaxWidth;
}
-
+
.headers {
height: 20px;
}
}
-
+
.row {
display: flex;
min-height: 50px;
@@ -238,14 +238,14 @@
background: rgba(14, 105, 161, 0.03);
}
}
-
+
.row.public {
background: rgba(22, 156, 238, 0.18);
border-bottom: 1px solid #0E69A1;
color: $blue;
}
-
-
+
+
.label {
display: inline-flex;
width: $labelWidth;
@@ -259,26 +259,26 @@
flex-direction: column;
align-self: center;
text-align: center;
-
+
> svg {
fill: $blue;
vertical-align: middle;
align-self: center;
}
}
-
+
.pointerRead {
display: inline-block;
width: $sumReadColsWidth;
padding: 5px 10px;
}
-
+
.pointerWrite {
width: $simplePointerWriteWidth;
padding: 0px 10px;
display: inline-block;
}
-
+
.checkboxWrap {
position: relative;
vertical-align: top;
@@ -289,7 +289,7 @@
border-radius: 5px;
background: white;
}
-
+
.entry {
height: 30px;
width: 290px;
@@ -301,12 +301,12 @@
margin: 10px 0 0 20px;
vertical-align: top;
}
-
+
.error {
border-color: $red;
color: $red;
}
-
+
.delete {
display: inline-block;
vertical-align: top;
@@ -318,18 +318,18 @@
button {
@include buttonReset;
}
-
+
svg {
vertical-align: top;
cursor: pointer;
fill: #C1C7CD;
-
+
&:hover {
fill: $red;
}
}
}
-
+
.pillHolder{
max-width: 100px;
position: relative;
diff --git a/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.scss b/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.scss
index 9750f8e5ac..32ad443596 100644
--- a/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.scss
+++ b/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.scss
@@ -110,7 +110,7 @@ $permissionsDialogWidth: calc(
float: right;
padding: 10px 15px;
- a {
+ button {
margin-left: 10px;
}
}
diff --git a/src/components/Sidebar/FooterMenu.react.js b/src/components/Sidebar/FooterMenu.react.js
deleted file mode 100644
index de471f5ce7..0000000000
--- a/src/components/Sidebar/FooterMenu.react.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
- * Copyright (c) 2016-present, Parse, LLC
- * All rights reserved.
- *
- * This source code is licensed under the license found in the LICENSE file in
- * the root directory of this source tree.
- */
-import Icon from 'components/Icon/Icon.react';
-import Popover from 'components/Popover/Popover.react';
-import Position from 'lib/Position';
-import React from 'react';
-import styles from 'components/Sidebar/Sidebar.scss';
-
-let mountPath = window.PARSE_DASHBOARD_PATH;
-
-export default class FooterMenu extends React.Component {
- constructor() {
- super();
-
- this.state = {
- show: false,
- position: null,
- };
- this.moreRef = React.createRef();
- }
-
- toggle() {
- let pos = Position.inWindow(this.moreRef.current);
- pos.x += 95;
- this.setState({
- show: true,
- position: pos
- });
- }
-
- render() {
- if (this.props.isCollapsed) {
- return (
-
-
-
- );
- }
-
- let content = null;
- if (this.state.show) {
- content = (
- this.setState({ show: false })}>
-
-
- );
- }
- return (
-
-
- {content}
-
- );
- }
-}
diff --git a/src/components/Sidebar/Sidebar.react.js b/src/components/Sidebar/Sidebar.react.js
index cc51068214..80764af925 100644
--- a/src/components/Sidebar/Sidebar.react.js
+++ b/src/components/Sidebar/Sidebar.react.js
@@ -8,7 +8,6 @@
import AppsManager from 'lib/AppsManager';
import AppsMenu from 'components/Sidebar/AppsMenu.react';
import AppName from 'components/Sidebar/AppName.react';
-import FooterMenu from 'components/Sidebar/FooterMenu.react';
import isInsidePopover from 'lib/isInsidePopover';
import Pin from 'components/Sidebar/Pin.react';
import React, { useEffect, useState, useContext } from 'react';
@@ -17,6 +16,8 @@ import SidebarSection from 'components/Sidebar/SidebarSection.react';
import SidebarSubItem from 'components/Sidebar/SidebarSubItem.react';
import styles from 'components/Sidebar/Sidebar.scss';
import { CurrentApp } from 'context/currentApp';
+import Icon from 'components/Icon/Icon.react';
+let mountPath = window.PARSE_DASHBOARD_PATH;
const Sidebar = ({
prefix,
@@ -35,6 +36,10 @@ const Sidebar = ({
const [ appsMenuOpen, setAppsMenuOpen ] = useState(false);
const [ collapsed, setCollapsed ] = useState(false);
const [ fixed, setFixed ] = useState(true);
+ const [dashboardUser, setDashboardUser] = useState('');
+ fetch(mountPath).then(response => {
+ setDashboardUser(response.headers.get('username'))
+ })
let currentWidth = window.innerWidth;
const windowResizeHandler = () => {
@@ -176,11 +181,14 @@ const Sidebar = ({
: undefined
}
>
-
+
{sidebarContent}
-
-
-
+ {dashboardUser && }
);
}
diff --git a/src/components/Sidebar/Sidebar.scss b/src/components/Sidebar/Sidebar.scss
index 6281bcaaf2..ea515b2af2 100644
--- a/src/components/Sidebar/Sidebar.scss
+++ b/src/components/Sidebar/Sidebar.scss
@@ -53,8 +53,6 @@ $footerHeight: 36px;
@include DosisFont;
position: absolute;
background: #05283c;
- height: $footerHeight;
- line-height: 18px;
padding: 9px 0;
text-align: center;
bottom: 0;
@@ -65,12 +63,11 @@ $footerHeight: 36px;
color: white;
text-decoration: none;
border-right: 1px solid #385261;
- height: 18px;
- line-height: 18px;
font-size: 13px;
padding: 0 12px;
vertical-align: top;
+
&:first-child {
padding-left: 0;
}
@@ -79,10 +76,6 @@ $footerHeight: 36px;
border: none;
}
}
-
- svg {
- margin-top: -2px;
- }
}
.header {
@@ -319,6 +312,8 @@ a.subitem {
width: 75px;
height: 100%;
font-size: 10px;
+ display: flex;
+ align-items: center;
float: left;
margin-left: 6px;
white-space: nowrap;
@@ -327,20 +322,23 @@ a.subitem {
> *:first-child {
position: absolute;
letter-spacing: 2px;
- line-height: 10px;
+ line-height: 12px;
text-transform: uppercase;
}
> *:first-child {
- top: 10px;
transition: all 0.4s 0.16s cubic-bezier(0.77, 0, 0.175, 1);
}
}
.more {
+ display: flex;
+ justify-content: center;
+ align-items: center;
svg {
fill: #0C5582;
transition: fill 0.2s ease-in;
+ margin-right: 4px;
}
&:hover {
diff --git a/src/components/Sidebar/SidebarHeader.react.js b/src/components/Sidebar/SidebarHeader.react.js
index bab045fe4f..03c3b82b2d 100644
--- a/src/components/Sidebar/SidebarHeader.react.js
+++ b/src/components/Sidebar/SidebarHeader.react.js
@@ -17,14 +17,8 @@ export default class SidebarHeader extends React.Component {
super();
this.state = { };
}
- componentWillMount() {
- let mountPath = window.PARSE_DASHBOARD_PATH;
- fetch(mountPath).then(response => {
- this.setState({ dashboardUser: response.headers.get('username') });
- });
- }
render() {
- const { isCollapsed = false } = this.props;
+ const { isCollapsed = false, dashboardUser } = this.props;
const headerContent = isCollapsed
? (
@@ -41,7 +35,7 @@ export default class SidebarHeader extends React.Component {
Parse Dashboard {version}
- {this.state.dashboardUser}
+ {dashboardUser}
diff --git a/src/components/Toolbar/Toolbar.scss b/src/components/Toolbar/Toolbar.scss
index 847333f017..d56f51068a 100644
--- a/src/components/Toolbar/Toolbar.scss
+++ b/src/components/Toolbar/Toolbar.scss
@@ -83,5 +83,5 @@ body:global(.expanded) {
.actions {
position: absolute;
right: 14px;
- top: 0;
+ top: 4px;
}
diff --git a/src/dashboard/Data/Browser/Browser.scss b/src/dashboard/Data/Browser/Browser.scss
index 970c84cf60..93ecb0232f 100644
--- a/src/dashboard/Data/Browser/Browser.scss
+++ b/src/dashboard/Data/Browser/Browser.scss
@@ -53,7 +53,7 @@ body:global(.expanded) {
color: #ffffff;
cursor: pointer;
height: 14px;
- padding: 0 8px;
+ padding: 0 12px;
svg {
vertical-align: middle;
diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index 13da8dce27..85968ec443 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -217,7 +217,7 @@ export default class BrowserTable extends React.Component {
this.props.onSaveNewRow();
this.props.setEditing(false);
}}
- additionalStyles={{ fontSize: '12px', height: '20px', lineHeight: '20px', margin: '5px', padding: '0'}}
+ additionalStyles={{ fontSize: '12px', height: '20px', lineHeight: '20px', margin: '5px', marginRight: '0px', padding: '0'}}
/>