Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Force light theme on the whole editor except the header (#3143)

Browse Source
This commit is contained in:
Hetu Nandu 2021-02-23 15:37:13 +05:30 committed by GitHub
parent d20d013d69
commit 3a5e0b30bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 72 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/client/src/pages/Editor/APIEditor/Form.tsx
View File

@ -1,6 +1,6 @@
import React, { useState } from "react";
import { connect, useSelector } from "react-redux";
import { reduxForm, InjectedFormProps, formValueSelector } from "redux-form";
import { formValueSelector, InjectedFormProps, reduxForm } from "redux-form";
import {
HTTP_METHOD_OPTIONS,
HTTP_METHODS,
@ -11,8 +11,8 @@ import FormRow from "components/editorComponents/FormRow";
import { PaginationField } from "api/ActionAPI";
import { API_EDITOR_FORM_NAME } from "constants/forms";
import Pagination from "./Pagination";
import { PaginationType, Action } from "entities/Action";
import { HelpMap, HelpBaseURL } from "constants/HelpConstants";
import { Action, PaginationType } from "entities/Action";
import { HelpBaseURL, HelpMap } from "constants/HelpConstants";
import KeyValueFieldArray from "components/editorComponents/form/fields/KeyValueFieldArray";
import PostBodyData from "./PostBodyData";
import ApiResponseView from "components/editorComponents/ApiResponseView";
@ -255,8 +255,6 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
e.stopPropagation();
history.replace(BUILDER_PAGE_URL(applicationId, pageId));
};
// Enforcing the light theme
const theme = EditorTheme.LIGHT;
return (

96
app/client/src/pages/Editor/APIEditor/index.tsx
View File

@ -25,7 +25,7 @@ import { Plugin } from "api/PluginApi";
import { Action, PaginationType, RapidApiAction } from "entities/Action";
import { getApiName } from "selectors/formSelectors";
import Spinner from "components/editorComponents/Spinner";
import styled, { ThemeProvider } from "styled-components";
import styled from "styled-components";
import CenteredWrapper from "components/designSystems/appsmith/CenteredWrapper";
import { changeApi } from "actions/apiPaneActions";
import PerformanceTracker, {
@ -178,55 +178,53 @@ class ApiEditor extends React.Component<Props> {
/>
);
return (
<ThemeProvider theme={this.props.lightTheme}>
<div
style={{
position: "relative",
height: "100%",
}}
>
{apiId ? (
<>
{formUiComponent === "ApiEditorForm" && (
<ApiEditorForm
pluginId={pluginId}
paginationType={paginationType}
isRunning={isRunning}
isDeleting={isDeleting}
onDeleteClick={this.handleDeleteClick}
onRunClick={this.handleRunClick}
appName={
this.props.currentApplication
? this.props.currentApplication.name
: ""
}
apiName={this.props.apiName}
/>
)}
<div
style={{
position: "relative",
height: "100%",
}}
>
{apiId ? (
<>
{formUiComponent === "ApiEditorForm" && (
<ApiEditorForm
pluginId={pluginId}
paginationType={paginationType}
isRunning={isRunning}
isDeleting={isDeleting}
onDeleteClick={this.handleDeleteClick}
onRunClick={this.handleRunClick}
appName={
this.props.currentApplication
? this.props.currentApplication.name
: ""
}
apiName={this.props.apiName}
/>
)}
{formUiComponent === "RapidApiEditorForm" && (
<RapidApiEditorForm
apiName={this.props.apiName}
apiId={this.props.match.params.apiId}
paginationType={paginationType}
isRunning={isRunning}
isDeleting={isDeleting}
onDeleteClick={this.handleDeleteClick}
onRunClick={this.handleRunClick}
appName={
this.props.currentApplication
? this.props.currentApplication.name
: ""
}
location={this.props.location}
/>
)}
</>
) : (
apiHomeScreen
)}
</div>
</ThemeProvider>
{formUiComponent === "RapidApiEditorForm" && (
<RapidApiEditorForm
apiName={this.props.apiName}
apiId={this.props.match.params.apiId}
paginationType={paginationType}
isRunning={isRunning}
isDeleting={isDeleting}
onDeleteClick={this.handleDeleteClick}
onRunClick={this.handleRunClick}
appName={
this.props.currentApplication
? this.props.currentApplication.name
: ""
}
location={this.props.location}
/>
)}
</>
) : (
apiHomeScreen
)}
</div>
);
}
}

37
app/client/src/pages/Editor/index.tsx
View File

@ -38,6 +38,9 @@ import { isMac } from "utils/helpers";
import { getSelectedWidget } from "selectors/ui";
import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
import Welcome from "./Welcome";
import { getThemeDetails, ThemeMode } from "selectors/themeSelectors";
import { ThemeProvider } from "styled-components";
import { Theme } from "constants/DefaultTheme";
type EditorProps = {
currentApplicationId?: string;
@ -55,6 +58,7 @@ type EditorProps = {
cutSelectedWidget: () => void;
user?: User;
selectedWidget?: string;
lightTheme: Theme;
};
type Props = EditorProps & RouteComponentProps<BuilderRouteParams>;
@ -200,21 +204,23 @@ class Editor extends Component<Props> {
);
}
return (
<DndProvider
backend={TouchBackend}
options={{
enableMouseEvents: true,
}}
>
<div>
<Helmet>
<meta charSet="utf-8" />
<title>Editor | Appsmith</title>
</Helmet>
<MainContainer />
</div>
<ConfirmRunModal />
</DndProvider>
<ThemeProvider theme={this.props.lightTheme}>
<DndProvider
backend={TouchBackend}
options={{
enableMouseEvents: true,
}}
>
<div>
<Helmet>
<meta charSet="utf-8" />
<title>Editor | Appsmith</title>
</Helmet>
<MainContainer />
</div>
<ConfirmRunModal />
</DndProvider>
</ThemeProvider>
);
}
}
@ -229,6 +235,7 @@ const mapStateToProps = (state: AppState) => ({
user: getCurrentUser(state),
selectedWidget: getSelectedWidget(state),
creatingOnboardingDatabase: state.ui.onBoarding.showOnboardingLoader,
lightTheme: getThemeDetails(state, ThemeMode.LIGHT),
});
const mapDispatchToProps = (dispatch: any) => {