From 81ee14e95a0fcde692e772077723400feca54d72 Mon Sep 17 00:00:00 2001
From: Vincent Petry <pvince81@owncloud.com>
Date: Mon, 16 Mar 2020 17:27:25 +0100
Subject: [PATCH] Added iconUrl to oc-file element

---
 changelog/unreleased/678      |   7 +++++++
 src/assets/examples/lorem.png | Bin 0 -> 3286 bytes
 src/elements/OcFile.vue       |  26 ++++++++++++++++++++++++--
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 changelog/unreleased/678
 create mode 100644 src/assets/examples/lorem.png

diff --git a/changelog/unreleased/678 b/changelog/unreleased/678
new file mode 100644
index 000000000..076ceef79
--- /dev/null
+++ b/changelog/unreleased/678
@@ -0,0 +1,7 @@
+Enhancement: Added iconUrl to oc-file element
+
+The oc-file element now supports passing an arbitrary URL to be displayed as a file thumbnail.
+It will fall back to the icon name in case the thumbnail could not be loaded.
+
+https://github.com/owncloud/owncloud-design-system/pull/678
+
diff --git a/src/assets/examples/lorem.png b/src/assets/examples/lorem.png
new file mode 100644
index 0000000000000000000000000000000000000000..a02ced103a78c0ee54efd5ea785cdb1892232957
GIT binary patch
literal 3286
zcmW-k2UJs87li{35>XTd6%bKCV5CSHK&nWj7eNd`2u(WDMFY~M6F_<prKmI+L?Ib^
zlNv$~J&;6-0i;T#*Z=Zot(&*9-b>cK=j{FMlUSpNTC6PGED#8URYzOh7+fV!7W6cD
zH)Y(72A4Bl+Gaiw$oaOD#gHy~{u%^wE=EUP4etDUB{Rrqcw`%IT~~Jh?-=FJ47!Sp
zZ=BEY8$QUqOuVVaFT{;r7<b;4DYkFFm8_`w3obt)Z!YtOz*gvR0b@?!ep~puQklS_
z9m9FEY?)rYeRMR1$8Xh*8-_GxH6G0cIIi{tuc~Y-2d*Aw`B0rqU{HdJ{$j{P=&@)q
z!xgb7zZ1F3y=OHW59r;;6i2>@b5Lj!3|c~@P{cjS)lv)QdU|ooOG~LRsEZ7@gO*nG
z<^J6HUPqjphX*el;p9}r?`k7+_pTm}<W_*g;f8Gcwh(Vts15HA4gxjfIn@FJl=ipR
z@B~8a+qay7fq^@-iK^q}cFYP23LKX&e>5(Jvarl-j#)d+_hn}(zq-WC%)H^RazXV#
z(!|7Md~))!wRL~F9lorhq1eA0BOVbEA?Y)xUuf_?DmV8AcS01M{+#~jkGGGHfRt47
zqdZL_ncTBDQo^O;FY~RQ-ZdpWFg$!KJUl$T3hUI*o0*w;JCbd1auRt&@0Kuz@<~`X
ziskw*-gdB7SC6Ro-~6|yuMZ>9u#rL^B~vI4rluJju+CS1<_Ojyha)g+fB#zL=RadO
zVA@x&UUiY=%x8nm(P#vd5(ME#@V-F@9*@k@*3gL5*Vax74{l3OPuI^;=BlU-Q4kZ0
zPf581v9Po}!@|Ni)e?Djcz8G|Elu6n_>v<ov#?MIa&UOa;Pw2uZO>b&aT1APYI#}T
z)O1Yz+s0cdJ5FhPC}gP6An((suvm8COI%!pjbB5g#vrAJh6a}759j^-{JakLUeb2=
zHkYbvYBoKMevoGt7j>UJ;jF2t`8hXd42QSn>!g0!fs2fYvmTk&de25hQm0#^PnDro
z%pYdSpR@{D<)KlEu#<aV&gAUwE+{Ol^$3%a5~i8=bbFPuv%8y|nW=+7VA8R_e|rrM
z4UsBbud)m2-!B>}w{1sH%Aq6|7Z#>^@BXmwi087mw=eUcC@wB7?XKf*tZ!}>l$6Bn
zuQlE9^z`iN?k*=)d)r0T)z#V7>lVy>jOMi+{bB|;G5I*QWY*v>d*R;BO-N2oPS>VU
z$w*JOQifi}oku1nkxfmijg5`+N=pBrmY<NxWTRrZpTGai{5*4LU7gY_J`qnOK9ZVf
zZ;$kz?U)87w6fwAMSPh8)e^I)PU8B<@dMF$;Ma?V7m8tFVNc3z7%D3()wQ(p_I$hB
z)YR0nR6~v`cSlrIRCpAgx7ivO4L!25I;!Ft85_fomLfgl?%upP^~Sy=K~uo9>9Df>
z=k|{fLp3!92$0ss<|ZZCNL28dtR4PMgE%#4e~Xg5j1-a%1&?B`E1`@mEe+ssjz9DL
zrlS)R6P-Oh`IVIzr<_+&KY!YrBawvu{-ValoS7Nhmey9YreKw473K=WJgvmRk&*U~
z52BNdQ!p4!505(q1qE&G?d8ry{<GJ(xw*$H-LIK`wRpNXT%2D}08AzCGk0#SasLi*
zW_M?&c3c~s8n8wHHNF3?*O7~dN6bJd)#TrhEs_(>_eYR0=z;?b7N-1)p8ut!B(<-v
z51XH_zO}K@so*o$35u%67m+3HfCgTuqWbIIJKPu=w3jA;Q|bU8yqa!dI)Q_cQBpl>
z<(-MnBLqSyARvHtu=|I$K8tq<2&g;3%FCB8tL_L+Il{5!<>fI;FzA2g;?vX9pc69O
ztmdT{&@d_Y2^k^7oO2t(-}m<XMQd=5y)DhnuLlN<fH~617uneE+t~>SXvQ1)WoKpW
z?9S&Z1Ruz+tgOh$%6e}toAC<>tkdZ&qkVmEa&majGEpcLc?AW^pww-_t*xzys3=A@
zZf<l{)m_N>^XEf0A41Bis!W4jW!^RYG|<+*DJO>k0x?1&&u%bBzV7+T3tWdnp|b7;
zaW5D?%MIG%N>rxDeEL#Q&<^{YkidE(H#a%<D_1&(iyx=Q@A^JAGvkW8BHq&9p9q==
zVLWw;_^jdu3bmDS2~bd2N$LIP&wr<+rV@I3?8(*MkT2FvIcaGeTgxOnK6zo`Xv;d(
zMRxWFFc_ohH>-9k)vD$mgi58x^C(;jotm=w&@{?b%`Yb>_t)vuA_u^EMvEU9{5MBT
zV-pjFWo6Ub+SHYmmA!m@g;i9tNjRtDeL<{}pzM85PYHmDx4m<d)F+mf32ZZ8xll^O
zK!Iza(b3GYv9WC(9VbX>4re~b_nMiRS=6CcJnt^H#j^W$?0*X_tf(;2R9EkOT=Y<f
zFM`o3f(=_*YJfl>bonCc{nkG*8tdxn+6M<WGOc}I`1LE<yc7`(c7+9BW6;l#utxX+
z!xuE$Bq?S;jEamTqzW5$0pi_`NCJ?jPc?^QD=SBJQ4b!3%YN`ip&VPISOX8%@sRw&
zLJ?P>b+^e%*3b;=;1f*J>GaO7u1`2zDo7a7vgg02)X-@3z|yAj*0`Pa?b~8v|3O)h
zm2PU^#(Y-E3LfO@<^sJ8N$vz575_9@*HIfuPT>02Cdu0%buL)x?(FOg3=DW7@#AE2
zJg5ec+)T}U4$eGR$@h-2?!@Hei7P8AHZfRRJG<TAtryJd{iFtdh?DAkC018g&s|qc
zYY5mDarO#5{c@@+T{NCscCnJ@Nu?VX$he*?g;c;wIroWtdw0ISL`}c8*-KCV`lVxO
zN%?T2F)f_A1qeM3_Rp<bZD@QKLn=WXfw%%#g1!iY4nLCxF9ai8<Z^LwF(^h#N($`h
zQ@-Tn<ol|Q9&T>8R8?<;N;K|#vMw$a&(6+9$1~K3q<6J6GxPd|zFZoW3O?9TyAJ1Z
zc6PSerPDaiod$g{t9dRsRAk6}Q&I69zz#50jn{OTMmFOi&C|u@_Jip21+}&B&aeyp
z?FtNDfW@ZtzQ6kzi7ZKD`}pxA;LCc)HP3<Z@t9^Ch|PG}(-$vZBxPn2mPt5L{i}Zn
z1cJJT2619S_r(ht;B$<G5tNVl**U-i%{M$QOf8}!B9iZWclP&(Mn|JcN=ldpBqSt?
zii)B^teFohKu(9hMx$8*gMu!?B;Cd(K@EgbW3gCiFgpx5%g8G#ej+-9Zl+~qh?>0$
z^#mJ02os4!?=>e|WGFZf?SXO0h;KZ4HR9aqR%=A9uRaX=Yi&*9n`K>LeDhvL$e6aS
z?jDlHI$^%NvXYK->c;>ufl(ks94XYFtt5Qy+BJv3!1{PJI>p=D8{Fv6Rh7ug%X4sZ
z`w}=Ec{QKphRL{NnWBdgOV-iRp%a92(?EN$fFzDiPTe3;yCctD?FtKHBn=Mo&-Y{s
z%+Ag_SXgAaxw)mmpm8V~IO$KNwR(X_w&&|J?exR#9~p_NN7c#!TgwK_U_zh`7U=zd
zfiZ`p6{ya^$|`4Y-U4eMdvNflUpy-zCdTNYJFP37{(HI=M3j!TwKWM$Y~Tmm(U<9|
zhWE-tF)(P2V=uP`739Xxe@#ljsPZsJ*=$+?%rAi}6=UGDrlw{WrOp@WTSOs~K_O3h
zv5OmIN=E|HNJ~qnaRkrxaG_So#TKeSmOvUMh*HMA*_y<}3m}3|5ahfRE1dJ8tSl)%
z|5n@*5)M~4Fkl6sE6U4jWvry4FR`<W=eRR0FE4+Y;0+22a;`AfOyo82_Lkz~<0FIQ
z;Y`r9u&@XXmS3RJG(0@Mwo^f;<2Cc>WGdBz7<=uemX;P4hXYK<zCHGFJi_sO|0I6l
zIDuJTh@FXviGzdV!^ks+&dyGoql4Y$$*RN(*Req&v6)=sqhn||Pp5TfDZXS$&};>K
zJ{guqMn=FMzFIY~+y_2VJ@|bJ0BD(9lUiLZ52>xK1sDM)F*Y{V*3-)a$_Ef<lAa)u
z)`tvL!C;b}vr^jWINOoH<?ikdH#L3y`0)d9VsMy+P5+#bqgOoFudi=!7Zn%Bg5Vq&
z9Be7d4Mr24Z}Ibof${f_RedLrhl`5~pRzJf9<g(+>G(}}_^BU(e^`Nw`9T;$^xw(E
zCf?hF8X6kf+S-D6n*aX#6dZxL#L3wib5X!=gQ%t8H3bnA6cn>=<N?;9MS)HLjra_O
z*Ig8OshFL0*OO|=ia#~`^+3<X)in->`$J)K*Vqocy?#6!G82$_H2YoE;MjXAw=jVE
b`k0ZVJmrA6z~2M@s6ccy9;$zZ*@XQMVcnE}

literal 0
HcmV?d00001

diff --git a/src/elements/OcFile.vue b/src/elements/OcFile.vue
index 334a30dc2..44ac5aa00 100644
--- a/src/elements/OcFile.vue
+++ b/src/elements/OcFile.vue
@@ -1,6 +1,6 @@
 <template>
   <span class="oc-file" @click="onClick" role="button">
-    <oc-icon :name="icon" variation="file-type" class="uk-position-center-left" />
+    <oc-icon :name="icon" :url="iconUrl" variation="file-type" class="uk-position-center-left" />
     <span class="oc-file-name" v-text="name" /><span v-if="extension" class="oc-file-extension"
       >.{{ extension }}</span
     >
@@ -16,13 +16,24 @@ export default {
   release: "1.0.0",
   props: {
     /**
-     * The icon to be used.
+     * The icon name to be used.
      */
     icon: {
       type: String,
       required: false,
       default: "folder",
     },
+    /**
+     * Icon URL.
+     *
+     * Has higher priority than icon name.
+     * In case of failure it will fall back to the icon name if set.
+     */
+    iconUrl: {
+      type: String,
+      required: false
+    },
+
     /**
      * The name of a file.
      * Please note that the name shall not hold the extension
@@ -78,6 +89,17 @@ export default {
         <li>
         </li>
       </ul>
+      <h3 class="uk-heading-divider">
+        Icon URL examples
+      </h3>
+      <ul class="uk-list">
+        <li>
+          <oc-file icon="image" iconUrl="examples/lorem.png" name="file with preview" extension="jpg" />
+        </li>
+        <li>
+          <oc-file icon="image" iconUrl="examples/notfound.png" name="file with preview that failed to load" extension="jpg" />
+        </li>
+      </ul>
       <h3 class="uk-heading-divider">
         Interactions
       </h3>