From 5c8f2fe036ed8c29c97c6b727e7a77580f46c21d Mon Sep 17 00:00:00 2001 From: Tobias Reich Date: Fri, 16 Jan 2015 19:52:34 +0100 Subject: [PATCH] New dialogs --- dist/main.css | Bin 45308 -> 46833 bytes dist/main.js | Bin 175352 -> 175821 bytes src/scripts/album.js | 117 ++++++++++++++++++++++++++------------- src/styles/_message.scss | 80 +++++++++++++++++++++++++- 4 files changed, 157 insertions(+), 40 deletions(-) diff --git a/dist/main.css b/dist/main.css index e2ed91e99072e00a36a856fe41054e9c9f3e82b0..f84690973fe1d54475e7673925bd652b029b279d 100644 GIT binary patch delta 1026 zcmah|F>ljA6jsARC5njJiZ-f>)c~qdY}s)!?Rn@xVdD=l0O#}BKIP&w_7zgBk`)vX zA}6tAU}IuH>c)SlkeHExAHdKZRh*remL@H_<#hMn``-7y_x=7^Irvri^trzf>lCMH z7DLY?QJ}eubJhlyA(WYwz5V{Hb6ppv1l?mEq>7G0Mi4HefuUGN+)>P%amRT|JRSlB zDOxoRx=w)|5a#3)NZ-S_=neY_N)Fy$Hw3H8dVWe;mIU8byz!7CKHm}Wj@kOPW+ zE?!5M#f!nB`1WR69KM|w@2^~#E1MlgDP~&Kq6p>FBccKhJ;2jk{(7a zmvxTSc07{C6z%|*GSnKeG;K*Z#3TqgFm3U@UlaQ;t5cS^fA{KxTk0gDCm|G_AQlmn zNjNPf&*bod%MuSKl7GkX38kRkY;IV0ZaX7!KvSX$)2xe`-lkZxr^VOm@{}qb_2$Hf z;&#cN&)+I)Lkz0w=2?vt^8f{5>^(nX?n2ZG61E+AKzy8CYWy>xQ<6$9;z#qkIPBf% zP7wOI3;-fdp5V!-N#Md&qmduo`agq{rSe|7#b8+s5#c*PUq4Ha;VzXsp&0U*>&4=Y z?_HcBieVyk;^ALW)}#UQEGsv`uucsa6YP)&sN(U~V%Jt3pG7>E9Rt%k1+5si&T)rl o@c;k- delta 23 fcmezPmg&z!rVYC$P443s+5B}uZhd%lMt!PXiOzNEhWY=oKLtp0H zd(Qd3^PPL|nR`E0efLY%N>6Qr!W*I|S|S#aFyR>9h-0yqF~%zSf!Z*H3sbcp?4zdn zP!gyaXk2aurBK=PD}a)}`{GHu=|0xwZ>Ek%Ly8zKe002`ZhyGT@c6K32#0-}zj@}; zzgz`<;O7v8^WB5zDedZD_$5klYtgUx*W#PBR6czpQCM4kgQ1@E4K_pz4X$j`LWNgW zdy}-1l7D~wNecR8{R{dX+vuR*<&Ecq^;7x#8=G{sd8d_EB-_Cr_Qq{PLKgCNw{l5H zR0>^pEvOG%b}z=muHf5or55Wufb(tQ zS-3e&Cf|cj(l!lK;1#b=LlHt)=Eysj;cOKbwW3@k&54M7{~;U!O!mz{4>f%=@H8ND z8!-*!?HSk)9+{qjvjk>AI-_bH!j?QVVg(D{6DCGghqaO!)kT_ub=8zK6T1d4h@PYy zR5!8%h&irh4MTE_93C}#Pb+MXqeXelE(HOw>;X%1RQ|7AEt zP9o+pa%m1a$hSGBy1Imk9E>qXLtd04KOu&#={G#~*se12?hGVJ%{+8Q(GahinUS1J zWez!po26Z}lyo+VT$C|sZ*6U4>M9&~ZmWAobY+f9ZogP(_jH7b67bHkkc}UpsooPN zeN@V3HB)t6Ibs^F8%Yyw5qelobfYw;qtTtHmc>XjBI%T=W(Jrkhg*2WE(m5f@rD8sy92U?=(ywkcx|0zL-075^ z?h9(N9%e^L?Gm)?QL2u|EEB7`N>7hA@$iHmD1=+9hWRFLC2n?M$Ct)?i9V* zG3@B9KlX-3Z>wA*>0X9tC}yYqk!&V+rkR6;t!G#<6{B}gXES&Pu_5f_=%(Z?xmi5M zPh_w@o^XRneY`)bItF{xf4!VIWF;JbXyY|vn2$)iK=ScCtuuZNUbtB5W~Ht7#Ujfd z@dk9&Qx98e&X75Ky94gEh#&=3g+w{!9FU3=wjF9^@zfo1l)ITY%b@Eta-69?30nLHxhm&laGeax1rZ zYXRDU)XhPnSa}^jKLJ(b>)&CmVp436$MY){2Z~qzfa*u8|M?vX6Xf=v&`?~v2S+Z@ P>`j~bw0P}2qa^==vb_UN-ST_gm_3-$3y2Hp{A`h z0n}uknB5J0b@SkF0DSq*&_Q|`*q5qb#`nhqyp*n9-rvylSUQC~F)g9kp1LhBzV_h* zp{kzwIRNSM!0=lX_R28-Jcamirq1}+%)6AToSg5gUYmWJp^@Y~8=yqP3(J(Kdg#i5 z1ZCpOXK#gR(Py{5pl4~Ri=MMfy}rMz{P)r_^_Fk%7J1oru!p@d8_9-cc>iA2b$>~G zHFd{=7C&Skz<9)!-JF9>^9Z(8zWn9g>y-Mv1c3}qK@Yik4jv~zOu{a5b33ysAQ>w8paRV#Sb-MuMhByjcPhYbkwy(v zk~K41ERdxRrkQ+KffP9+Ft3u-L1rtts4&~f=mi@4RAgF6V<*#1PEJ90VRiC;r7Jt= zn1kHB7^8Tuku{NAK(4DDM`G;MDJ7!%Y4V#cwq(1QHH}$kl0xMk!PgslrN|0-MXD+z8T>{rRrs(G|`5JMvxR z*^8iT1oC9>`mP0b74p8I54dmL<9t+M29g`1lJ6&&ZTy<_f{*a>>LA$qw}5g~Ssy3- z3B<{_VP^0Z*7e3r`X1eIZBrZTV=Zi<1TF5c>5qy)&tuprB>U}+QaLG;xnDyP`5bnT z_Gt){GXm4PZBJ(}oz(-2&_)i=!qbPiwdG*t6`fhbvWuSVp%We#TbWR-j~D+ZFK_5{ zNl(Y5h*JA%9u}V?@Ba?hHV02jor+RkXxLH9{sCJyHJ1#F>MWZ$r+EflV+Yl@r*`HZ S^qe3!9OfznYvV4HPW%J&1;!l! diff --git a/src/scripts/album.js b/src/scripts/album.js index 3b28656..7760237 100644 --- a/src/scripts/album.js +++ b/src/scripts/album.js @@ -230,7 +230,9 @@ album.delete = function(albumIDs) { album.setTitle = function(albumIDs) { var oldTitle = '', - input; + input = '', + msg = '', + action; if (!albumIDs) return false; if (albumIDs instanceof Array===false) albumIDs = [albumIDs]; @@ -292,8 +294,8 @@ album.setTitle = function(albumIDs) { input = ""; - if (albumIDs.length===1) msg = "

