Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
435c3c633811ea5164311caefc7d94de1595c435
edx-platform/common/static/css/vendor/ova/ova.css
daniel cebrian 7e2652b5a8 annotation tools 
First set of fixes from the pull request

This does not include some of the testing files. The textannotation and
videoannotation test files are not ready. waiting for an answer on the
issue.

Deleted token line in api.py and added test for token generator

Added notes_spec.coffee

remove spec file

fixed minor error with the test

fixes some quality errors

fixed unit test

fixed unit test

added advanced module

Added notes_spec.coffee

remove spec file

Quality and  Testing Coverage

1. in test_textannotation.py I already check for line 75 as it states
in the diff in line 43, same with test_videoanntotation
2. Like you said, exceptions cannot be checked for
firebase_token_generator.py. The version of python that is active on
the edx server is 2.7 or higher, but the code is there for correctness.
Error checking works the same way.
3. I added a test for student/views/.py within tests and deleted the
unused secret assignment.
4. test_token_generator.py is now its own file

Added Secret Token data input

fixed token generator

Annotation Tools in Place

The purpose of this pull request is to install two major modules: (1) a
module to annotate text and (2) a module to annotate video. In either
case an instructor can declare them in advanced settings under
advanced_modules and input content (HTML in text, mp4 or YouTube videos
for video). Students will be able to highlight portions and add their
comments as well as reply to each other. There needs to be a storage
server set up per course as well as a secret token to talk with said
storage.

Changes:
1. Added test to check for the creation of a token in tests.py (along
with the rest of the tests for student/view.py)
2. Removed items in cms pertaining to annotation as this will only be
possible in the lms
3. Added more comments to firebase_token_generator.py, the test files,
students/views.py
4. Added some internationalization stuff to textannotation.html and
videoannotation.html. I need some help with doing it in javascript, but
the html is covered.

incorporated lib for traslate

fixed quality errors

fixed my notes with catch token

Text and Video Annotation Modules - First Iteration

The following code-change is the first iteration of the modules for
text and video annotation.

Installing Modules:
1. Under “Advanced Settings”, add “textannotation” and
“videoannotation” to the list of advanced_modules.
2. Add link to an external storage for annotations under
“annotation_storage_url”
3. Add the secret token for talking with said storage under
“annotation_token_secret”

Using Modules
1. When creating  new unit, you can find Text and Video annotation
modules under “Advanced” component
2. Make sure you have either Text or Video in one unit, but not both.
3. Annotations are only allowed on Live/Public version and not Studio.

Added missing templates and fixed more of the quality errors

Fixed annotator not existing issue in cmd and tried to find the get_html() from the annotation module class to the descriptor

Added a space after # in comments

Fixed issue with an empty Module and token links

Added licenses and fixed vis naming scheme and location.
2014-01-27 13:47:58 -05:00

606 lines
23 KiB
CSS
Raw Blame History

