From c23724effe70ad2e1c47af1f77aa09d0282a35da Mon Sep 17 00:00:00 2001 From: Abhinav Jha Date: Fri, 6 Sep 2019 15:00:22 +0530 Subject: [PATCH] Resolve #2 Basic Editor Styling - Add Widget Icons - Font face observer - Widget Pane styling based on Theme --- app/client/package.json | 2 + .../fonts/appsmith-widget-font.eot | Bin 0 -> 4740 bytes .../fonts/appsmith-widget-font.svg | 27 +++ .../fonts/appsmith-widget-font.ttf | Bin 0 -> 4516 bytes .../fonts/appsmith-widget-font.woff | Bin 0 -> 3052 bytes .../appsmith-widget-font/icons-reference.html | 176 ++++++++++++++++++ .../public/appsmith-widget-font/styles.css | 91 +++++++++ app/client/public/index.html | 3 + .../src/actions/widgetCardsPaneActions.tsx | 4 +- app/client/src/api/WidgetCardsPaneApi.tsx | 6 +- app/client/src/constants/ActionConstants.tsx | 14 +- app/client/src/constants/Colors.tsx | 8 +- app/client/src/constants/DefaultTheme.tsx | 12 +- app/client/src/constants/Fonts.tsx | 1 + app/client/src/index.css | 4 + app/client/src/index.tsx | 12 +- .../mockResponses/WidgetCardsPaneResponse.tsx | 61 +----- app/client/src/pages/Editor/WidgetCard.tsx | 45 +++-- .../src/pages/Editor/WidgetCardsPane.tsx | 18 +- app/client/src/pages/Editor/index.tsx | 4 +- .../src/reducers/uiReducers/editorReducer.tsx | 4 +- .../uiReducers/widgetCardsPaneReducer.tsx | 6 +- app/client/src/widgets/BaseWidget.tsx | 3 +- app/client/yarn.lock | 10 + 24 files changed, 403 insertions(+), 108 deletions(-) create mode 100644 app/client/public/appsmith-widget-font/fonts/appsmith-widget-font.eot create mode 100644 app/client/public/appsmith-widget-font/fonts/appsmith-widget-font.svg create mode 100644 app/client/public/appsmith-widget-font/fonts/appsmith-widget-font.ttf create mode 100644 app/client/public/appsmith-widget-font/fonts/appsmith-widget-font.woff create mode 100644 app/client/public/appsmith-widget-font/icons-reference.html create mode 100644 app/client/public/appsmith-widget-font/styles.css diff --git a/app/client/package.json b/app/client/package.json index cd4705a6ad..f65a0cc762 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -13,6 +13,7 @@ "@blueprintjs/table": "^3.4.0", "@sentry/browser": "^5.6.3", "@types/axios": "^0.14.0", + "@types/fontfaceobserver": "^0.0.6", "@types/jest": "^24.0.18", "@types/lodash": "^4.14.120", "@types/moment-timezone": "^0.5.10", @@ -26,6 +27,7 @@ "@types/styled-components": "^4.1.8", "axios": "^0.18.0", "flow-bin": "^0.91.0", + "fontfaceobserver": "^2.1.0", "husky": "^1.3.1", "lint-staged": "^8.1.0", "lodash": "^4.17.11", diff --git a/app/client/public/appsmith-widget-font/fonts/appsmith-widget-font.eot b/app/client/public/appsmith-widget-font/fonts/appsmith-widget-font.eot new file mode 100644 index 0000000000000000000000000000000000000000..88ed660d1ecaddd766a0110b0f737d99cb02e1a3 GIT binary patch literal 4740 zcmcIoU2I!d9si&EZTs3jcI@kf#kFHEPMfbL{#?3rjgmEGZPOOm(rv0(yu@kTCb5^e zH1q-TFxXm(hz9G}1EQKXF|<8Y2#G#Sq7n}vu?JMqsgs5j@c>8&sZyyx2)X>u@l8Kq zWkVC^-gD0X|39DifBs+Rz8EHYGepElA(0f)JrV$Ag9+&15m~i}vfRQGPe0Rj57`B` zQ<>^`R%wZ<)Sv|#pwocn=r~n?570c-Xc-WZ^Iuw~(R&56RAuiZ4bvbEVa)$BKe~&} z`e~h1Ix;!=D@9!ZBy$ovSzQ^}Y(hm9@@CD%84u5H9_V6E$UBIBHfltpamFqir z?t8#Dk@p`juhwth#!M8NLA!N)@vHMU9^L+PA{G68)!&LoCxB~4Ny^fq`WlIX}JZA_p@46|;KP8K`J=7H~X>s!=8FWxIhqOTaRm5$8s zoue@b$qQ`r_9hLY{4?6zKCKxBQe z@kQ3o#@Mp*MdeN9x5_`%lsd2eO1+^ytG%uLU7yr(zToi)J;8p-E|L!?-c8gU>0_zg zEdMCW##zJwl4)U4({OTK*h&9q0X=uNhvi zflft>bBmQMi-bj5hrF#*kfx+r_y&E4UZ)?>TR69TCf$`Xu%=w4(CuW4rD7r9lfjc3 zWNFlee5shr#++zQ5U~xzG@_B1lVA>r5z|Pg&?yZh=H$fi-7GE0ph_s_l%lypEGNpe z*^`UrvaKc3?ow$pT@VXkj0;60h8%+t7y}&)2byDna5%uO1j5ZxBW$ahsu;S#G?nQJ z5Y13kt|*$JbHh|L9h@-~6;flW8fU8Z1!xW}q1p||-nn%@DBwe!%Q$W~~ zE(*h=12s(3H#FqYHBI*n4f#y-i9^M{zT%!so;JDMDM>6?O$S!yzj5lwze=0S6Zi$%6wwL;1|L6Wb2Hv90+*xT7P?dc%IZ z{neA8Bu;jO1<`MV+SV=v|L%N2VZpn*QW;E8grGT?(NIkThl_K}XV`1atD*Mx5F12! zu4#7lwzXh08c8Tlc8?-9BV{ipL=OT4e5aC01r?($D|dQFjxj~V zNM-Vlm<&)Bu!KH=o|U7vMi;YeE#T$i(3|q;xi{c+IsxyHtgkagQ*dqyB+#pBZ>zec zt9NK)a@Y+~Zi@s0k-!XcAkvWV?;k+fkbRbA$=>q@u<&&;1KSP|i(>6Ss~%Ow!eTXb zREVOgk3!raG^aR8kM4ujs95iqZ?WqQH|?*d}~wgyPsE%u_lA^CS$E5HJW) z#*C&5=~6Ml*jZ0cCbxY&+}9Z&AH10RSt6TA?nvp$ME~G;si(V8IB?*o zX&${_PY{K4L&=1gxms83h8A|QD=qbsI@i&>Rop+*{NNHDo+vI)g+&LorfSfMLPOsK+}N7*~<8rjfc#6V%8Iyi(urI2@E zrCmkA3AG8yh8d3;5!m;9Ps#c9i34NFWT0=~D-YX#zb%SySI$=^{M`pm9O(8>uxtAZ zy4CX_dB8a z`{)4nBs>~?Th^_OPr!Rp;4RD$tWjExfY*>UpwWCJm4Df8x9#>(d&9Ojo_qj&o^v(> z&&Qj;0W`$h8E;1#x>MZPYH42Q9DT;xg+WvyN5Z~ty5B&QYOyNg*210$%fKF*-o1Nz zclg~iXWl*Yt#jq_xiVV=VfXY~Ae?#kpCFXaVU{tPkvs`fn))aQeoP2{bVDHF+@-@6 z^4aqk6P9)lD`rtkzhBbCcjK!aw+@Tg0DN=)t!Cu6E?9n9yrKtn1=-d(9H8ZW%Ih)M zQQo}R;>T89=ls6+*4B7`&R~Xu95l_S6%Jd^CX)~l#$^SlrEBxhwTsZSVMuRU1_DCN zwy~H{w$ft|JQ+A-RKYIc(#0d(IvzIh%|txe7KK~tkH-^0;{ENmKiZazCkDsI2cs}> z++$h3K&UOsF1js=UHvvv|E`2PxOsE@*tq54u!p@)%pWpEeB%YbC&2GZ6rw01syKBa zs@j3;(l8Z>+FE`MkxG{cRp9AjBCc8Jp!S`)i#Z$WTepUHj#EA4ImN%{uZ)eU>dwucsF`97S6bUWLH zueclt!)ip}KBN)8>C3nuw&>z+bJK+p zQL(HG8?>EGfBGwUxn5sgsx}q|PFLrSR~iHJwPjq)A8=p4ug|1=ix>5ZyxS+id~rul z(k|pr`xl_qy9hxaLC#|Qun?|EY-F;wa=env4h|)EB|mPXAQuNl2C_rL81QM=qmP>j zxBZX*-7sBQS*_NVlf#4f_wX5)fUmzdv3n5-i@yZ8sUny-FRbQ-?=k)4Q`FKUIF4s>rg5obk1D`n18lW%L=E{ruN_nnY^Q=^77X})Y zwT7{Jy4sjs&>Q9F7b_adRZWoPt{HCA2nqn($cXJFrov7zSPg--lKkFlf7yFkp!fcx F_!nc_tJMGi literal 0 HcmV?d00001 diff --git a/app/client/public/appsmith-widget-font/fonts/appsmith-widget-font.svg b/app/client/public/appsmith-widget-font/fonts/appsmith-widget-font.svg new file mode 100644 index 0000000000..c946036eff --- /dev/null +++ b/app/client/public/appsmith-widget-font/fonts/appsmith-widget-font.svg @@ -0,0 +1,27 @@ + + + +Generated by Fontastic.me + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/client/public/appsmith-widget-font/fonts/appsmith-widget-font.ttf b/app/client/public/appsmith-widget-font/fonts/appsmith-widget-font.ttf new file mode 100644 index 0000000000000000000000000000000000000000..14f9ce9efb3c4f2526155c21f32c47c358f65fac GIT binary patch literal 4516 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 literal 0 HcmV?d00001 diff --git a/app/client/public/appsmith-widget-font/fonts/appsmith-widget-font.woff b/app/client/public/appsmith-widget-font/fonts/appsmith-widget-font.woff new file mode 100644 index 0000000000000000000000000000000000000000..96865fd14826622c6b0211bfdf153d5294d05b61 GIT binary patch literal 3052 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 OK*a$S0#Lh91>irTl5~Io literal 0 HcmV?d00001 diff --git a/app/client/public/appsmith-widget-font/icons-reference.html b/app/client/public/appsmith-widget-font/icons-reference.html new file mode 100644 index 0000000000..e7c6122796 --- /dev/null +++ b/app/client/public/appsmith-widget-font/icons-reference.html @@ -0,0 +1,176 @@ + + + + + + + Font Reference - appsmith-widget-font + + + + + +
+

