mirror of
https://github.com/filecoin-project/slate.git
synced 2024-12-24 17:44:50 +03:00
Sidebar css updates and added modals
Fixed css bug with the modal and sidebar, and replaced more window confirms
This commit is contained in:
parent
2050f10f52
commit
494511b9ef
@ -51,13 +51,11 @@ const STYLES_CONTENT = css`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const STYLES_SIDEBAR = css`
|
const STYLES_SIDEBAR_ELEMENTS = css`
|
||||||
z-index: ${Constants.zindex.sidebar};
|
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: ${Constants.sizes.sidebar}px;
|
width: ${Constants.sizes.sidebar}px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
position: fixed;
|
|
||||||
background-color: rgba(195, 195, 196, 1);
|
background-color: rgba(195, 195, 196, 1);
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
@ -66,12 +64,20 @@ const STYLES_SIDEBAR = css`
|
|||||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
/*
|
||||||
@supports ((-webkit-backdrop-filter: blur(25px)) or (backdrop-filter: blur(25px))) {
|
@supports ((-webkit-backdrop-filter: blur(25px)) or (backdrop-filter: blur(25px))) {
|
||||||
-webkit-backdrop-filter: blur(25px);
|
-webkit-backdrop-filter: blur(25px);
|
||||||
backdrop-filter: blur(25px);
|
backdrop-filter: blur(25px);
|
||||||
background-color: rgba(195, 195, 196, 0.6);
|
background-color: rgba(195, 195, 196, 0.6);
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
`;
|
||||||
|
|
||||||
|
const STYLES_SIDEBAR = css`
|
||||||
|
position: fixed;
|
||||||
|
top: 0; right: 0;
|
||||||
|
margin: auto;
|
||||||
|
z-index: ${Constants.zindex.sidebar};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const STYLES_SIDEBAR_HEADER = css`
|
const STYLES_SIDEBAR_HEADER = css`
|
||||||
@ -202,13 +208,15 @@ export default class ApplicationLayout extends React.Component {
|
|||||||
enabled
|
enabled
|
||||||
onOutsideRectEvent={this._handleDismiss}
|
onOutsideRectEvent={this._handleDismiss}
|
||||||
>
|
>
|
||||||
<div
|
<div css={STYLES_SIDEBAR}>
|
||||||
css={STYLES_SIDEBAR}
|
<div
|
||||||
ref={(c) => {
|
css={STYLES_SIDEBAR_ELEMENTS}
|
||||||
this._sidebar = c;
|
ref={(c) => {
|
||||||
}}
|
this._sidebar = c;
|
||||||
>
|
}}
|
||||||
{sidebarElements}
|
>
|
||||||
|
{sidebarElements}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Boundary>
|
</Boundary>
|
||||||
) : null}
|
) : null}
|
||||||
|
@ -10,12 +10,12 @@ import { Boundary } from "~/components/system/components/fragments/Boundary.js";
|
|||||||
|
|
||||||
const STYLES_TRANSPARENT_BG = css `
|
const STYLES_TRANSPARENT_BG = css `
|
||||||
background-color: ${Constants.system.bgBlurGrayBlack};
|
background-color: ${Constants.system.bgBlurGrayBlack};
|
||||||
width: 100%;
|
z-index: ${Constants.zindex.modal};
|
||||||
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 999999;
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const STYLES_MAIN_MODAL = css `
|
const STYLES_MAIN_MODAL = css `
|
||||||
|
@ -309,13 +309,12 @@ export default class SidebarSingleSlateSettings extends React.Component {
|
|||||||
</System.ButtonWarning>
|
</System.ButtonWarning>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{this.state.modalShow && (
|
{this.state.modalShow && (
|
||||||
<ConfirmationModal
|
<ConfirmationModal
|
||||||
type={"DELETE"}
|
type={"DELETE"}
|
||||||
withValidation={false}
|
withValidation={false}
|
||||||
callback={this._handleDelete}
|
callback={this._handleDelete}
|
||||||
header={`Are you sure you want to delete the collection?`}
|
header={`Are you sure you want to delete the collection “${this.state.slatename}”?`}
|
||||||
subHeader={`This collection will be deleted but all your files will remain in your file library. You can’t undo this action.`}
|
subHeader={`This collection will be deleted but all your files will remain in your file library. You can’t undo this action.`}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
@ -140,13 +140,13 @@ export default class SceneSettingsDeveloper extends React.Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
_handleDelete = async (id) => {
|
_handleDelete = async (id) => {
|
||||||
this.setState({ loading: true });
|
this.setState({ loading: true, modalShow: false });
|
||||||
|
|
||||||
const response = await Actions.deleteAPIKey({ id });
|
const response = await Actions.deleteAPIKey({ id });
|
||||||
|
|
||||||
Events.hasError(response);
|
Events.hasError(response);
|
||||||
|
|
||||||
this.setState({ loading: false, modalShow: false });
|
this.setState({ loading: false });
|
||||||
};
|
};
|
||||||
|
|
||||||
_handleChangeLanguage = (newLanguage) => {
|
_handleChangeLanguage = (newLanguage) => {
|
||||||
|
Loading…
Reference in New Issue
Block a user