/* --- BigNewAnnotation --- */
.vjs-default-skin .vjs-big-new-annotation{
float: left;
cursor: pointer;
line-height: 1.6em;
margin: 3% 3% 3% 4%;
top: 41%;
width: 6em;
height: 6em;
background-color: rgba(7,40,50,.7);
border-radius: 6px;
border: 0.25em solid #ccc;
}
.vjs-default-skin .vjs-big-new-annotation div{
width: 100%;
height: 100%;
top: 0em;
font-weight: bold;
font-size: 600%;
padding-top: 0.32em;
}
.vjs-default-skin.vjs-fullscreen .vjs-big-new-annotation{
top: 68%;
width: 8em;
height: 8em;
}
.vjs-default-skin.vjs-fullscreen .vjs-big-new-annotation div{
font-size: 750%;
padding-top: 42%;
}
.vjs-default-skin .vjs-big-new-annotation div:hover {
-webkit-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
-moz-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
box-shadow: 0 0 1em rgba(255, 255, 255, 1);
}
div.video-js > div.vjs-big-new-annotation {
visibility:hidden;
opacity:0;
-webkit-transition: visibility 0s linear 1s,opacity 1s linear;
-moz-transition: visibility 0s linear 1s,opacity 1s linear;
-o-transition: visibility 0s linear 1s,opacity 1s linear;
transition:visibility 0s linear 1s,opacity 1s linear;
}
div.video-js:hover > div.vjs-big-new-annotation {
visibility:visible;
opacity:1;
transition-delay:0s;
}
.vjs-default-skin .vjs-big-new-annotation.ul{
top:0%;
}
.vjs-default-skin .vjs-big-new-annotation.ur{
top:0%;
float:right;
}
.vjs-default-skin .vjs-big-new-annotation.br{
float:right;
}
.vjs-default-skin .vjs-big-new-annotation.c{
top:24%;
left:40%;
}
div.video-js:hover > div.vjs-big-new-annotation.none {
visibility:hidden;
}
.vjs-default-skin.vjs-fullscreen .vjs-big-new-annotation.c{
top:35%;
}
/* --- ControlBar --> AnContainerButtons --- */
.vjs-default-skin .vjs-container-button-annotation{
width: 101px;
}
/* --- ControlBar --> AnContainerButtons --> ShowStatistics --- */
/* --- ControlBar --> AnContainerButtons --> NewAnnotation --- */
/* --- ControlBar --> AnContainerButtons --> ShowAnnotations --- */
.vjs-default-skin .vjs-statistics-annotation,
.vjs-default-skin .vjs-showannotations-annotation,
.vjs-default-skin .vjs-new-annotation{
float: right;
cursor: pointer;
line-height: 1.6em;
background-position: left top;
margin: 4px;
width: 23px;
height: 21px;
background-repeat: no-repeat;
}
.vjs-default-skin .vjs-statistics-annotation.active,
.vjs-default-skin .vjs-showannotations-annotation.active,
.vjs-default-skin .vjs-statistics-annotation:hover,
.vjs-default-skin .vjs-showannotations-annotation:hover,
.vjs-default-skin .vjs-new-annotation:hover {
background-position: center top;
}
.vjs-default-skin .vjs-statistics-annotation:active,
.vjs-default-skin .vjs-showannotations-annotation:active,
.vjs-default-skin .vjs-new-annotation:active {
background-position: center right;
}
.vjs-default-skin .vjs-new-annotation {
background-image: url('data:image/png;base64,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');
}
.vjs-default-skin .vjs-showannotations-annotation {
background-image: url('data:image/png;base64,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');
}
.vjs-default-skin .vjs-statistics-annotation {
background-image: url('data:image/png;base64,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');
}
/* --- ControlBar --> BackAnDisplay --- */
.vjs-default-skin .vjs-back-anpanel-annotation{
float: left;
left: 0em;
right: 0em;
position:absolute;
background-color: rgba(0,0,0,0.3);
width: auto;
/*font-size: .3em;*/
font-size: .9em;
-webkit-transition: top .4s,height .4s,font-size .4s,-webkit-transform .4s;
-moz-transition: top .4s,height .4s,font-size .4s,-moz-transform .4s;
-o-transition: top .4s,height .4s,font-size .4s,-o-transform .4s;
transition: top .4s,height .4s,font-size .4s,transform .4s;
opacity:1;
visibility:visible;
transition-delay:0s;
}
/* --- ControlBar --> BackAnDisplay --> RangeSelectorDisplay --- */
.vjs-default-skin .vjs-rangeselector-anpanel-annotation{
height: 100%;
width: 100%;
position: absolute;
top: -1em;
}
.vjs-default-skin .vjs-back-anpanel-annotation.statistics .vjs-rangeselector-anpanel-annotation{
z-index:2;
}
/* RangeSelectorLeft */
.vjs-default-skin .vjs-leftselector-anpanel-annotation{
height: 100%;
margin-top: 1em;
width:0%;
float:left;
position:absolute;
left: 0%;
}
.vjs-default-skin .vjs-leftselector-anpanel-annotation .vjs-selector-arrow{
z-index:10;
border-left: 1em solid #FFE800;
cursor: e-resize;
}
.vjs-default-skin .vjs-leftselector-anpanel-annotation .vjs-leftselector-back{
right:100%;
border-right: 1px dashed #FFE800;
}
.vjs-default-skin .vjs-leftselector-anpanel-annotation.include .vjs-leftselector-back{
border-right: 1px dashed rgb(255, 163, 0);
}
.vjs-default-skin .vjs-leftselector-anpanel-annotation.include .vjs-selector-arrow{
border-left: 1em solid rgb(255, 163, 0);
}
/* RangeSelectorRight */
.vjs-default-skin .vjs-rightselector-anpanel-annotation{
height: 100%;
margin-top: 1em;
width:100%;
float:right;
position:absolute;
}
.vjs-default-skin .vjs-rightselector-anpanel-annotation .vjs-selector-arrow{
z-index:20;
border-right: 1em solid #FFE800;
margin-left: -1em;
cursor: w-resize;
}
.vjs-default-skin .vjs-rightselector-anpanel-annotation .vjs-rightselector-back{
border-left: 1px dashed #FFE800;
}
.vjs-default-skin .vjs-rightselector-anpanel-annotation.include .vjs-rightselector-back{
border-left: 1px dashed rgb(255, 163, 0);
}
.vjs-default-skin .vjs-rightselector-anpanel-annotation.include .vjs-selector-arrow{
border-right: 1em solid rgb(255, 163, 0);
}
.vjs-default-skin .vjs-leftselector-back,
.vjs-default-skin .vjs-rightselector-back{
height: 100%;
width: 100%;
position:absolute;
background-color: rgba(0,0,0,0.6);
}
.vjs-default-skin .vjs-selector-arrow{
width: 0;
height: 0;
border-top: 1em solid transparent;
border-bottom: 1em solid transparent;
opacity: 0.8;
position: absolute;
top: -2em;
}
/* RangeSelectorBar */
.vjs-default-skin .vjs-barselector-anpanel-annotation{
height: 2em;
margin-top: -1em;
background-color: rgba(0,0,0,0.6);
border: 1px solid rgba(255,255,255,0.6);
position: absolute;
float: left;
visibility:visible;
transition-delay:0s;
}
.vjs-default-skin .vjs-barselector-anpanel-annotation.disable{
visibility:hidden;
opacity:0;
-webkit-transition: visibility 0.5s linear 0.5s,opacity 0.5s linear;
-moz-transition: visibility 0.5s linear 0.5s,opacity 0.5s linear;
-o-transition: visibility 0.5s linear 0.5s,opacity 0.5s linear;
transition:visibility 0.5s linear 0.5s,opacity 0.5s linear;
}
.vjs-default-skin .vjs-barselector-anpanel-annotation .vjs-barselector-left{
float: left;
left: 1em;
}
.vjs-default-skin .vjs-barselector-anpanel-annotation .vjs-barselector-right{
right: 1em;
float: right;
}
.vjs-default-skin .vjs-barselector-anpanel-annotation .vjs-barselector-right,
.vjs-default-skin .vjs-barselector-anpanel-annotation .vjs-barselector-left{
height: 2em;
font-size: 1.3em;
position: absolute;
}
.vjs-default-skin .vjs-rangeselector-anpanel-annotation.active .vjs-barselector-anpanel-annotation{
z-index: 1;
}
/* --- ControlBar --> BackAnDisplay --> AnDisplay --- */
.vjs-default-skin .vjs-anpanel-annotation{
float: left;
width: 100%;
height: 100%;
left: 0em;
right: 0em;
position:absolute;
/*background-color: #FFE800;
background: #FFE800;
background: -moz-linear-gradient(top, #FFE800, #A69700);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFE800), to(#A69700));
background: -webkit-linear-gradient(top, #FFE800, #A69700);
background: -o-linear-gradient(top, #FFE800, #A69700);
background: -ms-linear-gradient(top, #FFE800, #A69700);
background: linear-gradient(top, #FFE800, #A69700);*/
opacity: 0.8;
overflow: hidden;
}
.vjs-default-skin .vjs-anpanel-annotation .annotation{
height: 1em;
float: left;
width: 100%;
left: 0em;
right: 0em;
cursor:pointer;
position:absolute;
background-color: #FFE800;
background: #FFE800;
background: -moz-linear-gradient(top, #FFE800, #A69700);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFE800), to(#A69700));
background: -webkit-linear-gradient(top, #FFE800, #A69700);
background: -o-linear-gradient(top, #FFE800, #A69700);
background: -ms-linear-gradient(top, #FFE800, #A69700);
background: linear-gradient(top, #FFE800, #A69700);
opacity: 0.8;
}
.vjs-default-skin .vjs-anpanel-annotation .annotation.active {
background-color: #2DCF02;
background: #2DCF02;
background: -moz-linear-gradient(top, #2DCF02, #114F01);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2DCF02), to(#114F01));
background: -webkit-linear-gradient(top, #2DCF02, #114F01);
background: -o-linear-gradient(top, #2DCF02, #114F01);
background: -ms-linear-gradient(top, #2DCF02, #114F01);
background: linear-gradient(top, #2DCF02, #114F01);
z-index: 1;
}
.vjs-default-skin .vjs-anpanel-annotation .annotation.point {
border-radius: 50%;
width: 1em;
height: 1em;
margin-left: -0.4em;
}
.vjs-default-skin .vjs-back-anpanel-annotation.statistics .vjs-anpanel-annotation{
visibility:hidden;
}
/* --- ControlBar --> BackAnDisplay --> AnStat --- */
.vjs-default-skin .vjs-anstat-annotation{
float: left;
width: 100%;
height: 100%;
left: 0em;
right: 0em;
position: absolute;
opacity: 0.8;
visibility:visible;
transition-delay:0s;
font-size: 1.2em;
}
.vjs-default-skin .vjs-anstat-annotation.disable{
visibility:hidden;
opacity:0;
}
.vjs-default-skin .vjs-totan-anstat-annotation,
.vjs-default-skin .vjs-maxcon-anstat-annotation{
position: absolute;
top: 0.3em;
background-color: rgba(0,0,0,0.5);
border-radius: 0.5em;
padding: 0.1em;
color: rgb(255, 163, 0);
}
.vjs-default-skin .vjs-totan-anstat-annotation{
float: right;
right:1em;
}
.vjs-default-skin .vjs-maxcon-anstat-annotation{
float: left;
left:1em;
}
/* --- ControlBar --> BackAnDisplay --> --- */
.vjs-default-skin .dashed-line{
float: left;
right: 0em;
position:absolute;
color: #2DCF02;
border-left:0.23em dashed #2DCF02;
border-right:0.23em dashed #2DCF02;
opacity: 0.8;
}
.vjs-default-skin .dashed-line.point{
border-right:0;
}
.vjs-default-skin .box-dashed-line{
height: 1em;
float: left;
right: 0em;
color: #2DCF02;
position:absolute;
background-color:#2DCF02;
opacity: 0.8;
}
.vjs-default-skin .boxup-dashed-line{
height: 1em;
float: left;
right: 0em;
color: #2DCF02;
position:absolute;
opacity: 0.8;
background-color: #2DCF02;
background: #2DCF02;
background: -moz-linear-gradient(top, #2DCF02, #114F01);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2DCF02), to(#114F01));
background: -webkit-linear-gradient(top, #2DCF02, #114F01);
background: -o-linear-gradient(top, #2DCF02, #114F01);
background: -ms-linear-gradient(top, #2DCF02, #114F01);
background: linear-gradient(top, #2DCF02, #114F01);
z-index: 4;
-webkit-transition: top 1s,-webkit-transform .4s;
-moz-transition: top 1s,-moz-transform .4s;
-o-transition: top 1s,-o-transform .4s;
transition: top 1s,transform .4s;
}
.vjs-default-skin .boxup-dashed-line.point{
border-radius: 50%;
width: 1em;
height: 1em;
margin-left: -0.4em;
}
/* --- ControlBar --> BackAnDisplay --> BackAnDisplayScroll --- */
.vjs-default-skin .vjs-down-scroll-annotation,
.vjs-default-skin .vjs-up-scroll-annotation{
width:2em;
height:2em;
float: left;
right: 0em;
position:absolute;
cursor: pointer;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
/*font-size: .3em;*/
font-size: .9em;
-webkit-transition: top .4s,height .4s,font-size .4s,-webkit-transform .4s;
-moz-transition: top .4s,height .4s,font-size .4s,-moz-transform .4s;
-o-transition: top .4s,height .4s,font-size .4s,-o-transform .4s;
transition: top .4s,height .4s,font-size .4s,transform .4s;
opacity: 0.8;
transition-delay:0s;
}
.vjs-default-skin .vjs-up-scroll-annotation{
border-bottom: 1em solid black;
}
.vjs-default-skin .vjs-down-scroll-annotation{
top: -3em;
border-top: 1em solid black;
}
.vjs-default-skin .vjs-scroll-anpanel-annotation.disable,
.vjs-default-skin .vjs-back-anpanel-annotation.disable{
visibility:hidden;
opacity:0;
/*-webkit-transition: visibility 1s linear 1s,opacity 1s linear;
-moz-transition: visibility 1s linear 1s,opacity 1s linear;
-o-transition: visibility 1s linear 1s,opacity 1s linear;
transition:visibility 1s linear 1s,opacity 1s linear;*/
}
.vjs-default-skin:hover .vjs-back-anpanel-annotation,
.vjs-default-skin:hover .vjs-down-scroll-annotation,
.vjs-default-skin:hover .vjs-up-scroll-annotation {
font-size: .9em;
-webkit-transition: top .2s,height .2s,font-size .2s,-webkit-transform .2s;
-moz-transition: top .2s,height .2s,font-size .2s,-moz-transform .2s;
-o-transition: top .2s,height .2s,font-size .2s,-o-transform .2s;
transition: top .2s,height .2s,font-size .2s,transform .2s;
}
/* --- ControlBar --> BackAnDisplay --> BackAnDisplayScroll--> BackAnDisplayScrollBar --- */
.vjs-default-skin .vjs-scrollbar-anpanel-annotation{
float: left;
position: absolute;
cursor: pointer;
right: 0.5em;
width: 1em;
/*font-size: .3em;*/
font-size: .9em;
background-color: black;
opacity: 0.8;
visibility:visible;
transition-delay:0s;
-webkit-transition: top .4s,height .4s,font-size .4s,-webkit-transform .4s;
-moz-transition: top .4s,height .4s,font-size .4s,-moz-transform .4s;
-o-transition: top .4s,height .4s,font-size .4s,-o-transform .4s;
transition: top .4s,height .4s,font-size .4s,transform .4s;
}
.vjs-default-skin .vjs-scrollbar-anpanel-annotation.disable{
visibility:hidden;
opacity:0;
-webkit-transition: visibility 1s linear 1s,opacity 1s linear;
-moz-transition: visibility 1s linear 1s,opacity 1s linear;
-o-transition: visibility 1s linear 1s,opacity 1s linear;
transition:visibility 1s linear 1s,opacity 1s linear;
}
.vjs-default-skin .vjs-scrollbar-anpanel-annotation:hover{
opacity: 0.8;
visibility:visible;
transition-delay:0s;
}
.vjs-default-skin:hover .vjs-scrollbar-anpanel-annotation{
font-size: .9em;
}
.vjs-default-skin .vjs-scrollbar-selector{
width: 1em;
background-color: gray;
border: 1px solid black;
position:absolute;
height: 3em;
border-radius: 0.4em;
}
/* --- ControlBar --> BackAnDisplay --> BackAnDisplayScroll--> BackAnDisplayScrollTime --- */
.vjs-default-skin .vjs-down-scrolltime-annotation,
.vjs-default-skin .vjs-up-scrolltime-annotation{
width: 100%;
height:1em;
float: left;
position:absolute;
font-size: .9em;
opacity: 0.8;
transition-delay:0s;
right: 3em;
text-align: right;
margin-top:0.2em;
}
.vjs-default-skin .vjs-down-scrolltime-annotation{
top: -2.6em;
margin-top: -0.2em;
}
.vjs-default-skin .vjs-scrolltime-anpanel-annotation span{
font-size: 1.3em;
background-color: rgba(0,0,0,1);
border-radius: 0.5em;
padding: 0.1em;
border: 0.1em solid white;
padding-left: 0.4em;
padding-right: 0.4em;
}
/* ---------------- Modify the CSS of Annotator plugin ---------------- */
.annotator-wrapper.vjs-fullscreen .annotator-adder,
.annotator-wrapper.vjs-fullscreen .annotator-outer,
.annotator-wrapper.vjs-fullscreen .annotator-widget,
.annotator-wrapper.vjs-fullscreen .annotator-notice {
z-index:3000000000; /*To fix full-screen*/
}
/* ---------------- Modify the CSS of Video-js plugin ---------------- */
.vjs-default-skin *, .vjs-default-skin *:before, .vjs-default-skin *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* ---------------- Modify the CSS of Range Slider plugin ---------------- */
/* Selection bar in green color */
.vjs-default-skin .vjs-rangeslider-holder.locked span.annotator-hl > div.vjs-selectionbar-RS {
background-color: #2DCF02;
background: #2DCF02;
background: -moz-linear-gradient(top, #2DCF02, #114F01);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2DCF02), to(#114F01));
background: -webkit-linear-gradient(top, #2DCF02, #114F01);
background: -o-linear-gradient(top, #2DCF02, #114F01);
background: -ms-linear-gradient(top, #2DCF02, #114F01);
background: linear-gradient(top, #2DCF02, #114F01);
}
.vjs-default-skin div.vjs-rangeslider-holder.locked .vjs-rangeslider-handle > div.vjs-selectionbar-line-RS {
background-color: #2DCF02;
}
.vjs-default-skin div.vjs-rangeslider-holder.locked .vjs-rangeslider-handle > div.vjs-selectionbar-arrow-RS {
border-top-color: #2DCF02;
}
Reference in New Issue View Git Blame Copy Permalink