diff --git a/capsule-prototype/create.zip b/capsule-prototype/create.zip
deleted file mode 100644
index 7bd279e73b63eb21c0d4ba427a115dd0ebf1ab8a..0000000000000000000000000000000000000000
Binary files a/capsule-prototype/create.zip and /dev/null differ
diff --git a/capsule-prototype/css.zip b/capsule-prototype/css.zip
new file mode 100644
index 0000000000000000000000000000000000000000..a56077ef87a122e860a12f240c5f48a97c9282f2
Binary files /dev/null and b/capsule-prototype/css.zip differ
diff --git a/capsule-prototype/css/online-theme.css b/capsule-prototype/css/online-theme.css
index f8b70b74d7e75497c0f4beec77d7fc80f9ac7736..fa6c71f830918f69d496ba4da917a3c9fc25a627 100644
--- a/capsule-prototype/css/online-theme.css
+++ b/capsule-prototype/css/online-theme.css
@@ -1,8 +1,14 @@
@import url("font/stylesheet.css");
+:root {
+ --tab_selector_height: 30px;
+}
+
.flex-col, .flex-row { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
+.flex-center { justify-content: center; align-items: center; }
+.flex { flex: 1; }
html, body {
width: 100%;
@@ -23,22 +29,22 @@ html, body {
user-select: none;
}
-#tabs {
- flex: 1;
-}
+#tab_selector_btn * { display: flex; }
-#tab_selector {
+#tab_selector_btn {
justify-content: space-evenly;
- height: 30px;
+ height: var(--tab_selector_height);
flex-shrink: 0;
}
-#tab_selector > div {
- flex: 1;
+.tab_selector_btn {
+ justify-content: center;
+ align-items: center;
}
-#video_tab { background-color: red; }
-#mosaic_tab { background-color: blue; }
+.tab_selector_btn.enabled {
+ background-color: rgba(255, 255, 255, .25);
+}
#container {
width: 100%;
@@ -49,11 +55,6 @@ html, body {
flex-direction: row;
}
-#LeftMenu, #LeftMenu.div {
- width: 80px;
- justify-content: space-between;
-}
-
#popupSpace, #popupAlertSpace, #popupAddLinkSpace, #popupSettingsSpace {
width: 100%;
height: 100%;
@@ -65,55 +66,40 @@ html, body {
top: 0px;
}
-#mosaicTab {
+#mosaic_tab {
background: #243538;
- color: rgba(255,255,255,.85);
- font-weight: 200;
- font-size: 0.9em;
- padding-bottom: 0;
- height: 100vh;
- /*
- line-height: 1.2em;
- padding: 1.0em 1vw;
-
- width: 70vw;
- margin: 2vh 0 1.5vh -10vw;
- height: 90vh;
- box-shadow: 0 1px 3px rgba(0,0,0,.2) inset;
- border: 0;
- border-radius: 3px;
- */
- overflow: scroll;
+ overflow: scroll;
+ padding: 20px;
}
#popupAlertSpace {
z-index: 100000000;
}
-
+
/*#popupSettings {
- width: 40vw;
- margin-top: 25vh;
- padding: 5vh 0 6vh 0;
- border-radius: 2px;
- box-shadow: 0 5px 25px #000;
- font-weight: 400;
- font-size: 1vw;
- display: inline-block;
- text-align: center;
- background: #243538;
+width: 40vw;
+margin-top: 25vh;
+padding: 5vh 0 6vh 0;
+border-radius: 2px;
+box-shadow: 0 5px 25px #000;
+font-weight: 400;
+font-size: 1vw;
+display: inline-block;
+text-align: center;
+background: #243538;
} */
#popupSettings {
margin-top: 15vh;
border-radius: 2px;
box-shadow: 0 5px 25px #000;
- font-weight: 400;
+ font-weight: 400;
font-size: 1vw;
display: inline-block;
text-align: left;
background: #243538;
}
-
+
#popupSettingsLeft {
width: 25vw;
min-height: 50vh;
@@ -152,7 +138,7 @@ html, body {
width: 9vw;
border-radius: 3px;
border: 1px solid rgba(255,255,255,.15);
-
+
}
.popupSettingsBtn:hover {
background: rgba(255,255,255,.05);/*rgba(20,46,51,.75);/*rgba(20,46,51,.75); */
@@ -176,7 +162,7 @@ html, body {
.popupSettingsA:hover {
color: rgba(255,255,255,.75);
}
-
+
.popupSettingsTxt {
font-weight: 200;
width: 25vw;
@@ -199,10 +185,10 @@ html, body {
margin-bottom: 1vh;
font-size: .9em;
line-height: 1.2em;
-
+
font-weight: 200;
-
- background: rgba(0,0,0,.05);
+
+ background: rgba(0,0,0,.05);
box-shadow: 0 1px 3px rgba(0,0,0,.2) inset;
border: 0;
border-radius: 3px;
@@ -229,7 +215,7 @@ html, body {
padding: 5vh 2vw;
border-radius: 3px;
box-shadow: 0 5px 25px #000;
- font-weight: 400;
+ font-weight: 400;
font-size: 1vw;
display: inline-block;
text-align: center;
@@ -247,17 +233,17 @@ html, body {
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.4em;
padding: 2vh 1vw;
-
+
margin: 3vh 0 1.5vh 0;
}
#popupAlertButtons, #popupAddLinkButtons {
@@ -266,24 +252,24 @@ html, body {
}
.popupAlertButton, .popupAddLinkButton, .popupSettingsButton {
width: 9vw;
-
+
font-weight: 400;
- /* color: rgba(255,255,255,.75); */
+ /* color: rgba(255,255,255,.75); */
font-size: 0.7em;
line-height: 1.2em;
-
+
cursor: pointer;
text-transform: uppercase;
text-align: center;
display: inline-block;
- /* border: 1px solid rgba(255,255,255,.15); */
+ /* border: 1px solid rgba(255,255,255,.15); */
border-radius: 3px;
padding: 1.1em 0;
-
- color: rgba(255,255,255,.5);
+
+ color: rgba(255,255,255,.5);
background: rgba(255,255,255,.15);
box-shadow: 0 1px 3px rgba(0,0,0,.1);
-
+
margin: 3vh 1vw 0vh 1vw !important;
font-family: 'OpenSans' !important;
}
@@ -292,11 +278,11 @@ html, body {
color: #fff
}
#popupAlertButtonOk, #popupAlertButtonYesdelete, #popupAlertButtonCancel, #popupAlertButtonYesdeleteproject {
- display: inline-block;
+ display: inline-block;
}
#popupAddLink {
-
+
width: 40vw;
/*background: rgb(102,202,138);
/*background: rgb(100,100,100);*/
@@ -304,17 +290,17 @@ html, body {
padding: 5vh 0 6vh 0;
/*left: 20%;
position: absolute; */
- border-radius: 2px;
- /*border: 2px solid #333;*/
- box-shadow: 0 5px 25px #000;
- font-weight: 400;
- font-size: 1vw;
- display: inline-block;
- text-align: center;
- background: #243538;
- /*background-image: -webkit-linear-gradient(right bottom, rgb(20,46,51) 0%, #475457 150%);
- /*box-shadow: 0px 0px 2px 3px rgba(255,255,255,.1) inset; */
-
+border-radius: 2px;
+/*border: 2px solid #333;*/
+box-shadow: 0 5px 25px #000;
+font-weight: 400;
+font-size: 1vw;
+display: inline-block;
+text-align: center;
+background: #243538;
+/*background-image: -webkit-linear-gradient(right bottom, rgb(20,46,51) 0%, #475457 150%);
+/*box-shadow: 0px 0px 2px 3px rgba(255,255,255,.1) inset; */
+
}
#popupAddLinkMessage, #popupMosaicMessage {
font-weight: 100;
@@ -333,15 +319,15 @@ html, body {
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;
}
@@ -366,33 +352,33 @@ html, body {
padding: 1.0em 1vw;
margin: 2vh 0.5vw 1.5vh 0.5vw;
border-radius: 3px;
- cursor:pointer;
+ cursor:pointer;
}
.mosaic_filter_disabled {
- opacity: 0.5;
+ opacity: 0.5;
}
.mosaic_filter_disabled>h2:after {
- background-image: url('images/icn-menu-filter.png');
+ background-image: url('images/icn-menu-filter.png');
}
.mosaic_filter_item>h2, .mosaic_category h2 {
- text-transform: capitalize;
+ text-transform: capitalize;
}
.mosaic_filter_item:not(.mosaic_filter_disabled)>h2:after{
- background-image: url('images/icn-menu-preview.png');
+ 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;
+ 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;
+ background-image: url('images/icn-reload.png') !important;
}
.mosaic_item img {
@@ -404,7 +390,7 @@ html, body {
/* The width of the container also implies margin around the images. */
width: 100px;
margin: 2vh 0 1.5vh 0;
- cursor:pointer;
+ cursor:pointer;
}
.mosaic_item .caption {
display:block;
@@ -414,7 +400,7 @@ html, body {
margin-top: 15vh;
border-radius: 2px;
box-shadow: 0 5px 25px #000;
- font-weight: 400;
+ font-weight: 400;
font-size: 1vw;
display: inline-block;
text-align: left;
@@ -441,7 +427,7 @@ html, body {
#popupEdit tr, #popupEdit td {
background: rgba(0,0,0,.15);
}
-
+
.popupLeftItem {
width: 100%;
text-align: center;
@@ -523,7 +509,7 @@ html, body {
color: rgba(255,255,255,.75);
}
.popupInput {
- background: rgba(0,0,0,.25);
+ background: rgba(0,0,0,.25);
box-shadow: 0 1px 3px rgba(0,0,0,.5) inset;
border: 0;
border-radius: 3px;
@@ -667,8 +653,8 @@ html, body {
line-height: 1.2em;
}
-
-
+
+
#popupLink {
cursor: pointer;
@@ -692,7 +678,7 @@ html, body {
padding: 0;
margin: 0 0 3vh 0;
}
-
+
#popupSetHighlight {
font-weight: 400;
@@ -711,20 +697,20 @@ html, body {
#popupSetHighlight.selected {
/*color: rgba(255,255,255,.75);
background: rgba(0,0,0,.15); */
- /* background: rgba(255,255,255,.15); */
- color: #FFF;
+/* background: rgba(255,255,255,.15); */
+color: #FFF;
}
#popupSetHighlight:hover {
/*background: rgba(0,0,0,.25);
color: #FFF; */
- /*background: rgba(255,255,255,.2); */
- color: rgba(255,255,255,.25); /*#142E33; */
+/*background: rgba(255,255,255,.2); */
+color: rgba(255,255,255,.25); /*#142E33; */
}
#popupSetHighlight.selected:hover {
/*color: rgba(255,255,255,.75);
background: rgba(0,0,0,.15); */
- /*background: rgba(255,255,255,.25); */
- color: rgba(255,255,255,.75); /*#FFF; */
+/*background: rgba(255,255,255,.25); */
+color: rgba(255,255,255,.75); /*#FFF; */
}
@@ -788,7 +774,7 @@ html, body {
line-height: 1.2em;
}
}
-
+
.empty, .empty#popupAuthor, .empty#popupLink {
@@ -797,8 +783,8 @@ html, body {
text-decoration: none !important;
display: none;
}
-
-
+
+
.separationHDark {
height: 1px;
@@ -815,29 +801,23 @@ html, body {
-
-#left_menu {
- /*width: 80px;*/
- height: 100vh;
+#left_menu, #left_menu.div {
+ width: 80px;
+ justify-content: space-between;
background: #559299;
- display: inline-block;
+ padding-top: 10px;
+ padding-bottom: 10px;
}
-#left_menu_top {
- height: 50vh;
- vertical-align: top;
- text-align: center;
- /*background: rgba(0,0,0,.1); */
-}
-#left_menu_bottom {
- height: 50vh;
- vertical-align: bottom;
- text-align: center;
- /*background: rgba(0,0,0,.05); */
-}
.left_menu_item {
color: rgba(255,255,255,.5);
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ /*
font-size: 10px;
width: 70px;
margin: 0 5px;
@@ -845,26 +825,14 @@ html, body {
border-radius: 2px;
padding: 5px 0;
text-align: center;
- cursor: pointer;
display: inline-block;
+ */
}
-.left_menu_item:hover {
- background: rgba(0,0,0,.1);
-}
-.left_menu_item.selected {
- background: rgba(0,0,0,.15);
-}
-.left_menu_item:first-child {
- margin-top: 10px;
-}
-.left_menu_item:last-child {
- margin-bottom: 10px;
-}
+.left_menu_item:hover { background: rgba(0,0,0,.1); }
+.left_menu_item.selected { background: rgba(0,0,0,.15); }
+.left_menu_item:first-child { margin-bottom: 10px; }
-.left_menu_item_icn {
- width:40px; height:40px;
- margin:0px 15px;
-}
+.left_menu_item_icn { width:40px; height:40px; }
#left_menu_item_icn_presets { background:url("images/icn-menu-presets.png"); }
#left_menu_item_icn_horizontal { background:url("images/icn-menu-horizontal.png"); }
#left_menu_item_icn_vertical { background:url("images/icn-menu-vertical.png"); }
@@ -875,7 +843,6 @@ html, body {
#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"); }
#left_menu_item_icn_addfile { background:url("images/icn-menu-addfile.png"); }
@@ -894,19 +861,21 @@ html, body {
}
#left_menu_item_btn_addfile {
+ /*
width: 70px;
height: 70px;
margin: -5px 0 0 0;
+ display: block;
+ position: absolute;
+ */
background: red;
opacity: 0;
- position: absolute;
- display: block;
cursor: pointer !important;
}
#video {
width: 80vw;
- height: 90vh;
+ height: calc(100vh - var(--tab_selector_height));
}
#flattentimeline {
@@ -926,7 +895,7 @@ html, body {
#flattentimeline_highlight {
margin-bottom: 0px;
}
-
+
#flattentimeline_main_title {
font-weight: 200;
@@ -974,7 +943,7 @@ html, body {
display: none;
/*border-radius: 2px;*/
}
-
+
.flattentimeline_highlightitem {
position: relative;
@@ -988,18 +957,18 @@ html, body {
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;
-
+ -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;
@@ -1013,15 +982,15 @@ html, body {
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;
+ -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;*/
+ /*mix-blend-mode: overlay;*/
}
.flattentimeline_title, .flattentimeline_subtitle, .flattentimeline_counter {
top: 0px;
@@ -1033,7 +1002,7 @@ html, body {
overflow: hidden;
line-height: 20px;
}
-
+
.flattentimeline_item .flattentimeline_image {
height: 30px;
@@ -1044,10 +1013,10 @@ html, body {
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;
+ -webkit-background-size:cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
}
@@ -1059,39 +1028,39 @@ html, body {
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;
+ -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;
+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%;
+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;
+
+ /* 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; */
}
@@ -1104,14 +1073,14 @@ html, body {
font-weight: 400;
font-size: 10px;
line-height: 39px;
- /* color: rgba(255,255,255,.5); */
+ /* 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; */
@@ -1133,10 +1102,10 @@ html, body {
line-height: 1.4em;
color: rgba(255,255,255,.9);
margin: -15px 15px 20px 15px;
-
+
width: 170px;
text-align: left;
-
+
display: inline-block;
}
@@ -1145,11 +1114,11 @@ html, body {
font-size: 9px;
line-height: 1.2em;
margin: -13px 15px 20px 15px;
-
+
width: 170px;
text-align: left;
color: rgba(255,255,255,.75);
-
+
display: inline-block;
font-style: italic;
/*text-transform: uppercase; */
@@ -1169,19 +1138,19 @@ html, body {
display: none;
}
/*.flattentimeline_type {
- top: 14px;
- left: 6px;
- width: 26px;
- height: 26px;
- background-position: center center;
- background-repeat: no-repeat;
- opacity: .5;
+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;
+width:10px; height:10px;
+border-radius:10px;
+float:right;
+margin:20px 15px 20px 0;
}*/
.flattentimeline_type {
width: 20px;
@@ -1219,9 +1188,9 @@ html, body {
height: 40px;
line-height: 38px;
border-radius: 2px;
-
+
background-color: #000;
-
+
font-size: 18px;
text-align: center;
display: none;
@@ -1251,7 +1220,7 @@ html, body {
-
+
.vjs-big-play-button {
border-radius: 100% !important;
border: none !important;
@@ -1284,50 +1253,50 @@ html, body {
}
@media screen and (min-width: 1001px) {
- #watermark {
+ #watermark {
display: none;
}
/*#projectInfoBtn {
- position: absolute;
- display: none;
- }*/
+ position: absolute;
+ display: none;
+ }*/
}
@media screen and (max-width: 1000px) {
- #watermark {
- width: 40px;
- height: 40px;
- position: absolute;
- z-index: 100000;
- bottom: 50px;
- left: 20px;
- opacity: .5;
- }
- #watermark:hover {
- opacity: 1;
- }
-
- /*#projectInfoBtn {
- width: 30px;
- height: 30px;
- background: #FFF;
- position: absolute;
- z-index: 100000;
- top: 20px;
- left: 20px;
- opacity: .25;
- border-radius: 200px;
- font-family: serif;
- font-style: italic;
- font-weight: bold;
- color: #000;
- font-size: 24px;
- text-align: center;
- line-height: 30px;
- cursor: pointer;
+#watermark {
+width: 40px;
+height: 40px;
+position: absolute;
+z-index: 100000;
+bottom: 50px;
+left: 20px;
+opacity: .5;
+}
+#watermark:hover {
+opacity: 1;
+}
+
+/*#projectInfoBtn {
+width: 30px;
+height: 30px;
+background: #FFF;
+position: absolute;
+z-index: 100000;
+top: 20px;
+left: 20px;
+opacity: .25;
+border-radius: 200px;
+font-family: serif;
+font-style: italic;
+font-weight: bold;
+color: #000;
+font-size: 24px;
+text-align: center;
+line-height: 30px;
+cursor: pointer;
}
#projectInfoBtn:hover {
- opacity: .5;
+ opacity: .5;
}*/
}
@@ -1351,7 +1320,7 @@ html, body {
cursor: pointer;
}
#projectInfoBtn:hover {
- opacity: .5;
+ opacity: .5;
}
#openFullScreen {
@@ -1367,20 +1336,20 @@ html, body {
display: none;
}
#openFullScreen:hover {
- opacity: 1;
+ opacity: 1;
}
-
-
+
+
.displayMode {
- /* display: none; */
+ /* display: none; */
}
/*
.video-js:not(.resized) {
- width: 100vw;
- height: 100vh;
+width: 100vw;
+height: 100vh;
}
diff --git a/capsule-prototype/index.html b/capsule-prototype/index.html
index fbc830f35303485d225cc8e42a8a0dac11b2e53f..14b36b9bc746cacf29ea2cfb8e9f950fa3bb257f 100644
--- a/capsule-prototype/index.html
+++ b/capsule-prototype/index.html
@@ -191,104 +191,46 @@
</table>
</div>
- <div id='LeftMenu' class='flex-col'>
+ <form id="uploadForm" action="php/upload.php" method="post" enctype="multipart/form-data" style='display: none;'>
+ <input type="file" name="fileToUpload[]" multiple="multiple" id="left_menu_item_btn_addfile">
+ </form>
+
+ <div id='left_menu' class='flex-col editmode'>
<div class='top'>
- <div class="left_menu_item dropable">
- <a href="javascript:window.app.rekall.Rekall('openUrl', window.app.urls.memberHome)" >
- <div><i class="fas fa-home fa-3x left_menu_item_icn"></i></div>
- Go back to my capsules
- </a>
- </div>
+ <a class="left_menu_item dropable" href="javascript:window.app.rekall.Rekall('openUrl', window.app.urls.memberHome)">
+ <i class="fas fa-home fa-3x left_menu_item_icn"></i>
+ <p>Go back to my capsules</p>
+ </a>
<div class="left_menu_item dropable" id="left_menu_item_settings" title="Settings">
<div class="left_menu_item_icn" id="left_menu_item_icn_settings"></div>
<div class="left_menu_item_title">Settings</div>
- <div class="left_menu_item_value"></div>
</div>
<div class="left_menu_item dropable" id="left_menu_item_preview" title="Preview">
<div class="left_menu_item_icn" id="left_menu_item_icn_preview"></div>
<div class="left_menu_item_title">Preview</div>
- <div class="left_menu_item_value"></div>
</div>
</div>
<div class='bottom'>
<div class="left_menu_item dropable" id="left_menu_item_addlink" title="AddLink">
<div class="left_menu_item_icn" id="left_menu_item_icn_addlink"></div>
<div class="left_menu_item_title">Add Link</div>
- <div class="left_menu_item_value"></div>
</div>
<div class="left_menu_item dropable" id="left_menu_item_addnote" title="AddNote">
<div class="left_menu_item_icn" id="left_menu_item_icn_addnote"></div>
<div class="left_menu_item_title">Add Note</div>
- <div class="left_menu_item_value"></div>
</div>
<div class="left_menu_item dropable" id="left_menu_item_addfile" title="AddFile">
- <form id="uploadForm" action="php/upload.php" method="post" enctype="multipart/form-data">
- <input type="file" name="fileToUpload[]" multiple="multiple" id="left_menu_item_btn_addfile">
- </form>
<div class="left_menu_item_icn" id="left_menu_item_icn_addfile"></div>
<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>
</div>
</div>
- <!--
- <table id='left_menu' class="editmode">
- <tr><td id="left_menu_top">
- <div class="left_menu_item dropable">
- <a href="javascript:window.app.rekall.Rekall('openUrl', window.app.urls.memberHome)" >
- <div><i class="fas fa-home fa-3x left_menu_item_icn"></i></div>
- Go back to my capsules
- </a>
- </div>
- <div class="left_menu_item dropable" id="left_menu_item_settings" title="Settings">
- <div class="left_menu_item_icn" id="left_menu_item_icn_settings"></div>
- <div class="left_menu_item_title">Settings</div>
- <div class="left_menu_item_value"></div>
- </div>
- <div class="left_menu_item dropable" id="left_menu_item_preview" title="Preview">
- <div class="left_menu_item_icn" id="left_menu_item_icn_preview"></div>
- <div class="left_menu_item_title">Preview</div>
- <div class="left_menu_item_value"></div>
- </div>
- </tr></td>
- <tr><td id="left_menu_bottom">
- <div class="left_menu_item dropable" id="left_menu_item_addlink" title="AddLink">
- <div class="left_menu_item_icn" id="left_menu_item_icn_addlink"></div>
- <div class="left_menu_item_title">Add Link</div>
- <div class="left_menu_item_value"></div>
- </div>
- <div class="left_menu_item dropable" id="left_menu_item_addnote" title="AddNote">
- <div class="left_menu_item_icn" id="left_menu_item_icn_addnote"></div>
- <div class="left_menu_item_title">Add Note</div>
- <div class="left_menu_item_value"></div>
- </div>
- <div class="left_menu_item dropable" id="left_menu_item_addfile" title="AddFile">
- <form id="uploadForm" action="php/upload.php" method="post" enctype="multipart/form-data">
- <input type="file" name="fileToUpload[]" multiple="multiple" id="left_menu_item_btn_addfile">
- </form>
- <div class="left_menu_item_icn" id="left_menu_item_icn_addfile"></div>
- <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>
- -->
- <div id='tabs' class='flex-col'>
+ <div id='tabs' class='flex flex-col'>
- <div id='tab_selector' class='flex-row'>
- <div id='video_tab'></div>
- <div id='mosaic_tab'></div>
+ <div id='tab_selector_btn' class='flex-row editmode'>
+ <div id='video_tab_btn' class='flex tab_selector_btn enabled'><p>Video</p></div>
+ <div id='mosaic_tab_btn' class='flex tab_selector_btn disabled'><p>Notes</p></div>
</div>
<div class='flex-row'>
@@ -304,12 +246,7 @@
<p id='videoProgress'> </p>
</div>
</div>
- <div id='mosaicTab'>
- <div id="popupMosaic">
- <div id="popupMosaicMessage">Notes and documents</div>
- <div id="popupMosaicMosaic"></div>
- </div>
- </div>
+ <div id='mosaic_tab'></div>
</div>
</div>
</body>
diff --git a/capsule-prototype/js/online-script.js b/capsule-prototype/js/online-script.js
index 60fcd2269f5d43597e7ab4e70014e26014d2c12e..f62ca790b44f4ab8bc89ca8f3789153f88cec7e1 100644
--- a/capsule-prototype/js/online-script.js
+++ b/capsule-prototype/js/online-script.js
@@ -322,6 +322,7 @@ function setEditionControls() {
$("#left_menu_item_addfile").mousedown(function(event) {
rekall.timeline.pause();
+ $("#left_menu_item_btn_addfile").click();
});
$("#left_menu_item_btn_addfile").change(function(event){
event.stopPropagation();
@@ -357,15 +358,22 @@ function setEditionControls() {
}
});
- $("#mosaic_tab").click(function(event){
+ $("#mosaic_tab_btn").click(function(event){
event.stopPropagation();
rekall.timeline.pause();
- openMosaic();
+ openMosaic();
+ $('#mosaic_tab_btn').addClass('enabled');
+ $('#video_tab_btn').removeClass('enabled');
});
- $("#video_tab").click(function(event){
+ $("#video_tab_btn").click(function(event){
event.stopPropagation();
- closeMosaic();
+ $("#mosaic_tab").hide();
+
+ $('#flattentimeline').show();
+ rekall.videoPlayer.show();
+ $('#video_tab_btn').addClass('enabled');
+ $('#mosaic_tab_btn').removeClass('enabled');
});
@@ -837,10 +845,11 @@ function openMosaic() {
.append($('<h2/>').text(text));
}
- $("#mosaicTab").show();
- $('#flattentimeline').hide();
- rekall.videoPlayer.hide();
- let container = $('#mosaicTab');
+ $('#flattentimeline').hide();
+ rekall.videoPlayer.hide();
+
+ $("#mosaic_tab").show();
+ let container = $('#mosaic_tab');
container.html('');
let filterdiv = $('<div/>').addClass('mosaic_filter');
filterdiv.append(getFilterElement(
@@ -897,11 +906,6 @@ function getTagGradientColor(tag) {
}
}
-function closeMosaic() {
- $("#mosaicTab").hide();
- $('#flattentimeline').show();
- rekall.videoPlayer.show();
-}
function fillPopupEdit(tag) {
@@ -1281,4 +1285,4 @@ $(window).resize(function(e) {
$("#video").addClass("resized");
}
});
-$(window).trigger("resize");
\ No newline at end of file
+$(window).trigger("resize");
diff --git a/legacy/create.zip b/legacy/create.zip
index 7bd279e73b63eb21c0d4ba427a115dd0ebf1ab8a..2d0bd631b8ae1e3638feb25fc78389616d840e61 100644
Binary files a/legacy/create.zip and b/legacy/create.zip differ
diff --git a/tools/update_capsule_html.sh b/tools/update_capsule_html.sh
new file mode 100755
index 0000000000000000000000000000000000000000..ff2f0c910f4958a04f28cb8ceb26969d361ce8ff
--- /dev/null
+++ b/tools/update_capsule_html.sh
@@ -0,0 +1,4 @@
+#!/bin/sh
+
+( cd capsule-prototype && zip -ru ../legacy/create.zip .htaccess * )
+find legacy -type f -name 'index.html' -exec cp capsule-prototype/index.html {} \;