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

Style polish (#371)

Browse Source 
* Rotate Fork app icon
* Change Explorer divider color
* Fix favicon not accessible
* Rename `appsmith.url` to `appsmith.URL`
* AppView page tab overflow ellipsis
* Rename `Back to editor` button to `Edit App`
* Update App card colors
This commit is contained in:
Hetu Nandu 2020-08-20 20:47:20 +05:30 committed by GitHub
parent 27511c90d4
commit c658769b1b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 32 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/client/public/index.html
View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="shortcut icon" href="https://res.cloudinary.com/dwpfockn8/image/upload/v1597920848/favicons/favicon-orange_pxfmdc.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Appsmith</title> <title>Appsmith</title>
<style> <style>

12
app/client/src/constants/AppConstants.ts
View File

@ -3,3 +3,15 @@ export const CANVAS_DEFAULT_HEIGHT_PX = 1292;
export const CANVAS_DEFAULT_GRID_HEIGHT_PX = 1; export const CANVAS_DEFAULT_GRID_HEIGHT_PX = 1;
export const CANVAS_DEFAULT_GRID_WIDTH_PX = 1; export const CANVAS_DEFAULT_GRID_WIDTH_PX = 1;
export const CANVAS_BACKGROUND_COLOR = "#FFFFFF"; export const CANVAS_BACKGROUND_COLOR = "#FFFFFF";
export const appCardColors = [
"#A64C0C",
"#650094",
"#D4D420",
"#0BA780",
"#5BB01A",
"#2965CC",
"#4E5D78",
"#CC293F",
"#6BA3FD",
];

2
app/client/src/constants/messages.ts
View File

@ -136,7 +136,7 @@ export const AUTOFIT_COLUMN = "Autofit column";
export const TIMEZONE = "Timezone"; export const TIMEZONE = "Timezone";
export const ENABLE_TIME = "Enable Time"; export const ENABLE_TIME = "Enable Time";
export const EDIT_APP = "Back to editor"; export const EDIT_APP = "Edit App";
export const FORK_APP = "Fork App"; export const FORK_APP = "Fork App";
export const LIGHTNING_MENU_DATA_API = "Use data from an API"; export const LIGHTNING_MENU_DATA_API = "Use data from an API";

12
app/client/src/constants/providerConstants.ts
View File

@ -96,15 +96,3 @@ export type SearchResultsProviders = {
}; };
export const DEFAULT_TEMPLATE_TYPE = "TEMPLATE"; export const DEFAULT_TEMPLATE_TYPE = "TEMPLATE";
export const providerBackgroundColors = [
"#0BA780",
"#929500",
"#1F97D3",
"#B32FA5",
"#1A29B1",
"#2965CC",
"#4E5D78",
"#14928B",
"#FBBEBE",
];

5
app/client/src/index.tsx
View File

