From f3dd4b72a03d58aa57ff509a2417688346d69050 Mon Sep 17 00:00:00 2001 From: David Beniamine <david.beniamine@tetras-libre.fr> Date: Fri, 4 Feb 2022 18:44:24 +0100 Subject: [PATCH] WIP : add a mosaic of tags and documents --- capsule-prototype/create.zip | Bin 58196 -> 58328 bytes .../css/images/icn-menu-mosaic.png | Bin 0 -> 365 bytes capsule-prototype/css/online-theme.css | 61 +++++++++++++++++- capsule-prototype/index.html | 12 ++++ capsule-prototype/js/online-script.js | 52 ++++++++++++++- 5 files changed, 121 insertions(+), 4 deletions(-) create mode 100644 capsule-prototype/css/images/icn-menu-mosaic.png diff --git a/capsule-prototype/create.zip b/capsule-prototype/create.zip index a2a703ea770860eb81d342239f65d7a857384d5a..419e3d5aa51ceee98c96258c0207f7532b3a1482 100644 GIT binary patch delta 3468 zcmca|jQPfK<_+uD)iW?Ka4<0RyM!#6;c~T`hk@au4FdxggA7AvUP@|(UPei7PG|@x z1M`BYzlj_F{z)vY;AUWCdBM!Uz@o^&z_2$uGyk!L(BC<KxcbCqoMA}Tc7Hx=Td%M6 z$+G0hFBd#Mb}nHfM@HwinI4PUmb|GD`+a|V#fxdOw>uy6Z#?=q^lE+b#)u^|&hbx= z|J`i=Zruf!HpX4Q|Gj+XEpMrN{qOa_`=$Eq(_ef)-+WuT<ib67=00Ud)l@;gnD4L5 z*)4@NAIHa*o6X*u?w)(>_`3(Qf3MlV7n1&avnsdk?R{V7-ph06uHkF;D3MO!J9qxP zZ~onB3H!J2zRcNq#KSaiqP?)y+j^^7F;AhB)8-sM;yADJmDMC0@9@%p9eX&RHJy0( z{b1?qGm%_H&5H}0j=L@pJipt;LM2u`V(CPG7FqWeaVg%(`~NMvD8X7{GtrNKVG)1- z(c*Qh#mY3xfAlEVJ2CyA6)g1g;GPUye+S#`mlC~B>ZI+_NN}sQeEBQI%l6VG{{0K; zT?Fn4$?<(KP`KM+x%V9Z+H3k6O9Xi*2ZT@5+rcdI@Oe?->d=Xuk1Z6|PT<w7IeTIQ zE2}R5ajxA9j?d{>RoQFXdc;U@ts)!m(>*MPJR82VC^QINc)?jHv_xT&>b)hd3s*L) z&FR_YxBD$u0r#Wb$~K{*xj&L6PgiFPCOL5gEUW)>de>BS7g=_$Sib}3Z|#awX3WiC z`K4&1+|<f)tnh^4d}Zg!Vpm$4n-}orNH3YCwr*QskmQ7Wx|}!7Ke5PKt<$`D_onNI zmmK|<BNknW+<i`YUQ%#I@6F4{o*b?AC|JLH`sz;_F#!=f`s>wN&Tn<=Pg;My(D(Pf zX)Ifvte!<os_)t`cl(qn9~K;(XD+IkY4Sbdzz?(51CI}yeRPlTnBRI^MDWm&h6~n< zi!KFKEJ{qc=c9DJ_~>7~OoeSJBHamblc!BhQF}hkB~tRc&cl1#mU*i+H#_&=Z{2Kt zPOejZd-es@&q7Zt-X~pT*w0_A@Vxd;m4ox5dD~6>HT#r)?THPp_i1)DI#VTYWFHvW z#-yop>7&ZFx)Q<T4Hw#&p66B+yb>((sy!6d|E-<3-_J91uGfw8-7C9)h6wkkWqwfh zcfE7H=b%xb@-b(fg$zs1Mk-BKTsd<`?#|$X%&>{Gy1$<6C^((syCGOG=JRy-$(KWY zoBn)|<@s#L`%E#odi^Rkt$O~utK<qN^klL)iaT_2ESRx>_J6%edt<}>mO3#cZ-`8M zpPwK3>378GWk2q|^+{c|Z(ZrLw^1v(LmZC$=`8rT?pj#t^058g2R9_<bIHF?D$u$u zH7AniQ~4z`A9KOCfelBO=%y)OarLWJZ035d%%BtXw)>3ck3gYHE{TgBr{=$_pY*WS z=+Dpn0UM1MPduNN8_aU(4F7?9KjS(7haTrN^PeazG$}`}Jf>LWnxs+vy~|Uy46Ucd z3B0(hxu~w(e{N3#!-MKyYcy9ER2UtZDCMEyA$Y|vPBuKHH%UzWqp6Pacf)TTR_lT! ztiM(*Z#Vm)v4(9!v{H*zl(yFP1@qaHb?doe?Nx(TG0zj4r}^gb3FXGi#`ndd6g7|V z^*(Z0$Nb%vPvYBULy?mPOAHnT%cy*q5jM+NCwk__^tHFn)*oVLn!fV=gAm^NT^0vE zM?Vu@e2B;U(A7KtkIW0sKY90S`0IX&O@WiAZ##SJ^Kx6U$uF$=ztuUmnsK(j&G$H@ z_;7yW@A|*SHx}{r?>ZNr!F#XoQ?crbLp44r*DE^?8Y>$tb3R-cxiad|;ycsZ3?>~q zE4B4;#+sNNkCRMyPT8$%81b@pF3Z8a$2mK>!o>Z$4l<>kl`Uj{=&�punOh!3P^Q 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 SP3C&+z_p8wfq~;L$YKC<F^vTP delta 3308 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 diff --git a/capsule-prototype/css/images/icn-menu-mosaic.png b/capsule-prototype/css/images/icn-menu-mosaic.png new file mode 100644 index 0000000000000000000000000000000000000000..8b272e3abf67c16f31c173f1e1683fe1bc423108 GIT binary patch literal 365 zcmeAS@N?(olHy`uVBq!ia0y~yU{C>J4mJh`hKCF@W-u@?u%tWsIx;Y9?C1WI$jZRL zppfhl<jcTNrN+R}(89p*i-Ccm;RORjsR0ASs{{rHs~HRo;stYd1==t$Ft8<gySp%e z!B6Mi^$ZLQoCO|{#S9D#31Ivo+vz+514F*2i(^Q{;kVZu`5F{>TrOU#Fz5@*KX&$5 zZ;nT)Gmqo{=xNh@oD^m-{*ZjnJ*jKv)Fs<@RZkUp>GsahsCsrlkcRm6s;rW2H`C<& z+Z;}_-kKb>_hs(a$BFwV-gGT^Yt5o`;rWNZ4`h`t-2PF=Fyk%DrS@2!*68#?1_lPz z64!{5l*E!$tK_28#FA77BLgENT>~Rs1CtO#11lqQD??*#0|P4qgNQAAPNHbY%}>cp WtHiBA^Ce3u$m^c2elF{r5}E*eKXg(6 literal 0 HcmV?d00001 diff --git a/capsule-prototype/css/online-theme.css b/capsule-prototype/css/online-theme.css index 8c0dbb6..64ee7c2 100644 --- a/capsule-prototype/css/online-theme.css +++ b/capsule-prototype/css/online-theme.css @@ -19,7 +19,7 @@ html, body { user-select: none; } -#popupSpace, #popupAlertSpace, #popupAddLinkSpace, #popupSettingsSpace { +#popupSpace, #popupAlertSpace, #popupAddLinkSpace, #popupSettingsSpace, #popupMosaicSpace { width: 100%; height: 100%; background: rgba(0,0,0,.25); @@ -271,7 +271,7 @@ html, body { } -#popupAddLinkMessage { +#popupAddLinkMessage, #popupMosaicMessage { font-weight: 100; color: rgba(255,255,255,.75); text-align: center; @@ -301,7 +301,44 @@ html, body { margin: 2vh 0 1.5vh 0; } +#popupMosaic { + background: #243538; + box-shadow: 0 1px 3px rgba(0,0,0,.2) inset; + border: 0; + border-radius: 3px; + color: rgba(255,255,255,.85); + width: 30vw; + display: inline-block; + + font-weight: 200; + font-size: 0.9em; + cursor: pointer; + padding-bottom: 0; + + line-height: 1.2em; + padding: 1.0em 1vw; + + margin: 2vh 0 1.5vh 0; +} +#popupMosaicMosaic { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); + grid-auto-rows: 150px; +} + +.mosaic_item img { + /* To correctly align image, regardless of content height: */ + vertical-align: top; + display: inline-block; + /* To horizontally center images and caption */ + text-align: center; + /* The width of the container also implies margin around the images. */ + width: 100px; +} +.mosaic_item .caption { + display:block; +} @@ -395,9 +432,26 @@ html, body { right: 25.5vw; z-index: 110; } -#closePopupEdit:hover { + +#closePopupMosaic { + width: 40px; + height: 40px; + font-weight: 200; + color: rgba(255,255,255,.25); + font-size: 30px; + text-align: center; + line-height: 40px; + cursor: pointer; + border-radius: 3px; + position: fixed; + top: 2vh; + right: 34vw; + z-index: 110; +} +#closePopupEdit:hover, #closePopupMosaic:hover { color: rgba(255,255,255,.75); } + .popupRightItem { width: 25vw; display: inline-block; @@ -766,6 +820,7 @@ html, body { #left_menu_item_icn_highlight { background:url("images/icn-menu-highlight.png"); } #left_menu_item_icn_search { background:url("images/icn-menu-search.png"); } #left_menu_item_icn_keywords { background:url("images/icn-menu-keywords.png"); } +#left_menu_item_icn_mosaic { background:url("images/icn-menu-mosaic.png"); } #left_menu_item_icn_preview { background:url("images/icn-menu-preview.png"); } #left_menu_item_icn_settings { background:url("images/icn-menu-settings.png"); } diff --git a/capsule-prototype/index.html b/capsule-prototype/index.html index d1fd20f..653fe15 100644 --- a/capsule-prototype/index.html +++ b/capsule-prototype/index.html @@ -112,6 +112,13 @@ </div> </div> </div> + <div id="popupMosaicSpace"> + <div id="popupMosaic"> + <div id="popupMosaicMessage">Notes and documents</div> + <div id="closePopupMosaic">✕</div> + <div id="popupMosaicMosaic"></div> + </div> + </div> <div id="popupSettingsSpace"> <table id="popupSettings"> <tr> @@ -231,6 +238,11 @@ <div class="left_menu_item_title">Add File</div> <div class="left_menu_item_value"></div> </div> + <div class="left_menu_item dropable" id="left_menu_item_open_mosaic" title="Mosaic"> + <div class="left_menu_item_icn" id="left_menu_item_icn_mosaic"></div> + <div class="left_menu_item_title">Open Mosaic</div> + <div class="left_menu_item_value"></div> + </div> </tr></td> </table> <video id="video" class="video-js vjs-default-skin vjs-big-play-centered"> diff --git a/capsule-prototype/js/online-script.js b/capsule-prototype/js/online-script.js index 34f3d2b..09ab90f 100644 --- a/capsule-prototype/js/online-script.js +++ b/capsule-prototype/js/online-script.js @@ -356,6 +356,17 @@ function setEditionControls() { addLink(myLink); } }); + + $("#left_menu_item_open_mosaic").click(function(event){ + event.stopPropagation(); + rekall.timeline.pause(); + openMosaic(); + }); + + $("#closePopupMosaic").click(function(event){ + event.stopPropagation(); + closeMosaic(); + }); $("#popupEdit").click(function(event){ @@ -802,6 +813,45 @@ function closeEdit() { $("#popupSpace").hide(); $("#popupEdit").hide(); } + +function openMosaic() { + function getMosaicItemHtml(tagOrDoc) { + let path = Utils.getPreviewPath(tagOrDoc); + let name = tagOrDoc.getMetadata("Rekall->Name"); + let type = tagOrDoc.getMetadata("Rekall->Type"); + let color = tagOrDoc.color; + console.log(name); + console.log(type); + console.log(color); + console.log(path); + if (typeof path === 'undefined') { + if (type =='rekall/link') { + url = "../shared/css/images/img-link.png"; + } else { + url = "../shared/css/images/img-note.png"; + } + } else { + url = path; + } + return '<div class="mosaic_item style="background:'+color+'"><img src="'+url+'"></img><span class="caption">'+name+'</span></div>'; + return '<div class="mosaic_item"><img src="../shared/css/images/img-'+type+'.png"></img><span class="caption">'+text+'</span></div>'; + } + + let html =''; + $("#popupMosaicSpace").show(); + // TODO is there a better way to iterate over tags or documents ? + for ( [k, v] of Object.entries(rekall.sortings.colors.categories)) { + for (let i in v.tags){ + html += getMosaicItemHtml(v.tags[i]); + } + } + console.log(html); + $('#popupMosaicMosaic').html(html); +} + +function closeMosaic() { + $("#popupMosaicSpace").hide(); +} function fillPopupEdit(tag) { @@ -1190,4 +1240,4 @@ $(window).resize(function(e) { } }); $(window).trigger("resize"); - \ No newline at end of file + -- GitLab