From 04c535653c9ef6145c59bfb1c5d815f608e2277c Mon Sep 17 00:00:00 2001 From: Piero Toffanin Date: Fri, 29 Mar 2019 16:12:00 -0400 Subject: [PATCH] Contours plugin UI mockup completed --- plugins/contours/public/ContoursPanel.jsx | 106 ++++++++++++++++++++- plugins/contours/public/ContoursPanel.scss | 49 +++++++++- plugins/contours/public/icon.png | Bin 901 -> 1052 bytes plugins/contours/public/icon.svg | 40 ++++---- plugins/contours/public/icon@2x.png | Bin 1810 -> 2127 bytes 5 files changed, 172 insertions(+), 23 deletions(-) diff --git a/plugins/contours/public/ContoursPanel.jsx b/plugins/contours/public/ContoursPanel.jsx index 5b246807..a684e632 100644 --- a/plugins/contours/public/ContoursPanel.jsx +++ b/plugins/contours/public/ContoursPanel.jsx @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import Storage from 'webodm/classes/Storage'; import L from 'leaflet'; import './ContoursPanel.scss'; @@ -15,9 +16,13 @@ export default class ContoursPanel extends React.Component { super(props); this.state = { - error: "" + error: "", + interval: Storage.getItem("last_contours_interval") || "1", + customInterval: Storage.getItem("last_contours_custom_interval") || "1", + layer: "", + projection: Storage.getItem("last_contours_projection") || "4326", + customProjection: Storage.getItem("last_contours_custom_projection") || "4326", }; - } componentDidMount(){ @@ -45,12 +50,107 @@ export default class ContoursPanel extends React.Component { // }); } + handleSelectInterval = e => { + this.setState({interval: e.target.value}); + } + + handleSelectLayer = e => { + this.setState({layer: e.target.value}); + } + + handleChangeCustomInterval = e => { + this.setState({customInterval: e.target.value}); + } + + handleSelectProjection = e => { + this.setState({projection: e.target.value}); + } + + handleChangeCustomProjection = e => { + this.setState({customProjection: e.target.value}); + } + render(){ - const { error } = this.state; + const { error, interval, customInterval, layer, + projection, customProjection } = this.state; + const intervalValues = [0.25, 0.5, 1, 1.5, 2]; return (
Contours
+
+ +
+ +
+ +
+
+ {interval === "custom" ? +
+ +
+ meter +
+
+ : ""} + +
+ +
+ +
+
+ +
+ +
+ +
+
+ {projection === "custom" ? +
+ +
+ +
+
+ : ""} + +
+ + +
+ + + +
+
+
); } } \ No newline at end of file diff --git a/plugins/contours/public/ContoursPanel.scss b/plugins/contours/public/ContoursPanel.scss index 064e7178..31346957 100644 --- a/plugins/contours/public/ContoursPanel.scss +++ b/plugins/contours/public/ContoursPanel.scss @@ -1,6 +1,7 @@ .leaflet-control-contours .contours-panel{ padding: 6px 10px 6px 6px; background: #fff; + min-width: 250px; .close-button{ display: inline-block; @@ -17,14 +18,56 @@ left: 2px; &:hover{ - opacity: 0.8; + opacity: 0.7; cursor: pointer; } } .title{ - font-weight: bold; - font-size: 1.2em; + font-size: 120%; margin-right: 60px; } + + hr{ + clear: both; + margin: 6px 0px; + border-color: #ddd; + } + + label{ + padding-top: 5px; + } + + select, input{ + height: auto; + padding: 4px; + } + + input.custom-interval{ + width: 80px; + } + + *{ + font-size: 12px; + } + + .row.form-group.form-inline{ + margin-bottom: 8px; + } + + .dropdown-menu{ + a{ + display: inline; + padding-top: 8px; + padding-bottom: 8px; + } + } + + .btn-preview{ + margin-right: 8px; + } + + .action-buttons{ + margin-top: 12px; + } } diff --git a/plugins/contours/public/icon.png b/plugins/contours/public/icon.png index 8bb4276626353868b0380b55e23fec688df6300d..21c9708c9656c56354d136a26fb434486ded0742 100644 GIT binary patch delta 956 zcmV;t14I0U2b>6yZhx6cL_t(YiS3n5Y!y`$$A4$0kGE*2TBMzKZ%ZjwLkV_+G3ut) z3h^T`HSSR&tcXn@ifCN1CCUO_8B`i$+_+&wh&90`F4W*gO|2NPZFFY(Vb#tHX?dMF zE;>`jXK9T4w=i`1HxQi`9He=M**4Ew7(9jQb0)IO)@f>*$nxTUK5qbM2!aC3v^=H?4PkE*^OMbVkOEXJ6(lO*|E zM4ktFS=qPtZ2okTB*#3@bF0<~HDQ$A58l#c}-EYDOI$9qmbyOaiyc z<+9BqG{&3-P82F|1GtvW_W-+BOC$1b5CpFSbar;O)M~W=XsFd{opW<@p#zYnX$)SkPDFC93HbkEsFg}3o7EU=?K`UaT7mmlU@VJx zpNKqA$ly#AMW-^p?MagSLE$jC01FEXvFCY@0)Kl|wJDC{O8{{kk9eN91Uv$if%~$o zdqiY=7WqFSayksd)49{e#>TV2V0oGDekvb3~xetv#_p}_O9hVWtUNdCVO&+uIgT?N1i{U<3^g{@%6;G8?YeG1D=$di(CHxCbF=~r^TJl8z0000G>GGP5I6wb7m?j*n%)YQ2Y@$#Jrw5?0e=DKfDiE{@-hkFoLf^$6h+Z{03vcS zAXx`|2E4pXX2*fwfQxNVL@NHB&+pw+@DeaHH-9(xMH>cw2uO0^I&c;^L~(Wi zZ!HR7BY>)oEy*a)^8t$H_`cC-{ORE#z7zzYB!9UVU|A#%=b z77;{b*h6c8*S!8YaClMFD}fzeA8mt4lI#c81EaNCZGMjCi9}?zPq*E!tAh2lz(HUH zXaW7eyMMrQe*K$ZpAWn`1h^$csyZhk@Nm+{fE&Q`z@UH1T^GmkU=&4PQ8WU;ec)#w{XO7;h;*uIFYqF;$=gi;@6_w{Z%!#Zimage/svg+xml - + @@ -69,18 +69,24 @@ id="g9575" transform="matrix(1.1918583,0,0,1.1960416,-1.0686423,-56.918136)" style="stroke-width:0.53201765"> - - + + + + diff --git a/plugins/contours/public/icon@2x.png b/plugins/contours/public/icon@2x.png index 4383a8725416e8148fd48eecd18c9ac234dcdf2d..c3cf42ab381987d7732b0e5aaf6ee97eb831a0e3 100644 GIT binary patch delta 2040 zcmV75>i5#v9u#q$O7NUXShkSOj7VX&TY+ zXw)=O8mST?P2v!+P()e~&=i59fJh=JB#LNwiQ-aFj3}tIfa@kmNQk76(9%aLC4?4J zph0r$-Fs(k>>60dPIhJvKfHElXJ>ZDkNiRY{+-7?_d7H9aewZ;z#0DAx!b=*Aw8h{PpN?Df#kOm-Pwm)u~ z=7C%;HyW2??1a+k^le1+XqiwL{tMs~fK!HHoLjbR*~?KAKby@qjE#-G)APKW0o)E? zGk`aR`7*Nt&}G~9**H97B_xFSJb-TiFslL(onz()O@GsTJeSK&#EBP#Wm%1m<8%_y zUI6b2ad83c*IIw4UaYzaNhyyp^ZpRi%gnsbw(Z~4ryL*Ybove=`WAq9gqXjswf<7A z_Elfp42&}F0Ow89JeSMm^7Uf1wzl5rdEW1RF#uqU zh*l}3UW=PhAAoH>)udq<8}j-5b2XA^bX|8h5r6Gw=J(bk3INRf91;D*G|ivZT2Q2v zA7JL+VQSf*MxWMtN6@z_AtA&%08a%vzQ?xh@7L&X7c<`vpgm3^A$X05zNnP?d5u2q zW#$L`IwD%9l=`DzSGBnj(H8=$XKmYlD59T)l(L(dAH&>}0f2U9eoP2)Je$onggGds zx_<#wEC$THFX&g1kY!n|%zTGmM@0J(UNjo%bh?k3@0m6IXxu$II{FKQPX#8T0|DKZ zmX?-^jlLow$8om!bwqSdDfMhv&*^mf5D{&uLGB`e2LODEnLC-e6TqjL`Fj9rEi7Aw z5C_8y<>7VS&p(k!e8}&U@C!t=!7qEB*MA!pc=__>BIIjLqtEla`wE4^UuuwsWm)fb zUH3i!cZQe`wY0SK3=a?6K?4!>GV_{gnVD|`@WW|2IEPjR8lMd#vt-GVy{KGq0KjGD zk87=W)Jp~ca=F}#TI+2@v2JsNBBoVDfMF_IvQeHALh@@{Q*^nUzkZ~<;s;y0W9^|F4x!_-WF6ijuW*K)&#N($$;^zFnS>IFL~td$X7>#XfJkmL30=B$=?Z{JpRG|!*;L&G z0Pspskw_#yGgo$rL}G88J^*0FihmW&2#lmMcL3FM=vBYqd0sYx!`YyMnGZ@S_eA(d zLP~iTfT|+_5uFKf2Y`14kq{9D_lNai5go_r#v8}#X_(CXBO%0z*4EY=Bgo7^ zO1WAHagv#Pf;<3BI*#*TSUb}+D>yOpi+(u~FrERhb6O^%PE4ItD=<7fY<~+OjsQ3u z(&tvs^R`MUUjp!y=Xw1A{#CXuHw+`o%(pW04Pk`KI6O2oR0uOL^G?4U{F4=vtF5g~ zI*v1l%4(si0Gu`nA)WxRwFa@d;E8e-T~%&{6wa>WIF^3{uK3l1gM*5hf9=itxzY10pRn@j(7!^Z|h~6iqj4D7K+qUl|qK^Qm zI&94XuM*KNt@S4Wl)@Z@5T6a6vxw;1LBFU2-s1qa`&3tmXhT$?3d|hvJ_cYnfcM8p z0sx*NqK6wA8Xg%K7?_N5Di5{O@ReIc)T@-*8T1WJNJ`nx%okC4?0Fo1_pSrveY4k)F1qT1HHmn#;FPp49;B!G4Pm;lz5N~O-` z=H`L%@$oso6oi1Jlpnl$_38;sZ3n>-bX05owVDCq^df}#9Dr{k`~#e4=5E6g zi;QJi8OL$%CUK%JOuebj2RQ(bxUSnXG&J0f3n&n0dsu?K~oCwnZ#r5sO$vE&LDB W`1fWRWEa=~000027b6lHLh$7S8mkyJ1fwxkFjD>C%O{0YAeBm+g26Xh(G^|Nx{c5} zd+!XbTeWs6!`%D$;qKy{JLk^JF4`~iPv*mU?*BaJ`QLlabAO(51_l^lfB^;=;PgRG zcK~T@*sx)wP$;}6m&=W)su7XHzV9FFwf|`q48u!+w*nU}{TvH*MnvxQegAua zcJlfE5@aSOCZ=+^+?!N&T0}MhmjGTrPDEsHqtUqT*s)_LGC8Y_6rfZpovW%95jjUh z%BosY)uM=$fPV?#9N?^1V=NKb>-+vSKxlowQpb+tTxpECK~>)cymqC2EI0-Dz&`*Z zA{$k8C`k~J+kM~PX6xLyAjfew8)LSr>ZL0Rw-u*=-vdtpPpj%otyVh-G?xjJlap?< z+59o^_C&wqBI5bJznFH|vmnp&&J4rwo4`j`82ke8jDM>BSw#M%s(+}}YBRvg-8wps zGcF!Rrdg!GAJ*q>I`s1MCO4iaMTzRgke}S#?<>sy%{mw zrK(#KrU!x`_&}PM@8)Q9bab7nK1#b71%9fk+w=MS6V+<<#nlAd4PhAm%ovjtRI%~8 z3K||B-hZyDZ%LVFjWIXP&(Hs{kC^hn6miBA;0Q2Bmwja!Q4}3E#w1PW+IStOoZ~n* zh{#V;=3OH4e%pdfArD*zT(R`Kl=js90`NuPJ0uc82BcIfHAsAfAP90mlpZuQAQ8DI zW!v9_n9G2hfDZ!WU4ondz6D$ZypN2%WeF-Gs(;$@LEFBrNgI|?DwRG=JVlmqN<=== zLCi+r=fJOlEp!)?#Cw3dyOC5iJ)?RTL@GV2>UVwLKaj!wG%!Q_rdNvFfO6KuN~N-% z)){ru#&-uqrl_DBA(^H)8sS2ms9-dEJv#P##H;SHeS|S zeOs#in1yoz+4KG&@Fide8B+uJg~c|J!G$7KQX2=LCNA&R2Cy*hQ#?AWd zYZC3KTCJW+af+6HbF_=JjrSqqOgEZ(_7d=5xL>+`6%f$O|cF=Mh)YHatsQU4L&O&Rnkp z-T<6Oob}cLCx`{l0Z-C8rC&j@Se%ZcXlGgsu&q|B{h*r|$S!^M1Mf|=Zv=kWgTDph z8=R+l89a$nsq``68?+w+cLYIjN3VXe*3hn0d$a4h_l=H@uInSlp5QpnM#pjX0Qb`_ z=7BY9*4#)R>ooHS?z-+Hs(<^N(;{Uq_pwr!>?-DTfS z=TmGOG6fZj#VKRVK42_^@^9c75t&id8C5-`s?XQ!^}k`c9~c`OJ3F7xUu=xI3bGaxxf(BO)>!MNz{TQ#ZyO{a;@f4=}(00}L?0>BfHmCp{~p2lIAH P00000NkvXXu0mjfRt8qB