diff --git a/capsule-prototype/css/popup.css b/capsule-prototype/css/popup.css index f669cf37fbdaf14e51e6052fe305b19eb2e2aade..b8baa3e33acc276e6cfe75feb0fc1746987a091e 100644 --- a/capsule-prototype/css/popup.css +++ b/capsule-prototype/css/popup.css @@ -197,7 +197,7 @@ background: var(--rk-greyblue); text-align: center; } -.popupAlertButton, .popupAddLinkButton, .popupSettingsButton, #paste_modal button { +.popupAlertButton, .popupAddLinkButton, .popupSettingsButton { width: 9vw; font-weight: 400; @@ -713,29 +713,69 @@ color: rgba(255,255,255,.75); /*#FFF; */ } #paste_modal { - display: flex; - text-align: center; align-items: center; - flex-direction: column; position: absolute; margin: 10%; width: 60%; min-width: 400px; height: 60%; min-height: 300px; - background-color: var(--rk-greyblue); z-index: 50; + padding: 10px; + + border-radius: 2px; + box-shadow: 0 5px 25px #000; + background-color: var(--rk-greyblue); + + font-weight: 100; + color: rgba(255,255,255,.75); + text-align: center; + font-size: 1em; + display: none; } -#paste_modal div { - width: 80%; +#paste_modal h1 { + margin: 5px; + padding: 5px; + font-weight: 100; + color: rgba(255,255,255,.75); + font-size: 15px; +} + +#paste_modal button { + color: #fff; + background: rgba(255,255,255,.15); + box-shadow: 0 1px 3px rgba(0,0,0,.1); + border-radius: 3px; + cursor: pointer; + padding: 20px; + border: 0; + margin: 20px; + text-transform: uppercase; +} + +#paste_modal button:hover { + background: rgba(255,255,255,.05); + color: #fff +} + +#paste_modal div.content { + max-width: 90%; + max-height: 90%; height: 80%; - min-height: 100px; + width: 80%; + padding: 5px; + background-color: rgba(0, 0, 0, .3); + caret-color: transparent; } #paste_modal img { - height: 80%; + max-height: 90%; + max-width: 90%; + height: auto; width: auto; + margin: auto; + border: 2px dotted grey; } diff --git a/capsule-prototype/index.html b/capsule-prototype/index.html index 974086f6dbc2547515e33cd97988e0c229d5224d..2113b46a8112c32de7eea4d4751d4af9b183dc39 100644 --- a/capsule-prototype/index.html +++ b/capsule-prototype/index.html @@ -195,11 +195,13 @@ <input type="file" name="fileToUpload[]" multiple="multiple" id="left_menu_item_btn_addfile"> </form> - <div id="paste_modal" contenteditable="true"> - <h1>Paste your file here</h1> - <div id='paste_modal_content'></div> - <button class='validate' disabled>validate</button> - <button class='cancel'>cancel/close</button> + <div id="paste_modal" class='flex-col'> + <h1>Paste your image below</h1> + <div id='paste_modal_content' class='content' contenteditable='true' autofocus='true'></div> + <div class='actions flex-row'> + <button class='validate'>validate</button> + <button class='cancel'>cancel/close</button> + </div> </div> <div id='left_menu' class='flex-col editmode'> diff --git a/capsule-prototype/js/online-script.js b/capsule-prototype/js/online-script.js index 847e237bbc7cfd3d538beede6d8e15909e3525b6..7ec53495b0ca28e340dc057eb1af4e38ebfb6b23 100644 --- a/capsule-prototype/js/online-script.js +++ b/capsule-prototype/js/online-script.js @@ -6,7 +6,8 @@ window.onload = function() { pubSub = window.top.PubSub; pubSub.subscribe('mosaic', openMosaic); pubSub.subscribe('video', openVideo); - pubSub.subscribe('paste_modal', togglePasteModal); + pubSub.subscribe('open_paste_modal', openPasteModal); + pubSub.subscribe('close_paste_modal', closePasteModal); }; $(document).ready(function() { @@ -45,6 +46,7 @@ $(document).ready(function() { setEditionControls(); //Geoloc en mode édition + /* if((false) && (navigator.geolocation)) { navigator.geolocation.getCurrentPosition(function(position) { rekall_common.owner.locationGps = position.coords.latitude + "," + position.coords.longitude; @@ -61,6 +63,7 @@ $(document).ready(function() { }); }); } + */ } else { $(".empty").hide(); @@ -175,10 +178,12 @@ function setEditionControls() { drop: function(event) { $("#flattentimeline").removeClass("draggable").removeClass("drag"); } }); + /* $("#left_menu_bottom").click(function(event){ //var tmp = $(".vjs-marker").css("z-index"); //alert("val = "+tmp); }); + */ $("#left_menu_item_settings").click(function(event){ event.stopPropagation(); @@ -326,16 +331,11 @@ function setEditionControls() { uploadFiles($("#left_menu_item_btn_addfile").get(0).files); }); - $("#left_menu_item_pastefile").click(function(event) { pubSub.publish('paste_modal'); }); - $("#paste_modal button.cancel").click(function(event) { pubSub.publish('paste_modal'); }); + $("#left_menu_item_pastefile").click(function(event) { pubSub.publish('open_paste_modal'); }); + $("#paste_modal button.cancel").click(function(event) { pubSub.publish('close_paste_modal'); }); $("#paste_modal_content").on("paste", function(event) { - setTimeout(function() { - var img = $("#paste_modal img"); - if (img.length === 1) { - $("#paste_modal button.validate")[0].attributes.removeNamedItem('disabled'); - } - }); + $('#paste_modal_content').empty(); }); $("#paste_modal button.validate").click(function(event) { @@ -346,11 +346,10 @@ function setEditionControls() { var n = b64data.length; var uar = new Uint8Array(n); while (n--) uar[n] = bin_str.charCodeAt(n); - var file = new File([uar], 'pasted_' + Math.floor(random()*100) + '.' + subtype, {type: type+'/'+subtype}); + var file = new File([uar], 'pasted_' + Math.floor(random()*100000) + '.' + subtype, {type: type+'/'+subtype}); $('#left_menu_item_btn_addfile').files += file; uploadFiles([file]); - pubSub.publish('paste_modal'); - $("#paste_modal button.validate")[0].attributes += 'disabled'; + pubSub.publish('close_paste_modal'); }); $("#left_menu_item_addlink").click(function(event){ @@ -1306,4 +1305,5 @@ $(window).resize(function(e) { }); $(window).trigger("resize"); -function togglePasteModal() { $('#paste_modal').toggle(); } +function openPasteModal() { $('#paste_modal').css('display', 'flex'); $('#paste_modal_content').first().focus() } +function closePasteModal() { $('#paste_modal').hide(); $('#paste_modal_content').empty(); }