appsmith-widget-font

+

This font was created withFontastic

+

CSS mapping

+
    +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
+

Character mapping

+
    +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
+
+ + + \ No newline at end of file diff --git a/app/client/public/appsmith-widget-font/styles.css b/app/client/public/appsmith-widget-font/styles.css new file mode 100644 index 0000000000..0808537b3b --- /dev/null +++ b/app/client/public/appsmith-widget-font/styles.css @@ -0,0 +1,91 @@ +@charset "UTF-8"; + +@font-face { + font-family: "appsmith-widget-font"; + src:url("fonts/appsmith-widget-font.eot"); + src:url("fonts/appsmith-widget-font.eot?#iefix") format("embedded-opentype"), + url("fonts/appsmith-widget-font.woff") format("woff"), + url("fonts/appsmith-widget-font.ttf") format("truetype"), + url("fonts/appsmith-widget-font.svg#appsmith-widget-font") format("svg"); + font-weight: normal; + font-style: normal; + +} + +[data-icon]:before { + font-family: "appsmith-widget-font" !important; + content: attr(data-icon); + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none !important; + speak: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +[class^="appsmith-widget-"]:before, +[class*=" appsmith-widget-"]:before { + font-family: "appsmith-widget-font" !important; + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none !important; + speak: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.appsmith-widget-alert:before { + content: "\61"; +} +.appsmith-widget-button:before { + content: "\62"; +} +.appsmith-widget-checkbox:before { + content: "\63"; +} +.appsmith-widget-collapse:before { + content: "\64"; +} +.appsmith-widget-datepicker:before { + content: "\65"; +} +.appsmith-widget-dropdown:before { + content: "\66"; +} +.appsmith-widget-file-upload:before { + content: "\67"; +} +.appsmith-widget-image:before { + content: "\68"; +} +.appsmith-widget-input:before { + content: "\69"; +} +.appsmith-widget-location-picker:before { + content: "\6a"; +} +.appsmith-widget-modal:before { + content: "\6b"; +} +.appsmith-widget-radio:before { + content: "\6c"; +} +.appsmith-widget-rich-text:before { + content: "\6d"; +} +.appsmith-widget-switch:before { + content: "\6e"; +} +.appsmith-widget-table:before { + content: "\6f"; +} +.appsmith-widget-tabs:before { + content: "\70"; +} +.appsmith-widget-text:before { + content: "\71"; +} diff --git a/app/client/public/index.html b/app/client/public/index.html index e9d789c8ce..51264d4795 100755 --- a/app/client/public/index.html +++ b/app/client/public/index.html @@ -15,6 +15,9 @@ rel="stylesheet" /> + + + { return { @@ -16,7 +16,7 @@ export const errorFetchingWidgetCards = (error: any) => { } } -export const successFetchingWidgetCards = (cards: { [id: string]: IWidgetCardProps[] }) => { +export const successFetchingWidgetCards = (cards: { [id: string]: WidgetCardProps[] }) => { return { type: ActionTypes.SUCCESS_FETCHING_WIDGET_CARDS, cards diff --git a/app/client/src/api/WidgetCardsPaneApi.tsx b/app/client/src/api/WidgetCardsPaneApi.tsx index 45e7b56be5..75a1c17b7b 100644 --- a/app/client/src/api/WidgetCardsPaneApi.tsx +++ b/app/client/src/api/WidgetCardsPaneApi.tsx @@ -1,13 +1,13 @@ import Api from "./Api" -import { IWidgetCardProps } from "../widgets/BaseWidget" +import { WidgetCardProps } from "../widgets/BaseWidget" export interface WidgetCardsPaneResponse { - cards : { [id: string]: IWidgetCardProps[]} + cards: { [id: string]: WidgetCardProps[]} } export interface WidgetCardsPaneRequest {} class WidgetCardsPaneApi extends Api { - static url: string = "/widgetCards" + static url = "/widgetCards" static fetchWidgetCards(): Promise { return Api.get(WidgetCardsPaneApi.url, {}) } diff --git a/app/client/src/constants/ActionConstants.tsx b/app/client/src/constants/ActionConstants.tsx index 8d8f43caeb..b2ed304c9c 100644 --- a/app/client/src/constants/ActionConstants.tsx +++ b/app/client/src/constants/ActionConstants.tsx @@ -1,5 +1,5 @@ // import ContainerWidget from "../widgets/ContainerWidget" -import { IWidgetProps, IWidgetCardProps } from "../widgets/BaseWidget" +import { IWidgetProps, WidgetCardProps } from "../widgets/BaseWidget" export type ActionType = | "UPDATE_CANVAS" @@ -41,19 +41,19 @@ export const ActionTypes: { [id: string]: ActionType } = { } export interface ReduxAction { - type: ActionType - payload: T + type: ActionType; + payload: T; } export interface LoadCanvasPayload { - pageWidgetId: string - widgets: { [widgetId: string]: IWidgetProps } + pageWidgetId: string; + widgets: { [widgetId: string]: IWidgetProps }; } export interface LoadWidgetPanePayload { - widgets: IWidgetProps[] + widgets: IWidgetProps[]; } export interface LoadWidgetCardsPanePayload { - cards: { [id: string] : IWidgetCardProps[] } + cards: { [id: string]: WidgetCardProps[] } } diff --git a/app/client/src/constants/Colors.tsx b/app/client/src/constants/Colors.tsx index 3be2cc3cf4..b5fe36a9d6 100644 --- a/app/client/src/constants/Colors.tsx +++ b/app/client/src/constants/Colors.tsx @@ -1,10 +1,14 @@ export const WHITE = "#FFFFFF"; export const WHITE_1 = "#E9FAF3"; export const WHITE_2 = "#D0D7DD"; + export const BLACK = "#000000"; export const BLACK_1 = "#040627"; +export const BLACK_2 = "#21282C"; +export const BLACK_3 = "#272E32"; +export const BLACK_4 = "#363E44"; + export const GREEN = "#29CCA3"; export const RED = "#CE4257"; export const PURPLE = "#6871EF"; -export const BLACK_3 = "#363E44"; -export const BLACK_2 = "#272E32"; + diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx index 6ced70d0dd..d41031a9a8 100644 --- a/app/client/src/constants/DefaultTheme.tsx +++ b/app/client/src/constants/DefaultTheme.tsx @@ -13,7 +13,6 @@ const { ThemeProvider, } = styledComponents as styledComponents.ThemedStyledComponentsModule; - export type Theme = { radii: Array; fontSizes: Array; @@ -25,8 +24,8 @@ export type Theme = { }; export const theme: Theme = { - radii: [], - fontSizes: [0, 10, 12, 14, 16, 18, 24, 32, 48, 64], + radii: [0, 4, 8, 10, 20], + fontSizes: [0, 10, 12, 14, 16, 18, 24, 28, 32, 48, 64], spaces: [0, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24], fontWeights: [0, 400, 500, 700], colors: { @@ -34,13 +33,14 @@ export const theme: Theme = { error: Colors.RED, hover: Colors.WHITE_1, textDefault: Colors.BLACK_1, + textOnDarkBG: Colors.WHITE, textAnchor: Colors.PURPLE , border: Colors.WHITE_2 , - paneCard: Colors.BLACK_3, - paneBG: Colors.BLACK_2, + paneCard: Colors.BLACK_2, + paneBG: Colors.BLACK_4, }, lineHeights: [0, 14, 18, 22, 24, 28, 36, 48, 64, 80], - fonts: [FontFamilies.DMSans as FontFamily], + fonts: [FontFamilies.DMSans, FontFamilies.AppsmithWidget], }; export { css, createGlobalStyle, keyframes, ThemeProvider }; diff --git a/app/client/src/constants/Fonts.tsx b/app/client/src/constants/Fonts.tsx index 551db8d79e..4671d73bc0 100644 --- a/app/client/src/constants/Fonts.tsx +++ b/app/client/src/constants/Fonts.tsx @@ -1,2 +1,3 @@ export const DMSans = "DM Sans"; +export const AppsmithWidget = "appsmith-widget-font"; export const OpenSans = "Open Sans"; \ No newline at end of file diff --git a/app/client/src/index.css b/app/client/src/index.css index 0773dc6c88..997add21cd 100755 --- a/app/client/src/index.css +++ b/app/client/src/index.css @@ -9,6 +9,10 @@ body { background: #efefef; } +body.fontLoaded { + font-family: "DM Sans, sans-serif"; +} + code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; diff --git a/app/client/src/index.tsx b/app/client/src/index.tsx index 1547cfe697..eef0767308 100755 --- a/app/client/src/index.tsx +++ b/app/client/src/index.tsx @@ -14,11 +14,21 @@ import WidgetBuilderRegistry from "./utils/WidgetRegistry"; import { ThemeProvider, theme } from "./constants/DefaultTheme"; import createSagaMiddleware from 'redux-saga' import { rootSaga } from "./sagas" - +import FontFaceObserver from "fontfaceobserver"; import { DndProvider } from "react-dnd" import HTML5Backend from "react-dnd-html5-backend" import { appInitializer } from "./utils/AppsmithUtils"; +// font face observer +const textFont = new FontFaceObserver("DM Sans"); +const widgetIconFont = new FontFaceObserver("appmith-widget-font"); +Promise.all([textFont.load(), widgetIconFont.load()]).then(()=>{ + document.body.className += "fontLoaded"; +}).catch(err => { + console.log(err); +}); + + appInitializer(); WidgetBuilderRegistry.registerWidgetBuilders(); const sagaMiddleware = createSagaMiddleware() diff --git a/app/client/src/mockResponses/WidgetCardsPaneResponse.tsx b/app/client/src/mockResponses/WidgetCardsPaneResponse.tsx index 93bea8c9fc..6ff551266f 100644 --- a/app/client/src/mockResponses/WidgetCardsPaneResponse.tsx +++ b/app/client/src/mockResponses/WidgetCardsPaneResponse.tsx @@ -5,74 +5,31 @@ const WidgetCardsPaneResponse: WidgetCardsPaneReduxState = { common: [ { widgetType: "BUTTON_WIDGET", - icon: "\f243", + icon: "appsmith-widget-button", label: "Button", - groups: ["common", "form"] }, - { - widgetType: "INPUT_WIDGET", - icon: "\f243", - label: "Input", - groups: ["common", "form"] - }, - { - widgetType: "TOGGLE_WIDGET", - icon: "\f205", - label: "Toggle", - groups: ["common", "view"] - } ], form: [ { widgetType: "BUTTON_WIDGET", - icon: "\f243", + icon: "appsmith-widget-button", label: "Button", - groups: ["common", "form"] }, { - widgetType: "INPUT_WIDGET", - icon: "\f243", - label: "Input", - groups: ["common", "form"] + widgetType: "CALLOUT_WIDGET", + icon: "appsmith-widget-alert", + label: "Callout", } ], view: [ { - widgetType: "TOGGLE_WIDGET", - icon: "\f205", - label: "Toggle", - groups: ["common", "view"] + widgetType: "BUTTON_WIDGET", + icon: "appsmith-widget-button", + label: "Button", } ] } }; -// const WidgetPaneResponse: WidgetPaneReduxState = { -// widgets: [ -// { -// widgetType: "BUTTON_WIDGET", -// text: "Lorem Ipsum", -// renderMode: RenderModes.COMPONENT_PANE, -// bottomRow: 50, -// widgetId: "wp1", -// rightColumn: 200 -// }, -// { -// widgetType: "TEXT_WIDGET", -// text: "Lorem Ipsum", -// renderMode: RenderModes.COMPONENT_PANE, -// bottomRow: 50, -// widgetId: "wp2", -// rightColumn: 200 -// }, -// { -// widgetType: "SPINNER_WIDGET", -// renderMode: RenderModes.COMPONENT_PANE, -// backgroundColor: "#434343", -// bottomRow: 50, -// widgetId: "wp3", -// rightColumn: 200 -// } -// ] -// } + export default WidgetCardsPaneResponse; diff --git a/app/client/src/pages/Editor/WidgetCard.tsx b/app/client/src/pages/Editor/WidgetCard.tsx index b2f42095d8..63a8d12c4f 100644 --- a/app/client/src/pages/Editor/WidgetCard.tsx +++ b/app/client/src/pages/Editor/WidgetCard.tsx @@ -1,15 +1,13 @@ import React, { useState, useLayoutEffect, MutableRefObject } from 'react'; import { useDrag, DragSourceMonitor, DragPreviewImage } from 'react-dnd' import blankImage from "../../assets/images/blank.png" -import { IWidgetCardProps } from '../../widgets/BaseWidget' +import { WidgetCardProps } from '../../widgets/BaseWidget' import styled from 'styled-components'; -import { Icon } from '@blueprintjs/core' -import { IconNames } from '@blueprintjs/icons' import { generateReactKey } from "../../utils/generators" -type WidgetCardProps = { - details: IWidgetCardProps; +type CardProps = { + details: WidgetCardProps; } export const Wrapper = styled.div` @@ -19,27 +17,38 @@ export const Wrapper = styled.div` align-items: center; flex: 1; padding: 10px 5px 10px 5px; - margin: 0px 10px 0 0; - border-radius: 5px; + border-radius: ${props => props.theme.radii[1]}px; background: ${props => props.theme.colors.paneCard}; border: 1px solid ${props=> props.theme.colors.paneCard}; + color: ${props => props.theme.colors.textOnDarkBG}; + & > div { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } &:hover{ background: #fff; cursor: grab; + color: ${props => props.theme.colors.textDefault} + } + & i { + font-family: ${props => props.theme.fonts[2]}; + font-size: ${props => props.theme.fontSizes[7]}px; } `; + export const IconLabel = styled.h5` text-align: center; - padding: 10px 0; margin: 0; text-transform: uppercase; - font-weight: normal; + font-weight: ${props => props.theme.fontWeights[1]}; flex-shrink: 1; - font-size: 0.5rem; + font-size: ${props => props.theme.fontSizes[1]}px; `; /* eslint-disable @typescript-eslint/no-unused-vars */ -const WidgetCard = (props: WidgetCardProps) => { +const WidgetCard = (props: CardProps) => { const [initialOffset, setInitialOffset] = useState({ x: 0, y: 0}) const [{ isDragging }, drag, preview] = useDrag({ @@ -58,16 +67,16 @@ const WidgetCard = (props: WidgetCardProps) => { y: Math.ceil(rect.top) }) } - }, [setInitialOffset]) + }, [setInitialOffset]); return ( - -
- - {props.details.label} -
- + +
+ + {props.details.label} +
+ ) } diff --git a/app/client/src/pages/Editor/WidgetCardsPane.tsx b/app/client/src/pages/Editor/WidgetCardsPane.tsx index b62f580eae..7672bbf07f 100644 --- a/app/client/src/pages/Editor/WidgetCardsPane.tsx +++ b/app/client/src/pages/Editor/WidgetCardsPane.tsx @@ -1,24 +1,26 @@ import React from "react" import WidgetCard from "./WidgetCard" import styled from "styled-components" -import { IWidgetCardProps } from "../../widgets/BaseWidget" +import { WidgetCardProps } from "../../widgets/BaseWidget" type WidgetCardPaneProps = { - cards: { [id: string]: IWidgetCardProps[]}; + cards: { [id: string]: WidgetCardProps[]}; } const CardsPaneWrapper = styled.div` - width: 300px; + width: 256px; background-color: ${props => props.theme.colors.paneBG}; - border-radius: 5px; + border-radius: ${props => props.theme.radii[2]}px; box-shadow: 0px 0px 3px ${props => props.theme.colors.paneBG}; padding: 5px 10px; + color: ${props => props.theme.colors.textOnDarkBG}; + text-transform: capitalize; `; const CardsWrapper = styled.div` - display: flex; - flex-flow: row wrap; - justify-content: flex-start; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-gap: ${props => props.theme.spaces[2]}px; `; const WidgetCardsPane: React.SFC = (props: WidgetCardPaneProps) => { @@ -30,7 +32,7 @@ const WidgetCardsPane: React.SFC = (props: WidgetCardPanePr
{group}
- { props.cards[group].map((card: IWidgetCardProps) => ) } + { props.cards[group].map((card: WidgetCardProps) => ) } ) diff --git a/app/client/src/pages/Editor/index.tsx b/app/client/src/pages/Editor/index.tsx index 4a57fe8573..8a44f88789 100644 --- a/app/client/src/pages/Editor/index.tsx +++ b/app/client/src/pages/Editor/index.tsx @@ -2,7 +2,7 @@ import React, { Component } from "react" import { connect } from "react-redux" import styled from "styled-components" import Canvas from "./Canvas" -import { IWidgetCardProps, IWidgetProps } from '../../widgets/BaseWidget' +import { WidgetCardProps, IWidgetProps } from '../../widgets/BaseWidget' import { AppState } from "../../reducers" import { EditorReduxState } from "../../reducers/uiReducers/editorReducer" import WidgetCardsPane from "./WidgetCardsPane" @@ -43,7 +43,7 @@ const EditorWrapper = styled.div` type EditorProps = { pageWidget: ContainerWidgetProps | any; fetchCanvasWidgets: Function; - cards: { [id: string]: IWidgetCardProps[] } | any; + cards: { [id: string]: WidgetCardProps[] } | any; addPageWidget: Function; page: string; } diff --git a/app/client/src/reducers/uiReducers/editorReducer.tsx b/app/client/src/reducers/uiReducers/editorReducer.tsx index 366b2a9972..7ab9805a6c 100644 --- a/app/client/src/reducers/uiReducers/editorReducer.tsx +++ b/app/client/src/reducers/uiReducers/editorReducer.tsx @@ -5,7 +5,7 @@ import { LoadCanvasPayload, LoadWidgetCardsPanePayload } from "../../constants/ActionConstants" -import { IWidgetCardProps, IWidgetProps } from "../../widgets/BaseWidget" +import { WidgetCardProps, IWidgetProps } from "../../widgets/BaseWidget" import { ContainerWidgetProps } from "../../widgets/ContainerWidget" const initialState: EditorReduxState = {} @@ -34,7 +34,7 @@ const editorReducer = createReducer(initialState, { export interface EditorReduxState { pageWidget?: ContainerWidgetProps; cards?: { - [id: string]: IWidgetCardProps[]; + [id: string]: WidgetCardProps[]; }; } diff --git a/app/client/src/reducers/uiReducers/widgetCardsPaneReducer.tsx b/app/client/src/reducers/uiReducers/widgetCardsPaneReducer.tsx index 5ada95d5cb..f41b65c3ef 100644 --- a/app/client/src/reducers/uiReducers/widgetCardsPaneReducer.tsx +++ b/app/client/src/reducers/uiReducers/widgetCardsPaneReducer.tsx @@ -4,7 +4,7 @@ import { ReduxAction, LoadWidgetCardsPanePayload } from "../../constants/ActionConstants" -import { IWidgetCardProps } from "../../widgets/BaseWidget"; +import { WidgetCardProps } from "../../widgets/BaseWidget"; import WidgetCardsPaneResponse from "../../mockResponses/WidgetCardsPaneResponse" const initialState: WidgetCardsPaneReduxState = WidgetCardsPaneResponse @@ -20,8 +20,8 @@ const widgetCardsPaneReducer = createReducer(initialState, { export interface WidgetCardsPaneReduxState { cards: { - [id: string]: IWidgetCardProps[] - } + [id: string]: WidgetCardProps[]; + }; } export default widgetCardsPaneReducer diff --git a/app/client/src/widgets/BaseWidget.tsx b/app/client/src/widgets/BaseWidget.tsx index 9c8b3efe8b..4ad822b9c8 100644 --- a/app/client/src/widgets/BaseWidget.tsx +++ b/app/client/src/widgets/BaseWidget.tsx @@ -163,12 +163,11 @@ export interface IWidgetProps { renderMode: RenderMode; } -export interface IWidgetCardProps { +export interface WidgetCardProps { widgetType: WidgetType; key?: string; label: string; icon: string; - groups: string[]; } export default BaseWidget diff --git a/app/client/yarn.lock b/app/client/yarn.lock index e65a55412b..0eace71721 100644 --- a/app/client/yarn.lock +++ b/app/client/yarn.lock @@ -1342,6 +1342,11 @@ resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f" integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw== +"@types/fontfaceobserver@^0.0.6": + version "0.0.6" + resolved "https://registry.yarnpkg.com/@types/fontfaceobserver/-/fontfaceobserver-0.0.6.tgz#14a4a02b77e66e6a1070622981d431c885a174ed" + integrity sha512-QJ1znjr9CDax2L17rgBnDOfNHsC1XtVAMswu+lRWvWb+kANhHA0slUNSSBsG8FVNvM4I4yXlN9doJRot3A2hkQ== + "@types/history@*": version "4.7.3" resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.3.tgz#856c99cdc1551d22c22b18b5402719affec9839a" @@ -4720,6 +4725,11 @@ follow-redirects@^1.0.0: dependencies: debug "^3.0.0" +fontfaceobserver@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/fontfaceobserver/-/fontfaceobserver-2.1.0.tgz#e2705d293e2c585a6531c2a722905657317a2991" + integrity sha512-ReOsO2F66jUa0jmv2nlM/s1MiutJx/srhAe2+TE8dJCMi02ZZOcCTxTCQFr3Yet+uODUtnr4Mewg+tNQ+4V1Ng== + for-in@^0.1.3: version "0.1.8" resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"