Commit fc18f0aa authored by Mathieu Giraud's avatar Mathieu Giraud
Browse files

Merge branch 'feature-c/aligner' into 'dev'

New sequence aligner

See merge request !836
parents 315c4bfb efe44b67
Pipeline #232561 failed with stages
in 9 minutes and 57 seconds
......@@ -3,10 +3,10 @@ LESSC=lessc
all: dark.css light.css svg.css talk.css segmenter_page.css
dark.css: dark.less vidjil.less
dark.css: dark.less vidjil.less aligner.less
$(LESSC) dark.less dark.css
light.css: light.less vidjil.less
light.css: light.less vidjil.less aligner.less
$(LESSC) light.less light.css
talk.css: talk.less light.less vidjil.less
......
@sequenceLineHeight : 30px;
.segmenter .axisBox>span {
margin : 0 3px;
background: @background;
}
.bot-bar {
-khtml-user-select: none;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
border-color: @border;
border: solid;
border-width: 1px;
}
.stats {
position: relative;
text-align: right;
float: right;
width: @width_stats - 3px;
padding: 2px 5px;
overflow: hidden;
height: 16px;
}
.list_select{
display : block;
border : solid;
border-width : 2px;
padding : 0px;
border-color : @select;
}
.list_focus{
background : @border !important;
}
.sequence-line {
white-space: nowrap;
height: @sequenceLineHeight;
}
/*
.sequence-line:hover {
font-weight: bold;
}
*/
.seq-fixed {
position: relative;
display: flex;
width: (@width_left_container - @width_scrollbar);
height: @sequenceLineHeight;
margin: -2px;
padding: 5px;
left:0px;
cursor:pointer;
z-index:5;
}
.seq-mobil {
font-family : @monospace-font;
top: 0px;
left: 455px;
position: absolute;
font-size:1em;
display: inline-block;
height: @sequenceLineHeight;
}
.seq-marge {
word-spacing: normal;
}
.V {
color: #000;
background-color: #efe;
}
.D {
color: #000;
background-color: #fee;
}
.J {
color: #000;
background-color: #ffffe2;
}
.N, .N + .J, .N + .D {
box-shadow: -1px 0 0 @default;
}
.highlight_border, .highlight_seq {
display: inline-flex;
height: 1em;
position: relative;
}
.highlight_border {
border-bottom: solid;
margin: -1px;
border-width: 4px;
-khtml-user-select: none;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
opacity: 0.3;
bottom: 1px;
}
.highlight_seq {
top: .9em;
padding-bottom: 1px;
opacity: 0.6;
font-size: 70%;
letter-spacing: .428em; /* (1-.7) / .7 */
left: .214em;
}
.highlight{
display: inline-block;
width: 0px;
word-spacing: normal;
}
span .substitution, span .indel, span .insertion, span .deletion {
font-weight: bold;
color: #800;
}
span .substitution {
border-bottom: 1px solid #800;
}
span .silent {
border-bottom: 3px double #008;
color: #008;
}
span .end-codon {
box-shadow: 1px 0 0 @default;
}
#segmenter_axis_menu, .seq-fixed{
background : @background;
}
.menu-segmenter {
position: relative;
float: left;
width: @width_left_container +200;
}
#toIMGTSeg {
width: 12px;
display: inline-block;
text-align: center;
}
.menu-highlight {
position: relative;
float: left;
width: eval(@width_highlight);
}
.segmenter {
overflow-x: scroll !important;
overflow-y: auto;
min-height : 130px;
margin-top: 1px;
}
#segmenter {
display: flex;
flex-flow: column;
}
#highlightCheckboxes {
height: 100%;
float: left;
}
.seq-fixed {
bottom: 1px;
}
.aligner-menu{
display:inline-block;
padding: 2px 10px;
}
.aligner-menu:hover{
cursor: pointer;
background-color: #ddd
}
.aligner-button{
cursor: pointer;
font-size: 13px;
min-width: 16px;
color: #657b83;
}
.aligner-menu:hover .menu-content{
display: block;
}
.menu-content{
display: none;
position: absolute;
bottom: 154px;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.menu-content a{
padding: 8px 12px;
text-decoration: none;
display: block;
}
.menu-content label{
padding: 8px 12px;
text-decoration: none;
display: block;
cursor: pointer;
}
.menu-content a:hover{
background-color: #ddd
}
.menu-content label:hover{
background-color: #ddd
}
.seq_layer{
position:absolute;
top: 0px;
}
.seq_layer_text{
position: absolute;
top: 5px;
z-index: 3;
}
.seq_layer_text2{
position: absolute;
top: 20px;
-webkit-transform:scale(1,0.5); /* Safari and Chrome */
-moz-transform:scale(1,0.5); /* Firefox */
-ms-transform:scale(1,0.5); /* IE 9 */
-o-transform:scale(1,0.5); /* Opera */
transform:scale(1,0.5); /* W3C */
}
.seq_layer_highlight{
border-left: solid black 1px;
border-right: solid black 1px;
opacity: 0.1;
height:15px;
top:5px;
margin-left: -2px;
padding-right: 4px;
}
.seq_layer_bracket{
height: 2px;
top: 21px;
border: solid;
border-top: none;
border-width: 2px;
margin: -2px;
opacity : 0.6;
z-index: 1;
margin-left: -3px;
padding-right: 2px;
}
.seq_layer_bracket_top{
height: 2px;
top: 4px;
border: solid;
border-bottom: none;
border-width: 2px;
margin: -2px;
opacity : 0.6;
z-index: 1;
margin-left: -3px;
padding-right: 2px;
}
.seq_layer_underline{
border-left: solid black 1px;
border-right: solid black 1px;
height: 3px;
top: 18px;
opacity : 0.3;
z-index: 2;
margin-left: -2px;
padding-right: 4px;
}
.seq_layer_quality{
height: 5px;
top: 24px;
z-index: 2;
}
.seq_quality_block{
opacity: 1;
height: 5px;
float: left;
}
.seq_quality_block:hover{
opacity: 0.5;
}
.seq_layer_bracket:hover, .seq_layer_bracket_top:hover{
border-width :4px;
opacity : 1;
}
.seq_layer_underline:hover{
height: 5px;
opacity : 1;
}
\ No newline at end of file
......@@ -38,7 +38,7 @@ svg {
.cloneName {
font-family: ubuntumedium, Arial Bold, Helvetica, Sans-serif;
}
.seq-fixed .cloneName,
.cloneName,
.listElem .cloneName {
bottom: 1px;
}
......@@ -118,7 +118,7 @@ ul {
position: fixed;
top: 32px;
left: 0;
bottom: 125px ;
bottom: 155px;
background: #000000;
margin: 6px;
display: flex;
......@@ -126,15 +126,22 @@ ul {
overflow: hidden;
}
.vidjil-panels-left {
width: calc(100% - 6px - 70px);
width: calc(100% - -64px);
}
.vidjil-panels-full {
width: calc(100% - 6px);
}
#mid-container {
position: fixed;
display: flex;
flex: auto;
flex: 1 1 auto;
top: 32px;
bottom: 155px;
width: calc(100% - 12px);
overflow: hidden;
background: #000000;
margin: 6px 0px 0px 0px;
border-bottom-color: white;
}
#right-container {
display: flex;
......@@ -243,12 +250,12 @@ line {
}
.axis_m {
stroke: #839496;
opacity: 0.5;
opacity: 0.5 ;
stroke-width: 20px;
}
.axis_m_other {
stroke: #839496;
opacity: 0.25;
opacity: 0.25 ;
stroke-width: 10px;
display: none;
}
......@@ -336,7 +343,7 @@ line {
.circle {
cursor: pointer;
-webkit-transition: fill 0.2s;
-o-transition: fill 0.2s;
-o-transition: fill 0.2s;
-ms-transition: fill 0.2s;
transition: fill 0.2s;
fill: #839496;
......@@ -474,7 +481,7 @@ line {
font-size: 13px;
cursor: pointer;
-webkit-transition: color 0.2s;
-o-transition: color 0.2s;
-o-transition: color 0.2s;
-ms-transition: color 0.2s;
transition: color 0.2s;
padding: 1px 4px 4px 1px;
......@@ -491,11 +498,7 @@ line {
height: 16px;
position: relative;
white-space: nowrap;
display: flex;
flex: 1 1 auto;
}
.seq-fixed .nameBox {
width: 250px;
flex: 1 1000 auto;
}
.list .axisBox,
.axisBox span {
......@@ -505,9 +508,6 @@ line {
max-height: 16px;
position: relative;
}
.segmenter .axisBox > span {
margin: 0 3px;
}
.identityBox {
font-family: ubuntulight, Arial, Helvetica, Sans-serif;
text-align: right;
......@@ -576,6 +576,10 @@ line {
min-width: 60px;
padding: 2px 2px 1px 2px;
cursor: pointer;
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
.hiddenCheckBox {
display: none;
......@@ -604,111 +608,6 @@ line {
margin-right: 20px;
float: right;
}
/*style segmenter element*/
.list_select {
border: solid;
border-width: 2px;
padding: 0px;
border-color: #fdf6e3;
}
.list_focus {
background: #333333 !important;
}
.sequence-line {
white-space: nowrap;
}
.sequence-line:hover {
font-weight: bold;
}
.seq-fixed {
position: relative;
display: inline-flex;
width: auto;
margin: -2px;
padding: 2px;
padding-left: 5px;
left: 0px;
cursor: pointer;
z-index: 1;
}
.seq-mobil {
margin-left: 475px;
letter-spacing: 0.12em;
font-family: monospace, ubuntu_monobold, Courier New, monaco, terminal, courier, system;
position: relative;
bottom: 3px;
font-size: 1em;
}
.seq-marge {
word-spacing: normal;
}
.V {
color: #000;
background-color: #efe;
}
.D {
color: #000;
background-color: #fee;
}
.J {
color: #000;
background-color: #ffffe2;
}
.N,
.N + .J,
.N + .D {
box-shadow: -1px 0 0 #839496;
}
.highlight_border,
.highlight_seq {
display: inline-flex;
height: 1em;
position: relative;
}
.highlight_border {
border-bottom: solid;
margin: -1px;
border-width: 4px;
-khtml-user-select: none;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
opacity: 0.3;
bottom: 1px;
}
.highlight_seq {
top: 0.9em;
padding-bottom: 1px;
opacity: 0.6;
font-size: 70%;
letter-spacing: 0.428em;
/* (1-.7) / .7 */
left: 0.214em;
}
.highlight {
display: inline-block;
width: 0px;
word-spacing: normal;
}
span .substitution,
span .indel,
span .insertion,
span .deletion {
font-weight: bold;
color: #800;
}
span .substitution {
border-bottom: 1px solid #800;
}
span .silent {
border-bottom: 3px double #008;
color: #008;
}
span .end-codon {
box-shadow: 1px 0 0 #839496;
}
/*tag*/
.tagSelector {
padding: 5px;
......@@ -914,7 +813,7 @@ a.tag-link {
.modal.info-container {
top: 50px;
left: 495px;
max-width: calc(100% - (475px + 60px));
max-width: calc(100% - 535px);
height: calc(100% - 215px);
}
.modal.jstree-container {
......@@ -935,9 +834,7 @@ a.tag-link {
#list_clones,
#tagSelector,
#display-menu,
#bot-container,
#segmenter_axis_menu,
.seq-fixed {
#bot-container {
background: #000000;
}
.closeButton {
......@@ -958,9 +855,7 @@ a.tag-link {
.button_left {
cursor: pointer;
font-size: 13px;
padding: 0px 3px;
margin-right: 5px;
margin-left: 5px;
padding: 2px 5px;
min-width: 16px;
color: #839496;
}
......@@ -1010,58 +905,18 @@ span.logo {
font-size: 60% ;
font-weight: bold;
vertical-align: super;
opacity: 0.8;
opacity: .8;
color: #f88;
}
.bot-bar {
-khtml-user-select: none;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
height: 20px;
border-bottom: solid;
width: 100%;
padding-top: 2px;
}
.menu-segmenter {
position: relative;
float: left;
width: 475px 200;
}
#toIMGTSeg {
width: 12px;
display: inline-block;
text-align: center;
}
.menu-highlight {
position: relative;
float: left;
width: eval(300px);
}
.devel-mode,
.beta-mode {
display: none;
}
.focus {
position: relative;
text-align: center;