From ca91f7c3c16c997901893b6349c4d981cb715e3b Mon Sep 17 00:00:00 2001 From: Brandon Elam Barker Date: Mon, 9 Dec 2019 11:00:57 -0500 Subject: [PATCH] Css revamp (#21) * trying out debounce with textInput, but debounce causes form inptut to reset * working on CSS revamp (working off of debounce branch) * fixed existing compilation issues * extraced css to metajelo-ui-css-classes repo * fixes for pulling in css * extracting styles for: record, production, location, identifier * CSS for sustainability and identifiers * basic metadata fields * resource type css * resource metadata source and formats * removing extraneous textInput/urlInput args * institution contact and policy; all text now extracted to CSS --- .gitignore | 3 +- README.md | 9 +- css/fonts/icomoon.eot | Bin 1992 -> 0 bytes css/fonts/icomoon.svg | 15 -- css/fonts/icomoon.ttf | Bin 1828 -> 0 bytes css/fonts/icomoon.woff | Bin 1904 -> 0 bytes css/style.css | 174 -------------- package.json | 3 +- packages.dhall | 2 +- scripts/dist_build_commands.sh | 2 +- scripts/getcss | 6 + src/Metajelo/FormUtil.purs | 25 +- src/Metajelo/Forms/InstitutionContact.purs | 13 +- src/Metajelo/Forms/InstitutionPolicy.purs | 36 ++- src/Metajelo/UI.purs | 260 ++++++++++----------- 15 files changed, 184 insertions(+), 364 deletions(-) delete mode 100644 css/fonts/icomoon.eot delete mode 100644 css/fonts/icomoon.svg delete mode 100644 css/fonts/icomoon.ttf delete mode 100644 css/fonts/icomoon.woff delete mode 100644 css/style.css create mode 100755 scripts/getcss diff --git a/.gitignore b/.gitignore index 7c92fb9..63a37a3 100644 --- a/.gitignore +++ b/.gitignore @@ -12,7 +12,8 @@ generated-docs/ .purs* .psa* .spago/ - +css +metajelo-ui-css-classes prod/ prod/css diff --git a/README.md b/README.md index c2cb9dd..b1d6a97 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,14 @@ Web tools to display [metajelo](https://github.com/labordynamicsinstitute/metajelo) packages. -# Usage +# Styling with CSS + +By default, CSS files are retrieved from a [separate repository](https://github.com/labordynamicsinstitute/metajelo-ui-css-classes) using `scripts/getcss`; the file `css/style.css` contains some default styles used in our examples. +Feel free to include it, or modify it (renaming the file is also possible): + +```html + +``` # Building diff --git a/css/fonts/icomoon.eot b/css/fonts/icomoon.eot deleted file mode 100644 index fced33069afb86c919af085a6526d70a064c45ec..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1992 zcmaJ?O=uid9RL64?RVIje9Y{Mr0q1x&ZV%MCc6`~`6!sAZf$E#>FS|qrpdYq-JK1| z1{x@ugLv>_O`%v2deDm(Z<2$86)#0ROKZG{M?q3(@ld+!@6Alu-57lE=KcO3@BP2t zy#K=}(Fi7!LfwPuHcQTh%iVmb>yP_StB(%Lh*VmoC8|>mvraA)R9c`iRcMo{_ zI2&tNdqLmE8mm;d-Y>s>;~&tU6N%B4va_r|KJyw;=pp3x3K-EX@iS2vB#o@p8aGpy zBn*#8x>{dylnbIC^y{GYnsalFl5_?1HPEK()XMkH$Df0~1sfl))i)aO6C)auauOm5 zPjI+$Px%F$PyLnuqH&H(y^g_fyL+4^dU8%YXg#2_0u#c6`N>bp1Fv|Di04?!&!z$5u;B}L1s^J z-k#xU=?m110gepi*vikaJ$8bN8cHRxR}|uY;ILCi%;6XB}sj_hy}FjHBUD9OnpD6x;Go z`AkHW3^=UBBm7b`r{V|;XUHQ|bwpUnluRopw8VQ6=}@|x+6`l9%AhVEYkgzNnYMIqzu#eWj`Bkz^0o{Z2KK-isS z9q4inDcDKGnweNnPmK3siDDthwyfFt&V=yanOGtb%S3y6qAik12@<4mXL8_^{5LQk zRiEB}PnJ@Sbldd$zOovW8Yyj@<+qyT%oHvm7h9Aeiy$-}`X?n``1mRi|?-glT8 zPv2WTX@Yb*PVdsM9OFxP6Qxgaddtg~e@pyB+FzBv3G6YUQv_H6UJS4RwgVgj-VAUU zueK532>5RVI6*JdC-Q9x#lcY_@v#D239ta33UCPcR)E839%g_e;4cI?L3#RWb*Wyf z*WK<8R4T7;tkzxgbawRUwsYjJBbf{3%4XGB@9t+uYR=c)hFK}Q<#ne~UN*09nZ>30 uMfjGbd9UR)5Jd$|(DfRjLk+CU;9aLJe2ZQSy%@C6EVAzPly*@LqkjPa);5O# diff --git a/css/fonts/icomoon.svg b/css/fonts/icomoon.svg deleted file mode 100644 index d8af565..0000000 --- a/css/fonts/icomoon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - -Generated by IcoMoon - - - - - - - - - - - \ No newline at end of file diff --git a/css/fonts/icomoon.ttf b/css/fonts/icomoon.ttf deleted file mode 100644 index 1f05073c89c575d8c40177f5d6e8a43da94f7009..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1828 zcmaJ>OKclO82|QF_X<|Eq=23|_#f27VRl}izY!l-|wbxPN zNR3oM4u}I6AeAaAA#s2U7j7sAkSOAU5NAXQ7sL?>r4ki~sy5&3ZWIRB&Gh@v2Ae6`iNnYkokbX?NS_Oh$ID26~k587zC zH`ggmS3q9_ZFz31e)mG+5$Id+@$Pzivx7J>)QFUm5NSjL-Xm$z{12ht@p_kqUmRR)g%4?=RrzUWmkBV zpwmRdqotxVmW!R>=%5iB8_hYT!D9I=mx|MKJYAle%%0?I<^)eoX3RYvzdAcp<9#dp z_}8puWrqy2QplG|`NE=M3}r2ayqQ{U#+&Z$NikQmmRBqkDu!tql|rHDSy|Kr{>A6; z|17=fs@Jb8-! zC1a?U^0kq#PN$G>Up}a`lkKaz%wO3#im>$dQ7Q|run+wr`tr4|eHfhU--oK$gO7=z zqNh3Mpjts=W$TW4Io?}S>}B+EJyV;Ry;_!S3wp~thOwA0gw0jF+q!A$xBd27*}ndw z`4!U$E&|f^UqV&Ld zlLDOa{{TE_ImDiC$;aW62qXa|TdnLu?<-8(*Y|f{nk0ix((CjS$N3WeL>W_pUh(S{ z+>*e^(W=oGp+6=SY` zb=sg!C_n%^XDCk-PdxQR=H+^0tLbjQX&r%XQIlNSc%tTF+v`}3x>w(DJM|Uo`nFYF rZeK)fd0O;+ci_DNGoBxjOC9Vh;9aL}tW`gOi$Ma25l!@~{-4V~`En%n diff --git a/css/fonts/icomoon.woff b/css/fonts/icomoon.woff deleted file mode 100644 index bf352af150c409d871c81768ac990b796e8931a5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1904 zcmaJ?OKclO82}7faYmH%g5ZXPQi+N~Rhw^Sw~d1WBmFbqeDm-B zoZWrnLbXav82T!u)H)pOB|bPVTq=$daUATN6tge=*8GaM3T_em4Jmu2?|x}|>yo>N zz0{S`(_G$q9o+9kVnj;grK^80HoOI*sD<;26zlHE=N3VNJB$6W6n#tlu(+~u4IFF+ zT;@E{a%*1deFRQEZ)s;m-->q)I?*q%ca)^*lJBiFz5!wT@Wz7oO+| zAR*HH0Y!6TM1}H)=W9_3JFd8^#Z)mT&cXRKP`=>jPIvt$B#=ki3{AT`Y-ZodwtH!sXC8gLk zF)^Mtm6w3lh{m5$q3y@_{~S)KrfmzK5_FuXf3RF~hjOta9PPDYLxVZD+*_)gb&b@AKlA3PPWgoXN!e$xlpWHR$tc9$e*a!C;ajD zjy&dC*6~Zl;;d!c)@-p@@|`T|0srDl_U58aC7EG=KK>jOWep?u@6$S&v2%up?O0 zDsEuqL!oPVFsvnF{8YPWz=R7M(u8458+ik{2KnZZuSv&{Z&yC3w43d!y3Aj@z8_)v z?fq0{JduCw7tvQ)g!=Uh}PXsm4A0WSx8Ym1$XIc#R?6O)%K zvTZ?c`MPCQ3&pUxnt#KzZS#g|uaoWSFPcAVTfs$;cT&CyH6iou!Fv+MBkz^$p3Knh zN7~(O?LQD4O0b=bxAXB-D$cv{WUU-lTlVZscR~2id_0+q=k-)d?~p7?SRjqNi-UON zy8-!m`L9o3GbbKUDguJ&Ej8L5#v_|Vtzya)>paP8?`qZK1#YS^;*;|9t z1_IrrW%6k4P|a$~-*B1@zp>_RG!~pITTX4hbq=u=sH%K#z), (<$), (<$>), (<<<), (<>)) import Concur.Core (Widget) -import Concur.Core.FRP (Signal, display, loopS, step) +import Concur.Core.FRP (Signal, debounce, display, loopS, step) import Concur.React (HTML) import Concur.React.DOM as D import Concur.React.Props as P @@ -129,13 +129,19 @@ labelSig widg props sigIn = D.div_ props do display widg sigIn -textInput' :: D.El' -> String -> CtrlSignal HTML String -textInput' tag label initVal = labelSig' tag label [] $ sig initVal +textInputWidget :: String -> Widget HTML String +textInputWidget txt = + D.input [P.value txt, P.unsafeTargetValue <$> P.onChange] + +-- TODO: remove the first two arguments from textInput', textInput, and urlInput +textInput' :: CtrlSignal HTML String +textInput' initVal = sig initVal where sig :: String -> Signal HTML String sig txt = step txt do - newTxt <- D.input [P.value txt, P.unsafeTargetValue <$> P.onChange] + newTxt <- textInputWidget txt pure $ sig newTxt + -- sig txt = debounce 500.0 txt textInputWidget -- | Reasonable defaults for filtering input text textFilter :: Signal HTML String -> Signal HTML (Maybe NonEmptyString) @@ -143,13 +149,12 @@ textFilter txtSig = do txt <- txtSig pure $ fromString $ trim txt -textInput :: D.El' -> String -> CtrlSignal HTML (Maybe NonEmptyString) -textInput tag label iVal = textFilter $ textInput' tag label - (foldf toString iVal) +textInput :: CtrlSignal HTML (Maybe NonEmptyString) +textInput iVal = textFilter $ textInput' (foldf toString iVal) -urlInput :: D.El' -> String -> CtrlSignal HTML (Either String URL) -urlInput tag label iVal = do - txtMay :: Maybe NonEmptyString <- textInput tag label (fromString prevTxt) +urlInput :: CtrlSignal HTML (Either String URL) +urlInput iVal = do + txtMay :: Maybe NonEmptyString <- textInput (fromString prevTxt) urlEi <- pure $ case txtMay of Nothing -> Left prevErr Just txt -> parsePublicURL $ toString txt diff --git a/src/Metajelo/Forms/InstitutionContact.purs b/src/Metajelo/Forms/InstitutionContact.purs index 057cb4c..5b4552e 100644 --- a/src/Metajelo/Forms/InstitutionContact.purs +++ b/src/Metajelo/Forms/InstitutionContact.purs @@ -15,7 +15,7 @@ import Data.Newtype (class Newtype) import Formless as F import Metajelo.FormUtil (CtrlSignal, IdentityField, MKFState, MKValidators, errorDisplay, formSaveButton, initFormState, labelSig', menu) import Metajelo.Types as M -import Metajelo.UI.CSS.ClassProps as MC +import Metajelo.CSS.UI.ClassProps as MC import Metajelo.Validation as V import Metajelo.View (contactWidg) import Text.Email.Validate (EmailAddress, toString) @@ -62,13 +62,13 @@ validators = InstContactForm { contactForm :: FState -> Widget HTML M.InstitutionContact contactForm fstate = do query <- D.div' [ - D.div' [D.text "Email"] - , D.input [ - P.defaultValue $ F.getInput proxies.email1 fstate.form + D.input [ + MC.contactEmail + , P.defaultValue $ F.getInput proxies.email1 fstate.form , (F.setValidate proxies.email1 <<< P.unsafeTargetValue) <$> P.onChange ] , errorDisplay $ F.getError proxies.email1 fstate.form - , D.div' [D.text "Contact type: ", menu fstate.form proxies.contactType] + , D.span_ [MC.contactType] $ menu fstate.form proxies.contactType , D.div' [ F.submit <$ formSaveButton fstate] ] res <- F.eval query fstate @@ -79,8 +79,7 @@ contactForm fstate = do pure {emailAddress: form.email1, contactType: form.contactType} contactSignal :: CtrlSignal HTML (Maybe M.InstitutionContact) -contactSignal instContactMay = - labelSig' D.h2' "Institution Contact" [MC.institutionContact] $ +contactSignal instContactMay = D.div_ [MC.institutionContact] do sig instContactMay where sig icMay = step icMay do diff --git a/src/Metajelo/Forms/InstitutionPolicy.purs b/src/Metajelo/Forms/InstitutionPolicy.purs index ff3bf3c..5a68e80 100644 --- a/src/Metajelo/Forms/InstitutionPolicy.purs +++ b/src/Metajelo/Forms/InstitutionPolicy.purs @@ -21,7 +21,7 @@ import Formless as F import Formless.Validation (Validation, hoistFnE) import Metajelo.FormUtil (CtrlSignal, IdentityField, MKFState, MKValidators, PolPolType(..), errorDisplay, formSaveButton, initFormState, labelSig', menu, nonEmptyArrayView) import Metajelo.Types as M -import Metajelo.UI.CSS.ClassProps as MC +import Metajelo.CSS.UI.ClassProps as MC import Metajelo.Validation as V import Metajelo.View (ipolicyWidg) import Text.URL.Validate (parsePublicURL, urlToString) @@ -88,14 +88,14 @@ validators = InstPolicyForm { policyForm :: FState -> Widget HTML M.InstitutionPolicy policyForm fstate = do query <- D.div' [ - D.div' [D.text "Policy: ", menu fstate.form proxies.polPolType] + D.span_ [MC.policy] $ menu fstate.form proxies.polPolType , D.input [ P.defaultValue $ F.getInput proxies.policy fstate.form , (F.setValidate proxies.policy <<< P.unsafeTargetValue) <$> P.onChange ] , errorDisplay $ F.getError proxies.policy fstate.form - , D.div' [D.text "Policy type: ", menu fstate.form proxies.policyType] - , D.div' [D.text "Applies to product? ", menu fstate.form proxies.appliesToProd] + , D.span_ [MC.policyType] $ menu fstate.form proxies.policyType + , D.span_ [MC.applies] $ menu fstate.form proxies.appliesToProd , D.div' [ F.submit <$ formSaveButton fstate] ] res <- F.eval query fstate @@ -110,18 +110,17 @@ policyForm fstate = do } policySignal :: CtrlSignal HTML (Maybe M.InstitutionPolicy) -policySignal instPolicyMay = - labelSig' D.h3' "Institution Policy" [MC.institutionPolicy] $ - sig instPolicyMay - where - sig ipMay = step ipMay do - inputs <- pure $ F.wrapInputFields $ outToInRec ipMay - instPolicy <- D.div' [ - policyForm (initFormState inputs validators) - , foldMap ipolicyWidg ipMay - ] - liftEffect $ logShow instPolicy - pure $ sig $ Just instPolicy +policySignal instPolicyMay = D.div_ [MC.institutionPolicy] do + sig instPolicyMay + where + sig ipMay = step ipMay do + inputs <- pure $ F.wrapInputFields $ outToInRec ipMay + instPolicy <- D.div' [ + policyForm (initFormState inputs validators) + , foldMap ipolicyWidg ipMay + ] + liftEffect $ logShow instPolicy + pure $ sig $ Just instPolicy checkPolicy :: ∀ m. Monad m => Validation InstPolicyForm m String String M.Policy checkPolicy = hoistFnE $ \form str -> @@ -132,6 +131,5 @@ checkPolicy = hoistFnE $ \form str -> -- | The first element of the tuple is the (desired) number of policies policySigArray :: CtrlSignal HTML (Tuple Int (Maybe (NonEmptyArray M.InstitutionPolicy))) -policySigArray instPoliciesMay = - labelSig' D.h2' "Institution Policies" [MC.institutionPolicies] $ - nonEmptyArrayView policySignal instPoliciesMay +policySigArray instPoliciesMay = D.div_ [MC.institutionPolicies] do + nonEmptyArrayView policySignal instPoliciesMay diff --git a/src/Metajelo/UI.purs b/src/Metajelo/UI.purs index dccbba7..fc7becc 100644 --- a/src/Metajelo/UI.purs +++ b/src/Metajelo/UI.purs @@ -8,6 +8,7 @@ import Concur.React (HTML) import Concur.React.DOM as D import Concur.React.Run (runWidgetInDom) import Control.Monad.State +import Control.Plus (empty) import Data.Array.NonEmpty (NonEmptyArray) import Data.Either (Either(..), hush) import Data.Foldable (fold, foldMap) @@ -23,7 +24,9 @@ import Metajelo.FormUtil (CtrlSignal, arrayView, checkBoxS, dateTimeSig, formatX urlInput, consoleShow) import Metajelo.Types as M import Metajelo.View as MV -import Metajelo.UI.CSS.ClassProps as MC +-- import Metajelo.CSS.UI.ClassNames as MCN +import Metajelo.CSS.UI.ClassProps as MC +-- import Metajelo.CSS.UI.Util (cList) import Option as Opt import Prim.Row as Prim.Row import Text.URL.Validate (URL) @@ -36,7 +39,6 @@ runFormSPA divId = runWidgetInDom divId page page :: ∀ a. Widget HTML a page = do - -- _ <- dyn $ formatSigArray (Tuple 0 []) D.div [MC.page] $ pure $ dyn $ accumulateMetajeloRecord --D.text "Hi" @@ -101,65 +103,61 @@ type PartialRelIds = NonEmptyArray (Opt.Option M.RelatedIdentifierRows) type PartialProds = NonEmptyArray (Opt.Option SupplementaryProductRowOpts) accumulateMetajeloRecord :: Signal HTML (Opt.Option MetajeloRecordRowOpts) -accumulateMetajeloRecord = labelSig' D.h1' "Metajelo Record Form" [MC.record] $ - loopS Opt.empty \recOpt -> D.div_ [] do - idOpt <- accumulateIdent "Record Identifier" $ - getOpt (SProxy :: _ "identifier_opt") recOpt - let idMay = Opt.getAll idOpt - dateMay <- textInput D.span' - "Original creation date of this metadata record: " $ - Opt.get (SProxy :: _ "date") recOpt - -- modDateTime <- dateTimeSig - let modDateTime = initDate - let xsdDateStr_ei = formatXsdDate modDateTime - let xsdDateMay = hush xsdDateStr_ei -- TODO: also retain either for errors +accumulateMetajeloRecord = loopS Opt.empty \recOpt -> D.div_ [MC.record] do + idOpt <- D.div_ [MC.recordId] do + accumulateIdent $ getOpt (SProxy :: _ "identifier_opt") recOpt + let idMay = Opt.getAll idOpt + dateMay <- D.div_ [MC.date] <$> textInput $ Opt.get (SProxy :: _ "date") recOpt + -- modDateTime <- dateTimeSig + let modDateTime = initDate + let xsdDateStr_ei = formatXsdDate modDateTime + let xsdDateMay = hush xsdDateStr_ei -- TODO: also retain either for errors - relIdsTup <- relIdSigArray $ Tuple - (Opt.getWithDefault 0 (SProxy :: _ "_numRelIds") recOpt) - (Opt.get (SProxy :: _ "relId_opts") recOpt) - let _numRelIds = fst relIdsTup - let relIdOpts = snd relIdsTup - let relIdsMay = join $ (map sequence) $ ((map Opt.getAll) <$> relIdOpts) + relIdsTup <- relIdSigArray $ Tuple + (Opt.getWithDefault 0 (SProxy :: _ "_numRelIds") recOpt) + (Opt.get (SProxy :: _ "relId_opts") recOpt) + let _numRelIds = fst relIdsTup + let relIdOpts = snd relIdsTup + let relIdsMay = join $ (map sequence) $ ((map Opt.getAll) <$> relIdOpts) - prodsTup <- supProdSigArray $ Tuple - (Opt.getWithDefault 0 (SProxy :: _ "_numSupProds") recOpt) - (Opt.get (SProxy :: _ "supProd_opts") recOpt) - let _numSupProds = fst prodsTup - let supProdOpts = snd prodsTup - let supProdsMay = join $ (map sequence) $ ((map Opt.getSubset) <$> supProdOpts) - newRec <- pure $ execState (do - get >>= Opt.maySetOptState (SProxy :: _ "identifier_opt") (Just idOpt) - get >>= Opt.maySetOptState (SProxy :: _ "identifier") idMay - get >>= Opt.maySetOptState (SProxy :: _ "date") dateMay - get >>= Opt.maySetOptState (SProxy :: _ "lastModified") xsdDateMay + prodsTup <- supProdSigArray $ Tuple + (Opt.getWithDefault 0 (SProxy :: _ "_numSupProds") recOpt) + (Opt.get (SProxy :: _ "supProd_opts") recOpt) + let _numSupProds = fst prodsTup + let supProdOpts = snd prodsTup + let supProdsMay = join $ (map sequence) $ ((map Opt.getSubset) <$> supProdOpts) + newRec <- pure $ execState (do + get >>= Opt.maySetOptState (SProxy :: _ "identifier_opt") (Just idOpt) + get >>= Opt.maySetOptState (SProxy :: _ "identifier") idMay + get >>= Opt.maySetOptState (SProxy :: _ "date") dateMay + get >>= Opt.maySetOptState (SProxy :: _ "lastModified") xsdDateMay - get >>= Opt.maySetOptState (SProxy :: _ "_numRelIds") (Just _numRelIds) - get >>= Opt.maySetOptState (SProxy :: _ "relId_opts") relIdOpts - get >>= Opt.maySetOptState (SProxy :: _ "relatedIdentifiers") relIdsMay + get >>= Opt.maySetOptState (SProxy :: _ "_numRelIds") (Just _numRelIds) + get >>= Opt.maySetOptState (SProxy :: _ "relId_opts") relIdOpts + get >>= Opt.maySetOptState (SProxy :: _ "relatedIdentifiers") relIdsMay - get >>= Opt.maySetOptState (SProxy :: _ "_numSupProds") (Just _numSupProds) - get >>= Opt.maySetOptState (SProxy :: _ "supProd_opts") supProdOpts - get >>= Opt.maySetOptState (SProxy :: _ "supplementaryProducts") supProdsMay - ) recOpt - let newRecMay = Opt.getSubset newRec - display $ recWidg newRecMay - pure newRec + get >>= Opt.maySetOptState (SProxy :: _ "_numSupProds") (Just _numSupProds) + get >>= Opt.maySetOptState (SProxy :: _ "supProd_opts") supProdOpts + get >>= Opt.maySetOptState (SProxy :: _ "supplementaryProducts") supProdsMay + ) recOpt + let newRecMay = Opt.getSubset newRec + display $ recWidg newRecMay + pure newRec where recWidg :: forall a. Maybe M.MetajeloRecord -> Widget HTML a - recWidg recMay = D.div' [ - D.h3' [D.text "Metajelo Record preview:"] - , D.br' + recWidg recMay = D.div [MC.recPreview] [ + D.br' , fold $ MV.mkRecordWidget <$> recMay ] -- FIXME: check how the header is grouped into these? accumulateSuppProd :: CtrlSignal HTML (MayOpt SupplementaryProductRowOpts) -accumulateSuppProd prodOptMay = labelSig' D.h1' "Product" [MC.product] do +accumulateSuppProd prodOptMay = D.div_ [MC.product] do basicMdOpt <- accumulateBasicMetaData $ getOpt (SProxy :: _ "basicMetadata_opt") prodOpt let basicMdMay = Opt.getAll basicMdOpt - redIdOpt <- accumulateIdent "Resource ID" $ - getOpt (SProxy :: _ "resourceID_opt") prodOpt + redIdOpt <- D.div_ [MC.resourceId] do + accumulateIdent $ getOpt (SProxy :: _ "resourceID_opt") prodOpt let resIdMay = Opt.getAll redIdOpt resTypeOpt <- accumulateResType $ getOpt (SProxy :: _ "resourceType_opt") prodOpt @@ -198,27 +196,26 @@ accumulateSuppProd prodOptMay = labelSig' D.h1' "Product" [MC.product] do where prodOpt = fromMaybe Opt.empty prodOptMay prodWidg :: forall a. Maybe M.SupplementaryProduct -> Widget HTML a - prodWidg prodMay = D.div' [ - D.h3' [D.text "Product preview:"] - , D.br' + prodWidg prodMay = D.div [MC.prodPreview] [ + D.br' , fold $ MV.mkSupplementaryProductWidget <$> prodMay ] supProdSigArray :: CtrlSignal HTML (Tuple Int (Maybe PartialProds)) -supProdSigArray prodsMay = labelSig' D.h1' "Supplementary Products" [MC.products] $ - nonEmptyArrayView accumulateSuppProd prodsMay +supProdSigArray prodsMay = D.span_ [MC.productsHeader] do + D.div_ [MC.productList] $ nonEmptyArrayView accumulateSuppProd prodsMay accumulateLocation :: CtrlSignal HTML (MayOpt LocationRowOpts) -accumulateLocation locOptMay = labelSig' D.h1' "Location" [MC.location] do - identOpt <- accumulateIdent "Identifier" $ +accumulateLocation locOptMay = D.div_ [MC.location] do + identOpt <- D.span_ [MC.institutionId] $ accumulateIdent $ getOpt (SProxy :: _ "institutionID_opt") locOpt let identMay = Opt.getAll identOpt - instNameMay <- textInput D.span' "Institution Name: " $ + instNameMay <- textInput $ Opt.get (SProxy :: _ "institutionName") locOpt - instTypeMay <- labelSig' D.h3' "Institution Type" [] $ menuSignal $ + instTypeMay <- D.span_ [MC.institutionType] $ menuSignal $ Opt.get (SProxy :: _ "institutionType") locOpt display D.br' - sOrgMay <- textInput D.span' "Super Organization (optional): " $ + sOrgMay <- D.span_ [MC.superOrg] $ textInput $ join $ Opt.get (SProxy :: _ "superOrganizationName") locOpt icMay <- MF.contactSignal $ Opt.get (SProxy :: _ "institutionContact") locOpt sustainOpt <- accumulateSustain $ getOpt (SProxy :: _ "iSustain_opt") locOpt @@ -228,7 +225,7 @@ accumulateLocation locOptMay = labelSig' D.h1' "Location" [MC.location] do (Opt.get (SProxy :: _ "institutionPolicies") locOpt) let _numPolicies = fst polsMayTup let polsMay = snd polsMayTup - versioning <- labelSig' D.span' "versioning? " [] $ checkBoxS $ + versioning <- D.span_ [MC.versioning] $ checkBoxS $ Opt.getWithDefault false (SProxy :: _ "versioning") locOpt newLoc <- pure $ execState (do get >>= Opt.maySetOptState (SProxy :: _ "institutionID_opt") (Just identOpt) @@ -249,72 +246,66 @@ accumulateLocation locOptMay = labelSig' D.h1' "Location" [MC.location] do where locOpt = fromMaybe Opt.empty locOptMay locWidg :: forall a. Maybe M.Location -> Widget HTML a - locWidg locMay = D.div' [ - D.h3' [D.text "Location preview:"] - , D.br' + locWidg locMay = D.div [MC.locPreview] [ + D.br' , foldMap (\loc -> fold $ MV.spacify $ MV.locElems loc) locMay ] accumulateSustain :: CtrlSignal HTML (Opt.Option InstitutionSustainabilityRowOpts) -accumulateSustain oldSust = - labelSig' D.h3' "Institution Sustainability:" [MC.sustainability] do - missionUrl_Ei <- urlInput D.span' "Mission Statement URL: " $ - Opt.getWithDefault (Left "") (SProxy :: _ "missionUrl_Ei") oldSust - let missionUrlMay = hush missionUrl_Ei - fundingUrl_Ei <- urlInput D.span' "Funding Statement URL: " $ - Opt.getWithDefault (Left "") (SProxy :: _ "fundingUrl_Ei") oldSust - let fundingUrlMay = hush fundingUrl_Ei - pure $ execState (do - get >>= Opt.maySetOptState (SProxy :: _ "missionUrl_Ei") - (Just missionUrl_Ei) - get >>= Opt.maySetOptState (SProxy :: _ "missionStatementURL") - missionUrlMay - get >>= Opt.maySetOptState (SProxy :: _ "fundingUrl_Ei") - (Just fundingUrl_Ei) - get >>= Opt.maySetOptState (SProxy :: _ "fundingStatementURL") - fundingUrlMay - ) oldSust +accumulateSustain oldSust = D.div_ [MC.sustainability] do + missionUrl_Ei <- D.span_ [MC.missionStatement] $ urlInput $ + Opt.getWithDefault (Left "") (SProxy :: _ "missionUrl_Ei") oldSust + let missionUrlMay = hush missionUrl_Ei + fundingUrl_Ei <- D.span_ [MC.fundingStatement] $ urlInput $ + Opt.getWithDefault (Left "") (SProxy :: _ "fundingUrl_Ei") oldSust + let fundingUrlMay = hush fundingUrl_Ei + pure $ execState (do + get >>= Opt.maySetOptState (SProxy :: _ "missionUrl_Ei") + (Just missionUrl_Ei) + get >>= Opt.maySetOptState (SProxy :: _ "missionStatementURL") + missionUrlMay + get >>= Opt.maySetOptState (SProxy :: _ "fundingUrl_Ei") + (Just fundingUrl_Ei) + get >>= Opt.maySetOptState (SProxy :: _ "fundingStatementURL") + fundingUrlMay + ) oldSust -accumulateIdent :: String -> CtrlSignal HTML (Opt.Option (M.BaseIdRows ())) -accumulateIdent idLabel oldId = - labelSig' D.h3' idLabel [MC.identifier] do - idMay <- textInput D.span' "Id: " $ - Opt.get (SProxy :: _ "id") oldId - idTypeMay <- labelSig' D.span' "Identifier Type" [] $ menuSignal $ - Opt.get (SProxy :: _ "idType") oldId - pure $ execState (do - get >>= Opt.maySetOptState (SProxy :: _ "id") idMay - get >>= Opt.maySetOptState (SProxy :: _ "idType") idTypeMay - ) oldId +accumulateIdent :: CtrlSignal HTML (Opt.Option (M.BaseIdRows ())) +accumulateIdent oldId = D.div_ [MC.identifier] do + idMay <- D.span_ [MC.id] $ textInput $ Opt.get (SProxy :: _ "id") oldId + idTypeMay <- D.span_ [MC.idType] $ menuSignal $ + Opt.get (SProxy :: _ "idType") oldId + pure $ execState (do + get >>= Opt.maySetOptState (SProxy :: _ "id") idMay + get >>= Opt.maySetOptState (SProxy :: _ "idType") idTypeMay + ) oldId accumulateRelatedIdent :: CtrlSignal HTML (MayOpt M.RelatedIdentifierRows) -accumulateRelatedIdent oldIdMay = - labelSig' D.h3' "Related Identifier: " [MC.relatedIdentifier] do - idMay <- textInput D.span' "Id: " $ - Opt.get (SProxy :: _ "id") oldId - idTypeMay <- labelSig' D.span' "Identifier Type" [] $ menuSignal $ - Opt.get (SProxy :: _ "idType") oldId - relTypeMay <- labelSig' D.span' "Relation Type" [] $ menuSignal $ - Opt.get (SProxy :: _ "relType") oldId - pure $ Just $ execState (do - get >>= Opt.maySetOptState (SProxy :: _ "id") idMay - get >>= Opt.maySetOptState (SProxy :: _ "idType") idTypeMay - get >>= Opt.maySetOptState (SProxy :: _ "relType") relTypeMay - ) oldId +accumulateRelatedIdent oldIdMay = D.div_ [MC.relatedId] do + idMay <- D.span_ [MC.id] $ textInput $ Opt.get (SProxy :: _ "id") oldId + idTypeMay <- D.span_ [MC.idType] $ menuSignal $ + Opt.get (SProxy :: _ "idType") oldId + relTypeMay <- D.span_ [MC.relType] $ menuSignal $ + Opt.get (SProxy :: _ "relType") oldId + pure $ Just $ execState (do + get >>= Opt.maySetOptState (SProxy :: _ "id") idMay + get >>= Opt.maySetOptState (SProxy :: _ "idType") idTypeMay + get >>= Opt.maySetOptState (SProxy :: _ "relType") relTypeMay + ) oldId where oldId = (fromMaybe Opt.empty oldIdMay) relIdSigArray :: CtrlSignal HTML (Tuple Int (Maybe PartialRelIds)) -relIdSigArray relIdsMay = - labelSig' D.h2' "Related Identifiers" [MC.relatedIdentifiers] $ +relIdSigArray relIdsMay = D.span_ [MC.relatedIdsHeader] do + D.div_ [MC.relatedIdList] $ nonEmptyArrayView accumulateRelatedIdent relIdsMay accumulateBasicMetaData :: CtrlSignal HTML (Opt.Option M.BasicMetadataRows) -accumulateBasicMetaData oldBMD = labelSig' D.h3' "Basic Metadata" [MC.basicMetaData] do - titleMay <- textInput D.span' "Title: " $ +accumulateBasicMetaData oldBMD = D.div_ [MC.basicMetadata] do + titleMay <- D.span_ [MC.title] $ textInput $ Opt.get (SProxy :: _ "title") oldBMD - creatorMay <- textInput D.span' "Creator: " $ + creatorMay <- D.span_ [MC.creator] $ textInput $ Opt.get (SProxy :: _ "creator") oldBMD - pubYearMay <- textInput D.span' "Publication Year: " $ + pubYearMay <- D.span_ [MC.pubyear] $ textInput $ Opt.get (SProxy :: _ "publicationYear") oldBMD pure $ execState (do get >>= Opt.maySetOptState (SProxy :: _ "title") titleMay @@ -323,42 +314,43 @@ accumulateBasicMetaData oldBMD = labelSig' D.h3' "Basic Metadata" [MC.basicMetaD ) oldBMD accumulateResType :: CtrlSignal HTML (Opt.Option M.ResourceTypeRows) -accumulateResType oldRT = labelSig' D.h3' "Resource Type" [MC.resourceType] do - descMay <- textInput D.span' "Description: " $ - join $ fromString <$> Opt.get (SProxy :: _ "description") oldRT - genTypMay <- labelSig' D.span' "General Type: " [] $ menuSignal $ +accumulateResType oldRT = D.div_ [MC.resourceType] do + genTypMay <- D.span_ [MC.resourceTypeGen] $ menuSignal $ Opt.get (SProxy :: _ "generalType") oldRT + descMay <- D.span_ [MC.resourceTypeDescr] $ textInput $ + join $ fromString <$> Opt.get (SProxy :: _ "description") oldRT pure $ execState (do get >>= Opt.maySetOptState (SProxy :: _ "description") (toString <$> descMay) get >>= Opt.maySetOptState (SProxy :: _ "generalType") genTypMay ) oldRT formatSignal :: CtrlSignal HTML (Maybe M.Format) -formatSignal formatMay = textInput D.h3' "Format: " formatMay +formatSignal formatMay = D.div_ [MC.format] do + tooltipS $ textInput formatMay formatSigArray :: CtrlSignal HTML (Tuple Int (Array M.Format)) -formatSigArray formats = labelSig (D.div' [ - D.h2' [D.text "Formats"], D.text tipText -]) [] $ arrayView formatSignal formats - where - tipText = "Technical format of the resource." <> - "Use file extension or MIME type where possible." +formatSigArray formats = D.div_ [MC.formatList] $ arrayView formatSignal formats accumulateResMdSource :: CtrlSignal HTML (Opt.Option ResourceMetadataSourceRowOpts) -accumulateResMdSource oldRMDS = - labelSig' D.h3' "Resource Metadata Source" [MC.resourceMDSource] do - url_Ei <- urlInput D.span' "URL: " $ - Opt.getWithDefault (Left "") (SProxy :: _ "url_Ei") oldRMDS - let urlMay = hush url_Ei - relTypMay <- labelSig' D.span' "Relation Type: " [] $ menuSignal $ - Opt.get (SProxy :: _ "relationType") oldRMDS - pure $ execState (do - get >>= Opt.maySetOptState (SProxy :: _ "url_Ei") - (Just url_Ei) - get >>= Opt.maySetOptState (SProxy :: _ "url") - urlMay - get >>= Opt.maySetOptState (SProxy :: _ "relationType") relTypMay - ) oldRMDS +accumulateResMdSource oldRMDS = D.div_ [MC.resourceMDSource] do + url_Ei <- D.span_ [MC.url] $ urlInput $ + Opt.getWithDefault (Left "") (SProxy :: _ "url_Ei") oldRMDS + let urlMay = hush url_Ei + relTypMay <- D.span_ [MC.relType] $ menuSignal $ + Opt.get (SProxy :: _ "relationType") oldRMDS + pure $ execState (do + get >>= Opt.maySetOptState (SProxy :: _ "url_Ei") + (Just url_Ei) + get >>= Opt.maySetOptState (SProxy :: _ "url") + urlMay + get >>= Opt.maySetOptState (SProxy :: _ "relationType") relTypMay + ) oldRMDS + +tooltip :: forall a. Widget HTML a +tooltip = D.div_ [MC.tooltip] empty + +tooltipS :: forall a. Signal HTML a -> Signal HTML a +tooltipS sigIn = D.div_ [MC.tooltip] sigIn -- TODO: PR to purescript-option getOpt ::