Resolve #2 Basic Editor Styling
- Add Widget Icons - Font face observer - Widget Pane styling based on Theme
This commit is contained in:
Abhinav Jha
parent
6284f07c76
commit
c23724effe
|
|
@ -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",
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -0,0 +1,27 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by Fontastic.me</metadata>
|
||||
<defs>
|
||||
<font id="appsmith-widget-font" horiz-adv-x="512">
|
||||
<font-face font-family="appsmith-widget-font" units-per-em="512" ascent="480" descent="-32"/>
|
||||
<missing-glyph horiz-adv-x="512" />
|
||||
|
||||
<glyph glyph-name="alert" unicode="a" d="M275 221c0-9-7-16-16-16l-6 0c-9 0-16 7-16 16l0 44c0 9 7 16 16 16l6 0c9 0 16-7 16-16z m0-76c0-8-7-16-16-16l-6 0c-9 0-16 8-16 16l0 6c0 9 7 16 16 16l6 0c9 0 16-7 16-16z m-213-48c-6-11 1-24 14-24l360 0c13 0 20 13 14 24l-180 311c-6 11-22 11-28 0z"/>
|
||||
<glyph glyph-name="button" unicode="b" d="M512 352c0 19-13 32-32 32l-448 0c-19 0-32-13-32-32l0-192c0-19 13-32 32-32l448 0c19 0 32 13 32 32z m-452-126c4-2 9-3 15-3 6 0 11 1 15 3 4 2 7 5 9 8 3 4 4 8 4 12 0 4-1 8-3 11-2 3-5 5-8 7-3 2-7 4-11 5-3 1-7 2-9 3-3 1-6 3-7 4-2 2-3 4-3 6 0 3 1 6 4 7 2 2 4 3 7 3 4 0 7-1 9-4 2-2 3-4 3-7l16 0c-1 5-2 9-4 12-2 3-5 6-10 8-3 2-8 3-13 3-5 0-10-1-14-3-4-2-7-4-9-8-3-3-4-7-4-12 0-5 2-9 5-13 3-3 8-6 14-8l10-3c4-2 6-3 8-5 2-2 3-4 3-7 0-3-1-6-3-8-2-1-5-2-9-2-4 0-8 1-10 3-3 3-4 6-4 10l-16 0c1-6 2-10 4-14 3-4 6-6 11-8z m74 0c5-2 10-3 16-3 6 0 11 1 15 3 5 2 9 6 12 10 3 5 4 11 4 18l0 48-14 0 0-48c0-6-2-11-5-14-3-3-7-4-12-4-5 0-9 1-12 4-3 3-5 8-5 14l0 48-14 0 0-48c0-7 1-13 4-18 3-4 7-8 11-10z m66 76l0-78 15 0 0 54 21-43 12 0 22 43 0-54 14 0 0 78-17 0-25-49-25 49z m104 0l0-78 32 0c8 0 15 2 19 6 5 4 7 9 7 15 0 5-1 9-4 13-3 3-7 6-11 6 3 1 7 3 9 6 3 3 4 7 4 12 0 6-2 11-6 15-5 3-11 5-19 5z m29-33l-15 0 0 22 15 0c4 0 7-1 9-3 2-2 4-4 4-8 0-3-2-6-4-8-2-2-5-3-9-3z m1-33l-16 0 0 23 16 0c4 0 7-1 10-3 2-3 3-5 3-9 0-4-1-6-3-8-2-2-6-3-10-3z m45 66l0-78 14 0 0 78z m52-11l0-67 14 0 0 67 23 0 0 11-60 0 0-11z"/>
|
||||
<glyph glyph-name="checkbox" unicode="c" d="M213 149l-106 107 30 30 76-76 162 162 30-31z m192 299l-298 0c-24 0-43-19-43-43l0-298c0-24 19-43 43-43l298 0c12 0 23 5 31 13 8 8 12 18 12 30l0 298c0 12-4 23-12 31-8 8-19 12-31 12z"/>
|
||||
<glyph glyph-name="collapse" unicode="d" d="M407 64l-302 0c-23 0-41 18-41 41l0 302c0 23 18 41 41 41l302 0c23 0 41-18 41-41l0-302c0-23-18-41-41-41z m-121 305l-105-106c-4-4-4-10 0-14l105-106c7-6 18-2 18 8l0 210c0 10-11 14-18 8z"/>
|
||||
<glyph glyph-name="datepicker" unicode="e" d="M376 444c0-13 11-24 24-24l16 0c18 0 32-14 32-32l0-296c0-18-14-32-32-32l-320 0c-18 0-32 14-32 32l0 296c0 18 14 32 32 32l16 0c13 0 24 11 24 24 0 10 4 18 11 25 7 7 15 11 25 11 10 0 18-4 25-11 7-7 11-15 11-25 0-13 11-24 24-24l48 0c13 0 24 11 24 24 0 10 4 18 11 25 7 7 15 11 25 11 10 0 18-4 25-11 7-7 11-15 11-25z m-216 0l0-60c0-2 0-3 1-5 0-1 1-2 2-4 2-1 3-2 4-2 2-1 3-1 5-1 2 0 3 0 5 1 1 0 2 1 4 2 1 2 2 3 2 4 1 2 1 3 1 5l0 60c0 3-1 6-4 8-2 3-5 4-8 4-3 0-6-1-8-4-3-2-4-5-4-8z m168 0l0-60c0-3 1-6 3-9 3-2 6-3 9-3 3 0 6 1 9 3 2 3 3 6 3 9l0 60c0 2 0 3-1 5 0 1-1 2-2 4-2 1-3 2-4 2-2 1-3 1-5 1-2 0-3 0-5-1-1 0-2-1-4-2-1-2-2-3-2-4-1-2-1-3-1-5z m64-360c18 0 32 14 32 32l0 176c0 18-14 32-32 32l-272 0c-18 0-32-14-32-32l0-176c0-18 14-32 32-32z m-232 216c13 0 24-11 24-24 0-13-11-24-24-24-13 0-24 11-24 24 0 13 11 24 24 24z m72-24c0 13 11 24 24 24 13 0 24-11 24-24 0-13-11-24-24-24-13 0-24 11-24 24z m120-24c-13 0-24 11-24 24 0 13 11 24 24 24 13 0 24-11 24-24 0-13-11-24-24-24z m-192-24c13 0 24-11 24-24 0-13-11-24-24-24-13 0-24 11-24 24 0 13 11 24 24 24z m72-24c0 13 11 24 24 24 13 0 24-11 24-24 0-13-11-24-24-24-13 0-24 11-24 24z m120-24c-13 0-24 11-24 24 0 13 11 24 24 24 13 0 24-11 24-24 0-13-11-24-24-24z m-192-24c13 0 24-11 24-24 0-13-11-24-24-24-13 0-24 11-24 24 0 13 11 24 24 24z m120-24c0-13-11-24-24-24-13 0-24 11-24 24 0 13 11 24 24 24 13 0 24-11 24-24z m96 0c0-13-11-24-24-24-13 0-24 11-24 24 0 13 11 24 24 24 13 0 24-11 24-24z"/>
|
||||
<glyph glyph-name="dropdown" unicode="f" d="M480 384c19 0 32-13 32-32l0-192c0-19-13-32-32-32l-448 0c-19 0-32 13-32 32l0 192c0 19 13 32 32 32z m-100-165c1 0 3 0 4 0 3 0 5 1 7 3l43 41c1 1 2 2 3 3 0 2 1 3 1 4 0 2 0 3-1 5 0 1-1 2-2 3-1 1-2 2-4 3-1 0-3 1-4 1-2 0-3-1-4-1-2-1-3-2-4-3l-35-34-35 36c-1 1-2 1-4 2-1 0-2 1-4 1-1 0-2-1-4-1-1-1-2-1-3-2-1-1-2-3-3-4 0-1 0-3 0-4 0-1 0-3 0-4 1-1 2-3 3-4l42-42c1-1 3-2 4-3z"/>
|
||||
<glyph glyph-name="file-upload" unicode="g" d="M393 287c-6 32-23 61-48 81-25 21-57 32-89 32-54 0-101-31-124-75-28-3-53-16-71-37-19-20-29-47-29-75 0-61 50-112 112-112l243 0c51 0 93 42 93 94 0 49-38 89-87 92z m-100-55l0-75-74 0 0 75-56 0 86 87c4 4 10 4 14 0l86-87z"/>
|
||||
<glyph glyph-name="image" unicode="h" d="M448 107l0 298c0 24-19 43-43 43l-298 0c-24 0-43-19-43-43l0-298c0-24 19-43 43-43l298 0c24 0 43 19 43 43z m-267 117l54-64 74 96 96-128-298 0z"/>
|
||||
<glyph glyph-name="input" unicode="i" d="M512 352c0 19-13 32-32 32l-448 0c-19 0-32-13-32-32l0-192c0-19 13-32 32-32l448 0c19 0 32 13 32 32z m-32-192l-448 0 0 192 448 0z m-416 160l32 0 0-128-32 0z"/>
|
||||
<glyph glyph-name="location-picker" unicode="j" d="M256 469c71 0 128-56 128-127 0-95-128-235-128-235 0 0-128 140-128 235 0 71 57 127 128 127z m0-85c-11 0-22-4-30-12-8-9-13-19-13-31 0-11 5-22 13-30 8-8 19-12 30-12 11 0 22 4 30 12 8 8 13 19 13 30 0 12-5 22-13 31-8 8-19 12-30 12z m171-277c0-47-77-86-171-86-94 0-171 39-171 86 0 27 26 52 67 67l13-19c-23-10-37-23-37-38 0-29 57-53 128-53 71 0 128 24 128 53 0 15-14 28-37 38l13 19c41-15 67-40 67-67z"/>
|
||||
<glyph glyph-name="modal" unicode="k" d="M136 284c0 7 5 12 12 12l24 0c7 0 12-5 12-12 0-7-5-12-12-12l-24 0c-7 0-12 5-12 12z m72 0c0 7 5 12 12 12l144 0c7 0 12-5 12-12 0-7-5-12-12-12l-144 0c-7 0-12 5-12 12z m-72-48c0 7 5 12 12 12l24 0c7 0 12-5 12-12 0-7-5-12-12-12l-24 0c-7 0-12 5-12 12z m72 0c0 7 5 12 12 12l144 0c7 0 12-5 12-12 0-7-5-12-12-12l-144 0c-7 0-12 5-12 12z m-72-48c0 7 5 12 12 12l24 0c7 0 12-5 12-12 0-7-5-12-12-12l-24 0c-7 0-12 5-12 12z m72 0c0 7 5 12 12 12l144 0c7 0 12-5 12-12 0-7-5-12-12-12l-144 0c-7 0-12 5-12 12z m-128 228c-9 0-16-7-16-16l0-304c0-9 7-16 16-16l352 0c9 0 16 7 16 16l0 304c0 9-7 16-16 16z m344-296c0-9-7-16-16-16l-304 0c-9 0-16 7-16 16l0 208c0 9 7 16 16 16l304 0c9 0 16-7 16-16z m0 260c0-7-5-12-12-12-7 0-12 5-12 12 0 7 5 12 12 12 7 0 12-5 12-12z"/>
|
||||
<glyph glyph-name="radio" unicode="l" d="M240 376c-57 0-104-47-104-104 0-57 47-104 104-104 57 0 104 47 104 104 0 57-47 104-104 104z m0 104c-115 0-208-93-208-208 0-115 93-208 208-208 115 0 208 93 208 208 0 115-93 208-208 208z m0-374c-92 0-166 74-166 166 0 92 74 166 166 166 92 0 166-74 166-166 0-92-74-166-166-166z"/>
|
||||
<glyph glyph-name="rich-text" unicode="m" d="M256 245l0 150c0 11-10 21-21 21l-150 0c-11 0-21-10-21-21l0-150c0-11 10-21 21-21l150 0c11 0 21 10 21 21z m-146 43c7 8 19 9 25 1l2-2c6-8 18-7 25 1l12 15c6 9 19 9 25 0l16-21c8-11 1-26-12-26l-85 0c-13 0-21 15-13 26z m338-112c0-9-7-16-16-16l-352 0c-9 0-16 7-16 16 0 9 7 16 16 16l352 0c9 0 16-7 16-16z m0-64c0-9-7-16-16-16l-352 0c-9 0-16 7-16 16 0 9 7 16 16 16l352 0c9 0 16-7 16-16z m0 272c0-9-7-16-16-16l-112 0c-9 0-16 7-16 16 0 9 7 16 16 16l112 0c9 0 16-7 16-16z m0-64c0-9-7-16-16-16l-112 0c-9 0-16 7-16 16 0 9 7 16 16 16l112 0c9 0 16-7 16-16z m0-64c0-9-7-16-16-16l-112 0c-9 0-16 7-16 16 0 9 7 16 16 16l112 0c9 0 16-7 16-16z"/>
|
||||
<glyph glyph-name="switch" unicode="n" d="M323 416l-134 0c-21 0-41-4-60-12-19-8-37-19-51-34-15-14-26-32-34-51-8-19-12-39-12-60 0-20 4-41 12-60 8-19 19-36 34-51 14-14 32-26 51-34 19-8 39-12 60-12l134 0c21 0 41 4 60 12 19 8 37 20 51 34 15 15 26 32 34 51 8 19 12 40 12 60 0 21-4 41-12 60-8 19-19 37-34 51-14 15-32 26-51 34-19 8-39 12-60 12z m0-269c-30 0-58 12-79 33-21 21-33 50-33 79 0 30 12 58 33 79 21 21 50 33 79 33 15 0 29-3 43-8 14-6 26-14 36-25 11-10 19-22 25-36 5-14 8-28 8-43 0-15-3-29-8-43-6-13-14-26-25-36-10-10-22-19-36-24-14-6-28-9-43-9z"/>
|
||||
<glyph glyph-name="table" unicode="o" d="M102 432l308 0c10 0 20-4 27-11 7-7 11-17 11-27l0-288c0-11-4-20-11-28-7-7-17-11-27-11l-308 0c-10 0-20 4-27 11-7 8-11 17-11 28l0 288c0 10 4 20 11 27 7 7 17 11 27 11z m0-77l0-57 77 0 0 57z m116 0l0-57 76 0 0 57z m192-57l0 57-77 0 0-57z m-308-39l0-57 77 0 0 57z m0-153l77 0 0 57-77 0z m116 153l0-57 76 0 0 57z m0-153l76 0 0 57-76 0z m192 0l0 57-77 0 0-57z m0 153l-77 0 0-57 77 0z"/>
|
||||
<glyph glyph-name="tabs" unicode="p" d="M424 352c-13 0-24 11-24 24 0 13-11 24-24 24l-280 0c-18 0-32-14-32-32l0-224c0-18 14-32 32-32l320 0c18 0 32 14 32 32l0 184c0 13-11 24-24 24z m-120 12c0 7 5 12 12 12l48 0c7 0 12-5 12-12 0-7-5-12-12-12l-48 0c-7 0-12 5-12 12z m-96 0c0 7 5 12 12 12l48 0c7 0 12-5 12-12 0-7-5-12-12-12l-48 0c-7 0-12 5-12 12z m216-196c0-18-14-32-32-32l-272 0c-18 0-32 14-32 32l0 176c0 18 14 32 32 32l40 0c13 0 24-11 24-24 0-13 11-24 24-24l184 0c18 0 32-14 32-32z"/>
|
||||
<glyph glyph-name="text" unicode="q" d="M80 400c-9 0-16-7-16-16l0-29c0-8 7-16 16-16l69 0c9 0 16-7 16-16l0-210c0-9 7-16 16-16l29 0c9 0 16 7 16 16l0 210c0 9 7 16 16 16l69 0c9 0 16 8 16 16l0 29c0 9-7 16-16 16z m368-117c0 9-7 16-16 16l-150 0c-9 0-16-7-16-16l0-29c0-9 7-16 16-16l29 0c9 0 16-7 16-16l0-109c0-9 7-16 16-16l28 0c9 0 16 7 16 16l0 109c0 9 8 16 16 16l29 0c9 0 16 7 16 16z"/>
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
Binary file not shown.
176
app/client/public/appsmith-widget-font/icons-reference.html
Normal file
176
app/client/public/appsmith-widget-font/icons-reference.html
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Font Reference - appsmith-widget-font</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Dosis:400,500,700" rel="stylesheet" type="text/css">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<style type="text/css">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;font-size:100%;vertical-align:baseline}body{line-height:1;color:#000;background:#fff}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0;vertical-align:middle}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}a img{border:none}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{font-family:'Dosis','Tahoma',sans-serif}.container{margin:15px auto;width:80%}h1{margin:40px 0 20px;font-weight:700;font-size:38px;line-height:32px;color:#fb565e}h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercase;font-weight:500}.small{font-size:14px;color:#a5adb4;}.small a{color:#a5adb4;}.small a:hover{color:#fb565e}.glyphs.character-mapping{margin:0 0 20px 0;padding:20px 0 20px 30px;color:rgba(0,0,0,0.5);border:1px solid #d8e0e5;border-radius:3px;}.glyphs.character-mapping li{margin:0 30px 20px 0;display:inline-block;width:90px}.glyphs.character-mapping .icon{margin:10px 0 10px 15px;padding:15px;position:relative;width:55px;height:55px;color:#162a36 !important;overflow:hidden;border-radius:3px;font-size:32px;}.glyphs.character-mapping .icon svg{fill:#000}.glyphs.character-mapping input{margin:0;padding:5px 0;line-height:12px;font-size:12px;display:block;width:100%;border:1px solid #d8e0e5;border-radius:5px;text-align:center;outline:0;}.glyphs.character-mapping input:focus{border:1px solid #fbde4a;-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}.glyphs.character-mapping input:hover{-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}.glyphs.css-mapping{margin:0 0 60px 0;padding:30px 0 20px 30px;color:rgba(0,0,0,0.5);border:1px solid #d8e0e5;border-radius:3px;}.glyphs.css-mapping li{margin:0 30px 20px 0;padding:0;display:inline-block;overflow:hidden}.glyphs.css-mapping .icon{margin:0;margin-right:10px;padding:13px;height:50px;width:50px;color:#162a36 !important;overflow:hidden;float:left;font-size:24px}.glyphs.css-mapping input{margin:0;margin-top:5px;padding:8px;line-height:16px;font-size:16px;display:block;width:150px;height:40px;border:1px solid #d8e0e5;border-radius:5px;background:#fff;outline:0;float:right;}.glyphs.css-mapping input:focus{border:1px solid #fbde4a;-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}.glyphs.css-mapping input:hover{-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>appsmith-widget-font</h1>
|
||||
<p class="small">This font was created with<a href="http://fontastic.me/">Fontastic</a></p>
|
||||
<h2>CSS mapping</h2>
|
||||
<ul class="glyphs css-mapping">
|
||||
<li>
|
||||
<div class="icon appsmith-widget-alert"></div>
|
||||
<input type="text" readonly="readonly" value="alert">
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon appsmith-widget-button"></div>
|
||||
<input type="text" readonly="readonly" value="button">
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon appsmith-widget-checkbox"></div>
|
||||
<input type="text" readonly="readonly" value="checkbox">
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon appsmith-widget-collapse"></div>
|
||||
<input type="text" readonly="readonly" value="collapse">
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon appsmith-widget-datepicker"></div>
|
||||
<input type="text" readonly="readonly" value="datepicker">
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon appsmith-widget-dropdown"></div>
|
||||
<input type="text" readonly="readonly" value="dropdown">
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon appsmith-widget-file-upload"></div>
|
||||
<input type="text" readonly="readonly" value="file-upload">
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon appsmith-widget-image"></div>
|
||||
<input type="text" readonly="readonly" value="image">
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon appsmith-widget-input"></div>
|
||||
<input type="text" readonly="readonly" value="input">
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon appsmith-widget-location-picker"></div>
|
||||
<input type="text" readonly="readonly" value="location-picker">
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon appsmith-widget-modal"></div>
|
||||
<input type="text" readonly="readonly" value="modal">
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon appsmith-widget-radio"></div>
|
||||
<input type="text" readonly="readonly" value="radio">
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon appsmith-widget-rich-text"></div>
|
||||
<input type="text" readonly="readonly" value="rich-text">
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon appsmith-widget-switch"></div>
|
||||
<input type="text" readonly="readonly" value="switch">
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon appsmith-widget-table"></div>
|
||||
<input type="text" readonly="readonly" value="table">
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon appsmith-widget-tabs"></div>
|
||||
<input type="text" readonly="readonly" value="tabs">
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon appsmith-widget-text"></div>
|
||||
<input type="text" readonly="readonly" value="text">
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Character mapping</h2>
|
||||
<ul class="glyphs character-mapping">
|
||||
<li>
|
||||
<div data-icon="a" class="icon"></div>
|
||||
<input type="text" readonly="readonly" value="a">
|
||||
</li>
|
||||
<li>
|
||||
<div data-icon="b" class="icon"></div>
|
||||
<input type="text" readonly="readonly" value="b">
|
||||
</li>
|
||||
<li>
|
||||
<div data-icon="c" class="icon"></div>
|
||||
<input type="text" readonly="readonly" value="c">
|
||||
</li>
|
||||
<li>
|
||||
<div data-icon="d" class="icon"></div>
|
||||
<input type="text" readonly="readonly" value="d">
|
||||
</li>
|
||||
<li>
|
||||
<div data-icon="e" class="icon"></div>
|
||||
<input type="text" readonly="readonly" value="e">
|
||||
</li>
|
||||
<li>
|
||||
<div data-icon="f" class="icon"></div>
|
||||
<input type="text" readonly="readonly" value="f">
|
||||
</li>
|
||||
<li>
|
||||
<div data-icon="g" class="icon"></div>
|
||||
<input type="text" readonly="readonly" value="g">
|
||||
</li>
|
||||
<li>
|
||||
<div data-icon="h" class="icon"></div>
|
||||
<input type="text" readonly="readonly" value="h">
|
||||
</li>
|
||||
<li>
|
||||
<div data-icon="i" class="icon"></div>
|
||||
<input type="text" readonly="readonly" value="i">
|
||||
</li>
|
||||
<li>
|
||||
<div data-icon="j" class="icon"></div>
|
||||
<input type="text" readonly="readonly" value="j">
|
||||
</li>
|
||||
<li>
|
||||
<div data-icon="k" class="icon"></div>
|
||||
<input type="text" readonly="readonly" value="k">
|
||||
</li>
|
||||
<li>
|
||||
<div data-icon="l" class="icon"></div>
|
||||
<input type="text" readonly="readonly" value="l">
|
||||
</li>
|
||||
<li>
|
||||
<div data-icon="m" class="icon"></div>
|
||||
<input type="text" readonly="readonly" value="m">
|
||||
</li>
|
||||
<li>
|
||||
<div data-icon="n" class="icon"></div>
|
||||
<input type="text" readonly="readonly" value="n">
|
||||
</li>
|
||||
<li>
|
||||
<div data-icon="o" class="icon"></div>
|
||||
<input type="text" readonly="readonly" value="o">
|
||||
</li>
|
||||
<li>
|
||||
<div data-icon="p" class="icon"></div>
|
||||
<input type="text" readonly="readonly" value="p">
|
||||
</li>
|
||||
<li>
|
||||
<div data-icon="q" class="icon"></div>
|
||||
<input type="text" readonly="readonly" value="q">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<script>(function() {
|
||||
var glyphs, i, len, ref;
|
||||
|
||||
ref = document.getElementsByClassName('glyphs');
|
||||
for (i = 0, len = ref.length; i < len; i++) {
|
||||
glyphs = ref[i];
|
||||
glyphs.addEventListener('click', function(event) {
|
||||
if (event.target.tagName === 'INPUT') {
|
||||
return event.target.select();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}).call(this);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
91
app/client/public/appsmith-widget-font/styles.css
Normal file
91
app/client/public/appsmith-widget-font/styles.css
Normal file
|
|
@ -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";
|
||||
}
|
||||
|
|
@ -15,6 +15,9 @@
|
|||
rel="stylesheet"
|
||||
/>
|
||||
<!-- add other blueprint-*.css files here -->
|
||||
<link rel="stylesheet" href="%PUBLIC_URL%/appsmith-widget-font/styles.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta
|
||||
name="viewport"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import {
|
||||
ActionTypes
|
||||
} from "../constants/ActionConstants"
|
||||
import { IWidgetCardProps } from '../widgets/BaseWidget'
|
||||
import { WidgetCardProps } from '../widgets/BaseWidget'
|
||||
|
||||
export const fetchWidgetCards = () => {
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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<WidgetCardsPaneResponse> {
|
||||
return Api.get(WidgetCardsPaneApi.url, {})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<T> {
|
||||
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[] }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@ const {
|
|||
ThemeProvider,
|
||||
} = styledComponents as styledComponents.ThemedStyledComponentsModule<Theme>;
|
||||
|
||||
|
||||
export type Theme = {
|
||||
radii: Array<number>;
|
||||
fontSizes: Array<number>;
|
||||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -1,2 +1,3 @@
|
|||
export const DMSans = "DM Sans";
|
||||
export const AppsmithWidget = "appsmith-widget-font";
|
||||
export const OpenSans = "Open Sans";
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<React.Fragment >
|
||||
<DragPreviewImage connect={preview} src={blankImage} />
|
||||
<Wrapper ref={drag}>
|
||||
<div ref={card}>
|
||||
<Icon icon={IconNames.SEGMENTED_CONTROL} iconSize={20} />
|
||||
<IconLabel>{props.details.label}</IconLabel>
|
||||
</div>
|
||||
</Wrapper>
|
||||
<Wrapper ref={drag}>
|
||||
<div ref={card}>
|
||||
<i className={props.details.icon} />
|
||||
<IconLabel>{props.details.label}</IconLabel>
|
||||
</div>
|
||||
</Wrapper>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<WidgetCardPaneProps> = (props: WidgetCardPaneProps) => {
|
||||
|
|
@ -30,7 +32,7 @@ const WidgetCardsPane: React.SFC<WidgetCardPaneProps> = (props: WidgetCardPanePr
|
|||
<React.Fragment key={group}>
|
||||
<h5>{group}</h5>
|
||||
<CardsWrapper>
|
||||
{ props.cards[group].map((card: IWidgetCardProps) => <WidgetCard details={card} key={card.widgetType} />) }
|
||||
{ props.cards[group].map((card: WidgetCardProps) => <WidgetCard details={card} key={card.widgetType} />) }
|
||||
</CardsWrapper>
|
||||
</React.Fragment>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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> | any;
|
||||
fetchCanvasWidgets: Function;
|
||||
cards: { [id: string]: IWidgetCardProps[] } | any;
|
||||
cards: { [id: string]: WidgetCardProps[] } | any;
|
||||
addPageWidget: Function;
|
||||
page: string;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<any>;
|
||||
cards?: {
|
||||
[id: string]: IWidgetCardProps[];
|
||||
[id: string]: WidgetCardProps[];
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user