Enter a new title for this album: " + msg + "

"; - else msg = "

Enter a title for all " + albumIDs.length + " selected albums: " + msg +"

"; + if (albumIDs.length===1) msg = "

Enter a new title for this album: " + input + "

"; + else msg = "

Enter a title for all " + albumIDs.length + " selected albums: " + input +"

"; basicModal.show({ body: msg, @@ -313,37 +315,44 @@ album.setTitle = function(albumIDs) { album.setDescription = function(photoID) { - var oldDescription = album.json.description.replace("'", '''), - description, - params, - buttons; + var oldDescription = album.json.description.replace("'", '''); - buttons = [ - ['Set Description', function() { + action = function(data) { - // Get input - description = $('.message input.text').val(); + var params; - // Remove html from input - description = lychee.removeHTML(description); + basicModal.close(); - if (visible.album()) { - album.json.description = description; - view.album.description(); + // Remove html from input + data.description = lychee.removeHTML(data.description); + + if (visible.album()) { + album.json.description = data.description; + view.album.description(); + } + + params = 'setAlbumDescription&albumID=' + photoID + '&description=' + escape(encodeURI(data.description)); + lychee.api(params, function(data) { + + if (data!==true) lychee.error(null, params, data); + + }); + + } + + basicModal.show({ + body: "

Please enter a description for this album:

", + buttons: { + action: { + title: 'Set Description', + fn: action + }, + cancel: { + title: 'Cancel', + fn: basicModal.close } - - params = 'setAlbumDescription&albumID=' + photoID + '&description=' + escape(encodeURI(description)); - lychee.api(params, function(data) { - - if (data!==true) lychee.error(null, params, data); - - }); - - }], - ['Cancel', function() {}] - ]; - - modal.show('Set Description', "Please enter a description for this album: ", buttons); + } + }); } @@ -356,14 +365,44 @@ album.setPublic = function(albumID, e) { albums.refresh(); - if (!visible.message()&&album.json.public==0) { + if (!basicModal.visible()&&album.json.public==0) { - modal.show('Share Album', "This album will be shared with the following properties:

Visible

Listed to visitors of your Lychee.

Downloadable

Visitors of your Lychee can download this album.

Password protected

Only accessible with a valid password.

", [['Share Album', function() { album.setPublic(album.getID(), e) }], ['Cancel', function() {}]], -170); + var msg = '', + action; - $('.message .choice input[name="password"]').on('change', function() { + action = function() { - if ($(this).prop('checked')===true) $('.message .choice input.text').show(); - else $('.message .choice input.text').hide(); + basicModal.close(); + album.setPublic(album.getID(), e); + + }; + + msg = "

This album will be shared with the following properties:

"; + + msg += "

Listed to visitors of your Lychee.

"; + msg += "

Visitors of your Lychee can download this album.

"; + msg += "

Only accessible with a valid password.

"; + + msg += "
" + + basicModal.show({ + body: msg, + buttons: { + action: { + title: 'Share Album', + fn: action + }, + cancel: { + title: 'Cancel', + fn: basicModal.close + } + } + }); + + $('.basicModal .choice input[name="password"]').on('change', function() { + + if ($(this).prop('checked')===true) $('.basicModal .choice input[data-name="password"]').show(); + else $('.basicModal .choice input[data-name="password"]').hide(); }); @@ -371,18 +410,18 @@ album.setPublic = function(albumID, e) { } - if (visible.message()) { + if (basicModal.visible()) { - if ($('.message .choice input[name="password"]:checked').val()==='password') { - password = md5($('.message input.text').val()); + if ($('.basicModal .choice input[name="password"]:checked').length===1) { + password = md5($('.basicModal .choice input[name="password"]').val()); album.json.password = 1; } else { password = ''; album.json.password = 0; } - if ($('.message .choice input[name="listed"]:checked').val()==='listed') listed = true; - if ($('.message .choice input[name="downloadable"]:checked').val()==='downloadable') downloadable = true; + if ($('.basicModal .choice input[name="listed"]:checked').length===1) listed = true; + if ($('.basicModal .choice input[name="downloadable"]:checked').length===1) downloadable = true; } diff --git a/src/styles/_message.scss b/src/styles/_message.scss index 26076d7..958d7df 100644 --- a/src/styles/_message.scss +++ b/src/styles/_message.scss @@ -33,8 +33,11 @@ text-decoration: none; border-bottom: 1px dashed #888; } + + &.less { padding-bottom: 30px; } } + /* Buttons ------------------------------------------------*/ .basicModal__button { padding: 13px 0 15px; background: black(.02); @@ -57,7 +60,7 @@ } - /* Input ------------------------------------------------*/ + /* Inputs ------------------------------------------------*/ input.text { width: calc(100% - 4px); padding: 9px 2px; @@ -74,6 +77,81 @@ &:focus { border-bottom-color: $colorBlue; } } + /* Radio Buttons ------------------------------------------------*/ + .choice { + padding: 0 30px 15px; + width: calc(100% - 60px); + color: #fff; + + &:last-child { padding-bottom: 40px; } + + label { + float: left; + color: white(1); + font-size: 14px; + font-weight: 700; + text-shadow: $shadow; + } + + label input { + position: absolute; + margin: 0; + opacity: 0; + } + + label .checkbox { + float: left; + display: block; + width: 16px; + height: 16px; + background: black(.5); + border-radius: 3px; + box-shadow: 0 0 0 1px black(.7); + + .iconic { + box-sizing: border-box; + fill: $colorBlue; + padding: 2px; + opacity: 0; + transform: scale(0); + transition: opacity .2s $timing, transform .2s $timing; + } + } + + /* Checked */ + label input:checked ~ .checkbox { + background: black(.5); + .iconic { + opacity: 1; + transform: scale(1); + } + } + + /* Active */ + label input:active ~ .checkbox { + background: black(.3); + .iconic { opacity: .8; } + } + + label .label { margin: 0 0 0 18px; } + + p { + clear: both; + padding: 4px 0 0 35px; + margin: 0; + width: calc(100% - 35px); + color: white(.6); + font-size: 13px; + } + + input.text { + display: none; + margin-top: 5px; + margin-left: 35px; + width: calc(100% - 39px); + } + } + } .message_overlay {