@ -1,6 +1,5 @@
import React from "react"; import React from "react";
import "./wdyr"; import "./wdyr";
import { Helmet } from "react-helmet";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import { Provider } from "react-redux"; import { Provider } from "react-redux";
import "./index.css"; import "./index.css";
@ -25,10 +24,6 @@ const App = () => {
autoClose={5000} autoClose={5000}
closeButton={false} closeButton={false}
/> />
<Helmet>
<meta charSet="utf-8" />
<link rel="shortcut icon" href="/favicon-orange.ico" />
</Helmet>
<AppRouter /> <AppRouter />
</ThemeProvider> </ThemeProvider>
</LayersContext.Provider> </LayersContext.Provider>

9
app/client/src/pages/AppViewer/viewer/AppViewerHeader.tsx
View File

@ -65,6 +65,9 @@ const ForkButton = styled(Button)`
max-width: 200px; max-width: 200px;
height: 32px; height: 32px;
margin: 5px 10px; margin: 5px 10px;
svg {
transform: rotate(-90deg);
}
`; `;
const ShareButton = styled(Button)` const ShareButton = styled(Button)`
@ -83,7 +86,7 @@ const StyledApplicationName = styled.span`
const PageTab = styled(NavLink)` const PageTab = styled(NavLink)`
display: flex; display: flex;
height: 30px; height: 30px;
flex: 0 0 150px; max-width: 170px;
margin-right: 1px; margin-right: 1px;
align-self: flex-end; align-self: flex-end;
cursor: pointer; cursor: pointer;
@ -98,6 +101,10 @@ const PageTab = styled(NavLink)`
line-height: 20px; line-height: 20px;
letter-spacing: 0.04em; letter-spacing: 0.04em;
color: #fff; color: #fff;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
&&&:hover { &&&:hover {
text-decoration: none; text-decoration: none;

6
app/client/src/pages/Editor/Explorer/index.tsx
View File

@ -22,6 +22,10 @@ const NoResult = styled(NonIdealState)`
} }
`; `;
const StyledDivider = styled(Divider)`
border-bottom-color: rgba(255, 255, 255, 0.1);
`;
const EntityExplorer = () => { const EntityExplorer = () => {
const searchInputRef: MutableRefObject<HTMLInputElement | null> = useRef( const searchInputRef: MutableRefObject<HTMLInputElement | null> = useRef(
null, null,
@ -89,7 +93,7 @@ const EntityExplorer = () => {
<Search ref={searchInputRef} clear={clearSearch} /> <Search ref={searchInputRef} clear={clearSearch} />
{!noPageEntities && explorerPageGroup} {!noPageEntities && explorerPageGroup}
{noResults && noResultMessage} {noResults && noResultMessage}
<Divider /> <StyledDivider />
{!noDatsourceEntities && datasourcesGroup} {!noDatsourceEntities && datasourcesGroup}
</Wrapper> </Wrapper>
); );

6
app/client/src/reducers/entityReducers/appReducer.ts
View File

@ -27,7 +27,7 @@ export type UrlDataState = {
export type AppDataState = { export type AppDataState = {
mode?: APP_MODE; mode?: APP_MODE;
user: AuthUserState; user: AuthUserState;
url: UrlDataState; URL: UrlDataState;
}; };
const initialState: AppDataState = { const initialState: AppDataState = {
@ -36,7 +36,7 @@ const initialState: AppDataState = {
email: "", email: "",
id: "", id: "",
}, },
url: { URL: {
queryParams: {}, queryParams: {},
protocol: "", protocol: "",
host: "", host: "",
@ -73,7 +73,7 @@ const appReducer = createReducer(initialState, {
) => { ) => {
return { return {
...state, ...state,
url: action.payload, URL: action.payload,
}; };
}, },
}); });

4
app/client/src/utils/AppsmithUtils.tsx
View File

@ -8,8 +8,8 @@ import _ from "lodash";
import { ActionDataState } from "reducers/entityReducers/actionsReducer"; import { ActionDataState } from "reducers/entityReducers/actionsReducer";
import * as log from "loglevel"; import * as log from "loglevel";
import { LogLevelDesc } from "loglevel"; import { LogLevelDesc } from "loglevel";
import { providerBackgroundColors } from "constants/providerConstants";
import FeatureFlag from "utils/featureFlags"; import FeatureFlag from "utils/featureFlags";
import { appCardColors } from "constants/AppConstants";
export const createReducer = ( export const createReducer = (
initialState: any, initialState: any,
@ -149,7 +149,7 @@ export const getColorCode = (initials: string): string => {
for (let i = 0; i < initials.length; i++) { for (let i = 0; i < initials.length; i++) {
asciiSum += initials[i].charCodeAt(0); asciiSum += initials[i].charCodeAt(0);
} }
return providerBackgroundColors[asciiSum % providerBackgroundColors.length]; return appCardColors[asciiSum % appCardColors.length];
}; };
export function hexToRgb( export function hexToRgb(