diff --git a/capsule-prototype/css/flatten_timeline.css b/capsule-prototype/css/flatten_timeline.css index b92769b3d1a05f30111b1e048fcd336354a53669..175b8c9e1b57e12cdfc9957b3d907cea1ab4e921 100644 --- a/capsule-prototype/css/flatten_timeline.css +++ b/capsule-prototype/css/flatten_timeline.css @@ -5,6 +5,7 @@ overflow-x: hidden; overflow-y: auto; min-width: 150px; + max-height: 100vh; } #flattentimeline.drag { diff --git a/capsule-prototype/css/left_menu.css b/capsule-prototype/css/left_menu.css index 41803b28561ef85f54d8081bb4ed1cb88c101cd4..1a7aed2b7ef8b5209b341e5fbbe0f48a3b23f780 100644 --- a/capsule-prototype/css/left_menu.css +++ b/capsule-prototype/css/left_menu.css @@ -1,31 +1,79 @@ -#left_menu, #left_menu.div { - width: 80px; +.left_menu * { + padding: 2px; + margin: 2px; +} + +#left_menu { + width: 80px; + min-width: 80px; justify-content: space-between; background: var(--rk-light-blue); - padding-top: 10px; - padding-bottom: 10px; + overflow-x: auto; } +#left_menu i { + font-size: 20px; +} .left_menu_item { - color: rgba(255,255,255,.5); cursor: pointer; + text-align: center; + vertical-align: center; +} + +.left_menu_item:hover, .dropdown_control:checked ~ label { background: rgba(0,0,0,.1); } + +.dropdown_content { display: flex; + visibility: hidden; +} + +.dropdown_control { + display: none; +} + +.dropdown_control:checked ~ .dropdown_content { + visibility: visible; +} + +#playback_speed_form { + padding: 0; +} + +#playback_speed_form input { + display: none; +} + +#playback_speed_form label { + background-color: rgba(0, 0, 0, .5); + padding: 4px; + box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); +} + +#playback_speed_form input:checked+label { + background-color: rgba(255, 255, 255, .5); + color: black; +} + +#playback_speed_form input:checked+label::before { + content: "\2713 "; + color: black; +} + +.btns_add_annotation li { flex-direction: column; - align-items: center; - text-align: center; - /* - font-size: 10px; - width: 70px; - margin: 0 5px; - height: 60px; - border-radius: 2px; - padding: 5px 0; - text-align: center; - display: inline-block; - */ } + +#btn_add_note::before { content: url('images/icn-menu-addnote.png'); } +#btn_add_link::before { content: url('images/icn-menu-addlink.png'); } +#btn_add_file::before { content: url('images/icn-menu-addfile.png'); } +#btn_add_paste::before { content: ' '; background: url('images/icn-image.png') no-repeat center/45%; height: 40px; } + +#left_menu_item_preview::before { content: url('images/icn-menu-preview.png'); } +#left_menu_item_settings::before { content: url('images/icn-menu-settings.png'); } + +/* .left_menu_item:hover { background: rgba(0,0,0,.1); } @@ -59,12 +107,6 @@ #left_menu_item_icn_settings { background:url("images/icn-menu-settings.png"); } -#left_menu_item_icn_addfile { background:url("images/icn-menu-addfile.png"); } - -#left_menu_item_icn_addnote { background:url("images/icn-menu-addnote.png"); } - -#left_menu_item_icn_addlink { background:url("images/icn-menu-addlink.png"); } - .left_menu_item_title { height:20px; line-height:20px; @@ -81,3 +123,5 @@ opacity: 0; cursor: pointer !important; } + +*/ diff --git a/capsule-prototype/css/mosaic.css b/capsule-prototype/css/mosaic.css index 8ad8ce8598febfd58a700e69b9d0e024ad9e78e5..02f0b81c9f65033da7cd8ad3165e683bb8b46ff2 100644 --- a/capsule-prototype/css/mosaic.css +++ b/capsule-prototype/css/mosaic.css @@ -16,6 +16,7 @@ #mosaic_tab { display: flex; flex-direction: column; + overflow: auto; } .mosaic_filter, .mosaic_category > div { diff --git a/capsule-prototype/css/old_flatten_timeline.css b/capsule-prototype/css/old_flatten_timeline.css deleted file mode 100644 index 9d021add4923af01017fb2891f675e8435b7c1a0..0000000000000000000000000000000000000000 --- a/capsule-prototype/css/old_flatten_timeline.css +++ /dev/null @@ -1,350 +0,0 @@ - -#flattentimeline { - flex: 1; - color: white; - overflow-x: hidden; - overflow-y: auto; -} - -#flattentimeline.drag { - /*background: rgba(2,212,255,.5);*/ - box-shadow: 0 0 20px 20px rgba(63,223,255,.45) inset; -} - -.flattentimeline_item.draggable { - background: rgba(63,223,255,.25); -} - -#flattentimeline_highlight { - margin-bottom: 0px; -} - - -#flattentimeline_main_title { - font-weight: 200; - /*height: 40px;*/ - line-height: 20px; - padding: 10px 0; - text-align: center; - /*background: #2C3032;*/ - /*background: #2C3033;*/ - /*background: #57A5AF;*/ - background: #EC8960; - /*background-image: -webkit-linear-gradient(left, #EC8960 0%, #57A5AF 100%);*/ - /*background-image: -webkit-linear-gradient(left, #94CA6F 0%, #B495CC 100%);*/ - text-transform: uppercase; - color: rgba(255,255,255,1); - font-size: 18px; - border-bottom: 2px solid #1B1D1E; -} - -#flattentimeline_settings { - font-weight: 200; - height: 240px; - line-height: 40px; - text-align: center; - background: #26292B; - text-transform: uppercase; - color: #FFF; - font-size: 18px; - margin-top: 4px; - display: none; -} - -#flattentimeline_items { - width: 100%; - height: 100%; - overflow: hidden; - overflow-y: auto; - background-color: rgba(255,255,255,.05); -} - -.flattentimeline_item { - position: relative; - height: 40px; - color: white; - margin: 0px 0px; - cursor: pointer; - width: 100%; - display: none; - /*border-radius: 2px;*/ -} - - -.flattentimeline_highlightitem { - position: relative; - /*height: 150px;*/ - height: auto; - color: white; - margin: 3px 0px 0px 0px; - cursor: pointer; - /*background: rgba(255,255,255,.15); */ - width: 100%; - text-align: center; - padding: 2px 0 3px 0; - border-radius: 1px; - - background-position: center center; - background-repeat: no-repeat; - -webkit-background-size:cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; - - /*display:block;*/ -} - - -.flattentimeline_item:hover, .flattentimeline_highlightitem:hover { - background-color: rgba(255,255,255,.15); - opacity: 1; -} - -.flattentimeline_opacifiant, .flattentimeline_bar { - top: 0px; - left: 0px; - width: 100%; - height: 100%; - position: absolute; - background-position: center center; - background-repeat: no-repeat; - -webkit-background-size:cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; - text-align: left; - overflow: hidden; - - /*border-radius: 3px; - /*mix-blend-mode: overlay;*/ -} - -.flattentimeline_title, .flattentimeline_subtitle, .flattentimeline_counter { - top: 0px; - left: 0px; - /*position: absolute; */ - background-position: center center; - background-repeat: no-repeat; - text-align: left; - overflow: hidden; - line-height: 20px; -} - - -.flattentimeline_item .flattentimeline_image { - height: 30px; - width: 30px; - margin: 4px 7px 4px 0px; - border-radius: 1px; - background-color: rgba(255,255,255,.25); - float: left; - background-position: center center; - background-repeat: no-repeat; - -webkit-background-size:cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; -} - - -.flattentimeline_highlightitem .flattentimeline_image { - height: 100%; - width: 100%; - margin: 0; - border-radius: 1px; - position: absolute; - background-position: center center; - background-repeat: no-repeat; - -webkit-background-size:cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; - background-blend-mode: normal; - opacity: .5; -} - -/*.flattentimeline_highlightitem .flattentimeline_image { -width: 170px; -height: 60px; -margin: 15px 15px 5px 15px; -border-radius: 2px; -background-color: #fff; -display: inline-block; -float: left; -background-position: center center; -} */ - -/*.flattentimeline_color { -top: 0px; -height: 100%; -}*/ -.flattentimeline_opacifiant, .flattentimeline_bar { - background-color: rgba(0, 0, 0, 0.75); - height: 3px; - top: 37px; - - /* box-shadow: 0px 0px 1px 1px rgba(20,46,51,.25); - /* mix-blend-mode: luminosity; */ - - /* mix-blend-mode: multiply; - /* height: 40px; - top: 0px; - opacity: .25; */ -} - -.flattentimeline_highlightitem .flattentimeline_bar, .flattentimeline_highlightitem .flattentimeline_opacifiant { - top: auto; - display: block; -} - -.flattentimeline_title { - font-weight: 400; - font-size: 10px; - line-height: 39px; - /* color: rgba(255,255,255,.5); */ - - /*width: 55%; */ - max-width: 132px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - - display: inline-block; - /*color: #0C2D33; */ - /*mix-blend-mode: screen; */ -} - -.flattentimeline_highlightitem .flattentimeline_title { - line-height: 1.2em; - width: 170px; - font-size: 12px; - text-transform: uppercase; - padding: 20px 0 20px 0; - color: #FFF;/*rgba(255,255,255,1);*/ - font-weight: 600; -} - -.flattentimeline_highlightitem .flattentimeline_description { - font-weight: 400; - font-size: 11px; - line-height: 1.4em; - color: rgba(255,255,255,.9); - margin: -15px 15px 20px 15px; - - width: 170px; - text-align: left; - - display: inline-block; -} - -.flattentimeline_highlightitem .flattentimeline_typeTxt, .flattentimeline_highlightitem .flattentimeline_author { - font-weight: 400; - font-size: 9px; - line-height: 1.2em; - margin: -13px 15px 20px 15px; - - width: 170px; - text-align: left; - color: rgba(255,255,255,.75); - - display: flex; - font-style: italic; - /*text-transform: uppercase; */ -} - -.flattentimeline_highlightitem .flattentimeline_author { - font-style: normal; -} - -.flattentimeline_subtitle { - font-family: "OpenSans"; - font-weight: 200; - top: 25px; - font-size: 10px; - left: 40px; - line-height: 20px; - height: 20px; - display: none; -} -/*.flattentimeline_type { -top: 14px; -left: 6px; -width: 26px; -height: 26px; -background-position: center center; -background-repeat: no-repeat; -opacity: .5; -}*/ -/*.flattentimeline_type { -width:10px; height:10px; -border-radius:10px; -float:right; -margin:20px 15px 20px 0; -}*/ -.flattentimeline_type { - width: 20px; - height: 20px; - /*border-radius: 20px; */ - float: right; - background-position: center center; - background-repeat: no-repeat; - margin: 9px 5px; - opacity: 0.75; - display: none; -} - -.flattentimeline_highlightitem .flattentimeline_type { - width: 40px; - height: 40px; - position: absolute; - border-radius: 30px; - background-color: rgba(0,0,0,.5); - margin: 25px 0 0 80px; -} - -.flattentimeline_color { - width: 6px; - height: 6px; - border-radius: 10px; - float: right; - margin: 22px 5px; -} - -.flattentimeline_counter { - font-weight: 600; - top: 5px; - left: 5px; - width: 40px; - height: 40px; - line-height: 38px; - border-radius: 2px; - - background-color: #000; - - font-size: 18px; - text-align: center; - display: none; -} - -.flattentimeline_bar { - /*width: 0%;*/ - background-color: #26292B; /*#2DCAE1;*/ - opacity: 1; -} - -.docLive, .docTocome, .docFaraway { - display: flex; - flex: 0; -} - -.docLive { - opacity: 1; -} - -.docTocome, .docFaraway { - opacity: 0.1; -} - -.docFaraway { - opacity: 0.1; -} diff --git a/capsule-prototype/css/old_mosaic.css b/capsule-prototype/css/old_mosaic.css deleted file mode 100644 index 5900022308f739c1c07792322b2e069ea9e9433f..0000000000000000000000000000000000000000 --- a/capsule-prototype/css/old_mosaic.css +++ /dev/null @@ -1,82 +0,0 @@ - -#mosaic_tab { - background: #243538; - overflow: scroll; - padding: 20px; - display: none; -} - -.mosaic_category { - padding: 1.0em 1vw; - margin: 2vh 0 1.5vh 0; - border-radius: 3px; - background: rgba(0,0,0,.15); -} - -.mosaic_category_grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); - grid-auto-rows: 150px; -} - -.mosaic_filter { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); -} - -.mosaic_filter_item { - padding: 1.0em 1vw; - margin: 2vh 0.5vw 1.5vh 0.5vw; - border-radius: 3px; - cursor:pointer; -} - -.mosaic_filter_disabled { - opacity: 0.5; -} - -.mosaic_filter_disabled>h2:after { - background-image: url('images/icn-menu-filter.png'); -} - -.mosaic_filter_item > h2, .mosaic_category h2 { - text-transform: capitalize; -} - -.mosaic_filter_item:not(.mosaic_filter_disabled) > h2:after{ - background-image: url('images/icn-menu-preview.png'); -} - -.mosaic_filter_item > h2:after{ - display:inline-block; - height:20px; - width:20px; - content: " "; - background-size: 20px 20px; - margin-left: 5px; - padding-top: 3px; - background-repeat: no-repeat; -} - -.mosaic_filter_item_all > h2:after { - background-image: url('images/icn-reload.png') !important; -} - -.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; - margin: 2vh 0 1.5vh 0; - cursor:pointer; -} - -.mosaic_item .caption { - /* - display:block; - */ -} - diff --git a/capsule-prototype/css/online-theme.css b/capsule-prototype/css/online-theme.css index 92a45e4a3fcd897159632416b79330a65a7ebd43..0f10b64d40019da656376fc950e840cd649347fe 100644 --- a/capsule-prototype/css/online-theme.css +++ b/capsule-prototype/css/online-theme.css @@ -1,4 +1,4 @@ -@import url("font/stylesheet.css"); +@import 'font/stylesheet.css'; @import 'left_menu.css'; @import 'popup.css'; @import 'mosaic.css'; @@ -61,10 +61,6 @@ html, body { background-color: rgba(255, 255, 255, .25); } -#tabs { - overflow: auto; -} - #container { width: 100%; height: 100%; @@ -93,7 +89,7 @@ html, body { #video { width: 80vw; - height: 100%; + height: calc(100vh - 40px); } .vjs-big-play-button { diff --git a/capsule-prototype/index.html b/capsule-prototype/index.html index 970c40a6e842dba94ffe84bbd4762822f6586152..fbe9317f4b4c7947720fa010b85c513144165f6c 100644 --- a/capsule-prototype/index.html +++ b/capsule-prototype/index.html @@ -202,6 +202,47 @@ </div> </div> + <div id='left_menu' class='flex-col editmode left_menu'> + <a id='btn_home' class='left_menu_item flex-col' href='javascript:window.app.rekall.Rekall('openUrl', 'home')'><i class='fas fa-home fa-3x left_menu_item_icn'></i>Go back to my capsules</a> + <div class='flex-col'> + <ul class='btns_add_annotation flex-col'> + <input type='checkbox' id='inp_add_annotation_dropdown' class='dropdown_control' /> + <li class='dropdown_content left_menu_item' id='btn_add_note'>note</li> + <li class='dropdown_content left_menu_item' id='btn_add_link'>link</li> + <li class='dropdown_content left_menu_item' id='btn_add_paste'>clipboard</li> + <li class='dropdown_content left_menu_item' id='btn_add_file'>file</li> + <label for='inp_add_annotation_dropdown' class='left_menu_item' title='add annotation'><i class='fas fa-plus'></i></label> + </ul> + <div class='flex-col'> + <input type='checkbox' id='inp_playback_rate_dropdown' class='dropdown_control' /> + <label for ='inp_playback_rate_dropdown' class='left_menu_item' title='change playback rate'><i class='fas fa-play'></i></label> + <form id='playback_speed_form' class='dropdown_content flex-col'> + <input type='radio' id='playback_speed_025' value='0.25' name='playback_rate' /> + <label class='left_menu_item' for='playback_speed_025'>0.25</label> + <input type='radio' id='playback_speed_05' value='0.5' name='playback_rate' /> + <label class='left_menu_item' for='playback_speed_05'>0.5</label> + <input type='radio' id='playback_speed_075' value='0.75' name='playback_rate' /> + <label class='left_menu_item' for='playback_speed_075'>0.75</label> + <input type='radio' id='playback_speed_1' value='1' name='playback_rate' checked /> + <label class='left_menu_item' for='playback_speed_1'>normal</label> + <input type='radio' id='playback_speed_125' value='1.25' name='playback_rate' /> + <label class='left_menu_item' for='playback_speed_125'>1.25</label> + <input type='radio' id='playback_speed_15' value='1.5' name='playback_rate' /> + <label class='left_menu_item' for='playback_speed_15'>1.5</label> + <input type='radio' id='playback_speed_175' value='1.75' name='playback_rate' /> + <label class='left_menu_item' for='playback_speed_175'>1.75</label> + <input type='radio' id='playback_speed_2' value='2' name='playback_rate' /> + <label class='left_menu_item' for='playback_speed_2'>2</label> + </form> + </div> + </div> + <div class='flex-col'> + <div id='left_menu_item_preview' class='left_menu_item flex-col'>preview</div> + <div id='left_menu_item_settings' class='left_menu_item flex-col'>settings</div> + </div> + </div> + + <!-- <div id='left_menu' class='flex-col editmode'> <div class='top'> <a class="left_menu_item dropable" href="javascript:window.app.rekall.Rekall('openUrl', 'home')"> @@ -236,6 +277,7 @@ </div> </div> </div> + --> <div id='tabs' class='flex flex-col'> diff --git a/capsule-prototype/js/online-rekall/RekallApplication.js b/capsule-prototype/js/online-rekall/RekallApplication.js index 135f3733138a2d544be99be304c398d5e55a09a7..ce1cd2a023cf94b817e15b767810012cc8a6bd34 100644 --- a/capsule-prototype/js/online-rekall/RekallApplication.js +++ b/capsule-prototype/js/online-rekall/RekallApplication.js @@ -37,7 +37,7 @@ return localOptions.PubSub; }, rekall: function () { - return localOptions.Rekall; + return localOptions.Rekall; }, setPlaybackRate: function () { if (arguments.length > 0 && 'number' === typeof arguments[0] && 0 < arguments[0] && arguments[0] < 10) { @@ -68,4 +68,4 @@ } } app.rekall = new RekallApplication(); -})(window.app = window.app || {}) \ No newline at end of file +})(window.app = window.app || {}) diff --git a/capsule-prototype/js/online-script.js b/capsule-prototype/js/online-script.js index 8f53cf8fa0bc0660838410e9cefe4471bdcc590f..cf840c2f874b019e0445f1c964d5ae7481856245 100644 --- a/capsule-prototype/js/online-script.js +++ b/capsule-prototype/js/online-script.js @@ -319,13 +319,13 @@ function setEditionControls() { openAlert("Do you really want to delete this project ?", "yesnodeleteproject"); }); - $("#left_menu_item_addnote").click(function(event){ + $("#btn_add_note").click(function(event){ event.stopPropagation(); rekall.timeline.pause(); uploadFiles(["New note"]); }); - $("#left_menu_item_addfile").mousedown(function(event) { + $("#btn_add_file").mousedown(function(event) { rekall.timeline.pause(); $("#left_menu_item_btn_addfile").click(); }); @@ -334,7 +334,7 @@ function setEditionControls() { uploadFiles($("#left_menu_item_btn_addfile").get(0).files); }); - $("#left_menu_item_pastefile").click(function(event) { pubSub.publish('open_paste_modal'); }); + $("#btn_add_paste").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) { @@ -352,13 +352,13 @@ 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()*100000) + '.' + subtype, {type: type+'/'+subtype}); + var file = new File([uar], 'pasted_' + Math.floor(Math.random()*100000) + '.' + subtype, {type: type+'/'+subtype}); $('#left_menu_item_btn_addfile').files += file; uploadFiles([file]); pubSub.publish('close_paste_modal'); }); - $("#left_menu_item_addlink").click(function(event){ + $("#btn_add_link").click(function(event){ event.stopPropagation(); rekall.timeline.pause(); $("#popupAddLinkSpace").show(); @@ -561,6 +561,11 @@ function setEditionControls() { $("#popupEditSupprimer").click(function(){ openAlert("Do you really want to delete this file from the project ?", "yesnodelete"); }); + + $("#playback_speed_form").change(function(event) { + console.debug("set playback rate to " + event.target.value); + window.app.rekall.Rekall().videoPlayer.playbackRate(Number(event.target.value)); + }); } /*var rubanTimeout = 0;