Skip to content
Snippets Groups Projects
Commit bb8e6ae5 authored by Alex ORLUC's avatar Alex ORLUC
Browse files

display rework

parent 14e6fe54
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
modules/visa/Views/signatureBook.html
+ 206
− 252
View file @ bb8e6ae5
<style> <style>
html{ .visaContent{
overflow: hidden; position: relative;
} height:100%;
label{ }
font-size: 9px;margin-top: 0px; .headerSignatureBook{
} border: solid 1px black;
#leftPanelThumbnails{ display: table;
height:100px; margin-bottom: 10px;
width:100%; white-space: nowrap;
background:white; text-align: center;
text-align:center; width: 100%;
overflow:auto; }
}
.rightPanelThumbnails{ .contentSignatureBook{
border:solid 1px; border: solid 1px black;
width:90%; display: table;
} width: 100%;
.rightPanelThumbnails:hover{ height:75vh;
width:95%; }
}
.rightPanelThumbnails:hover label{ .headerSignatureBook .item{
font-weight: bold; border-right: solid 1px black;
} display: table-cell;
.rightPanelSelectedThumbnail{ padding: 5px;
border:solid 3px; cursor: pointer;
} width: 5%;
.thumbnails_mails{ vertical-align: middle;
height: 100%; }
display: inline-block;
margin: 5px; .headerSignatureBook .others{
} border-right: solid 1px black;
.thumbnails_mails #thumnails_img{ display: table-cell;
border:solid 1px; padding: 5px;
height:60%; vertical-align: middle;
position:relative; }
}
.thumbnails_mails #thumnails_img:hover{ .headerSignatureBook .item.activeTabSignatureBook,.panelRight .rightPanelSelectedThumbnail{
opacity: 0.5; background: #009DC5;
} color:white;
.thumbnails_mails:hover label{ }
font-weight: bold; .contentLeft{
} border-right: solid 1px;
.thumbnails_mails #thumnails_img_selected{ vertical-align: top;
border:solid 3px; }
height:60%; .contentLeft, .contentRight{
position:relative; display: table-cell;
} width:50%;
iframe{ text-align: center;
width: 95%; }
height: 80%;
border: none; .visaContent iframe{
} margin: auto;
#headerSignatureBook{ width:95%;
border: solid 1px black; height: 100%;
height:30px; border: none;
width:100%; }
border-bottom: none;
} .contentLeft iframe{
#signatureBookContent{ height: 80%;
border: solid 1px black; }
/*display:table;*/ .panelRight{
height: 80vh; width: 2%;
width:100%; border-left: solid 1px;
overflow: hidden; vertical-align: top;
} }
#leftPanel, #rightPanel{
position: relative;
display:table-cell; .panelRight .item{
width:50%; padding:10px;
height:80vh; cursor: pointer;
margin:10px; }
background:white;
vertical-align:top; .contentRight .panelRight,.contentRight .contentShow{
overflow:hidden; display: table-cell;
} vertical-align: top;
#leftPanel hr{ height:75vh;
margin-top: 5px; }
margin-bottom: 5px; .contentLeft .contentShow{
background-color: #ccc; height: 75vh;
} }
#leftPanel .content{
height:98%; .contentRight .contentShow,.contentLeft .contentShow{
margin:5px; padding : 5px;
text-align:center; }
overflow:hidden;
} .infoPj{
#leftPanelShowDocument{ width: 33%;
width:95%; display: table-cell;
margin:10px; white-space: nowrap;
background:white;
text-align:center;
height:100%;
}
#tabLeftSignatureBook{
float: left;
display: table;
height: 100%;
}
#tabRightSignatureBook{
float: right;
display: table;
height: 100%;
width: 25%;
text-align: right;
}
#tabRightSignatureBook select{
width: 75%;
}
#tabRightSignatureBook input{
width: 20%;
text-align: center;
}
.tabSignatureBook{
display: table-cell;
vertical-align: middle;
border: solid 1px;
padding-left: 10px;
padding-right: 10px;
border-top: none;
border-bottom: none;
border-left: none;
border-color: black;
}
.tabSignatureBook:hover{
cursor: pointer;
}
.activeTabSignatureBook{
color: #fff;
background: grey;
}
.infoPj{
width:28%;
position: relative;
display:inline-block;
height:25px;
//box-shadow: inset 0px 0px 5px 0px #656565;
padding:10px;
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: left; padding: 5px;
} }
#pjDetails{
margin-bottom: 10px; .pjDetails{
} display: table;
width: 95%;
#pjDetails label{ margin: auto;
display: block; text-align: left;
width: 100%; -moz-box-shadow: inset 0px 0px 5px 0px #656565;
font-weight:bold; -webkit-box-shadow: inset 0px 0px 5px 0px #656565;
} -o-box-shadow: inset 0px 0px 5px 0px #656565;
box-shadow: inset 0px 0px 5px 0px #656565;
.modifPj{ filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=5);
position: absolute; -moz-border-radius: 5px;
top: 10px; -webkit-border-radius: 5px;
right: 45px; border-radius: 5px;
color: #009DC5; padding: 10px;
cursor:pointer; }
}
.pjDetails label{
font-weight: bold;
}
.pjDetailsMore{
text-align: center;
cursor: pointer;
}
.pjDoc{
height: 20%;
-moz-box-shadow: inset 0px 0px 5px 0px #656565;
-webkit-box-shadow: inset 0px 0px 5px 0px #656565;
-o-box-shadow: inset 0px 0px 5px 0px #656565;
box-shadow: inset 0px 0px 5px 0px #656565;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=5);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 5px;
}
.pjDoc img{
height: 95%;
border: solid 2px white;
}
#thumnails_img_selected,img:hover{
border: solid 2px #009DC5;
cursor:pointer;
}
.actions{
width: 20%;
display: table-cell;
padding: 5px;
vertical-align: middle;
text-align: right;
}
</style> </style>
<div class="visaResList">
<div id="headerSignatureBook">
<div id="tabLeftSignatureBook">
<div class="tabSignatureBook" ng-class="{'activeTabSignatureBook': signatureBook.headerTab == 1}" ng-click="changeSignatureBookLeftContent(1)"> </div>
<i class="fa fa-dashboard fa-2x"></i> <div class='visaContent'>
</div> <div class="headerSignatureBook">
<div class="tabSignatureBook" ng-class="{'activeTabSignatureBook': signatureBook.headerTab == 2}" ng-click="changeSignatureBookLeftContent(2)"> <div class="item" ng-class="{'activeTabSignatureBook': signatureBook.headerTab == 1}" ng-click="changeSignatureBookLeftContent(1)">
<i class="fa fa-pencil fa-2x"></i> <i class="fa fa-dashboard fa-2x"></i>
</div> </div>
<div class="tabSignatureBook" ng-class="{'activeTabSignatureBook': signatureBook.headerTab == 3}" ng-click="changeSignatureBookLeftContent(3)"> <div class="item" ng-class="{'activeTabSignatureBook': signatureBook.headerTab == 2}" ng-click="changeSignatureBookLeftContent(2)">
<i class="fa fa-certificate fa-2x"></i> <i class="fa fa-pencil fa-2x"></i>
</div> </div>
<div class="tabSignatureBook" ng-class="{'activeTabSignatureBook': signatureBook.headerTab == 4}" ng-click="changeSignatureBookLeftContent(4)"> <div class="item" ng-class="{'activeTabSignatureBook': signatureBook.headerTab == 3}" ng-click="changeSignatureBookLeftContent(3)">
<i class="fa fa-line-chart fa-2x"></i> <i class="fa fa-certificate fa-2x"></i>
</div> </div>
</div> <div class="item" ng-class="{'activeTabSignatureBook': signatureBook.headerTab == 4}" ng-click="changeSignatureBookLeftContent(4)">
<div id="tabRightSignatureBook"> <i class="fa fa-line-chart fa-2x"></i>
<div class="tabSignatureBook" style="border-left: solid 1px;border-right: none;"> </div>
<select id="signatureBookActions"> <div class="others">
</div>
<div class="actions">
<select id="signatureBookActions">
<option ng-repeat="option in signatureBook.actions" value="{{option.value}}">{{option.label}}</option> <option ng-repeat="option in signatureBook.actions" value="{{option.value}}">{{option.label}}</option>
</select> </select>
<input name="send" id="send" value="Valider" class="button" type="button"> <input name="send" id="send" value="Valider" class="button" type="button">
</div> </div>
</div> </div>
</div> <div class="contentSignatureBook">
<div id="signatureBookContent"> <div class="contentLeft">
<div id="leftPanel"> <div class="contentShow" ng-if="signatureBook.headerTab == 1">
<!-- MAIN LEFT CONTENT --> <div class="pjDoc">
<div class="content" ng-if="signatureBook.headerTab == 1"> <img id="thumnails_img_selected" src="http://www.linux-france.org/article/pro/entrepreneur-howto/01_letters/demission/lettre-dem.png">
<div id="leftPanelThumbnails"> <img id="thumnails_img" src="http://www.linux-france.org/article/pro/entrepreneur-howto/01_letters/demission/lettre-dem.png">
<div class="thumbnails_mails"> <img id="thumnails_img" src="http://www.linux-france.org/article/pro/entrepreneur-howto/01_letters/demission/lettre-dem.png">
<img id="thumnails_img_selected" src="http://www.linux-france.org/article/pro/entrepreneur-howto/01_letters/demission/lettre-dem.png"><br/> <img id="thumnails_img" src="http://www.linux-france.org/article/pro/entrepreneur-howto/01_letters/demission/lettre-dem.png">
<label>Courrier arrivé</label> <img id="thumnails_img" src="http://www.linux-france.org/article/pro/entrepreneur-howto/01_letters/demission/lettre-dem.png">
</div>
<div class="thumbnails_mails">
<img id="thumnails_img" src="http://www.linux-france.org/article/pro/entrepreneur-howto/01_letters/demission/lettre-dem.png"><br/>
<label>PJ1</label>
</div>
<div class="thumbnails_mails">
<img id="thumnails_img" src="http://www.linux-france.org/article/pro/entrepreneur-howto/01_letters/demission/lettre-dem.png"><br/>
<label>PJ2</label>
</div> </div>
<div class="thumbnails_mails"> <div class="pjDetailsMore">
<img id="thumnails_img" src="http://www.linux-france.org/article/pro/entrepreneur-howto/01_letters/demission/lettre-dem.png"><br/> <i class="fa fa-chevron-up" aria-hidden="true"></i>
<label>PJ3</label>
</div> </div>
<iframe id="leftPanelShow_iframe" ng-src="{{signatureBook.displayLeftMainDoc}}"></iframe>
</div> </div>
<hr/> <div class="contentShow" ng-if="signatureBook.headerTab == 2">
<div id="leftPanelShowDocument"> <iframe id="leftPanelShow_iframe" ng-src="{{signatureBook.linkNotes}}"></iframe>
<iframe id="leftPanelShowDocumentIframe" ng-src="{{signatureBook.displayLeftMainDoc}}"></iframe> </div>
<div class="contentShow" ng-if="signatureBook.headerTab == 3">
<iframe id="leftPanelShow_iframe" ng-src="{{signatureBook.linkVisaCircuit}}"></iframe>
</div>
<div class="contentShow" ng-if="signatureBook.headerTab == 4">
</div> </div>
</div> </div>
<!-- NOTE CONTENT --> <div class="contentRight">
<div class="content" ng-if="signatureBook.headerTab == 2"> <div class="contentShow">
<iframe id="leftPanelShow_iframe" style="height:100%;" ng-src="{{signatureBook.linkNotes}}"></iframe> <div class="pjDetails">
</div> <div class="infoPj"><label>Type : </label><span>Projet de réponse</span></div>
<!-- VISA CIRCUIT CONTENT --> <div class="infoPj"><label>Objet : </label><span>Réponse délicate</span></div>
<div class="content" ng-if="signatureBook.headerTab == 3"> <div class="infoPj"><label>Contat : </label><span>Laurent GIOVANONNI - 11 boulevard du sud est</span></div>
<iframe id="leftPanelShow_iframe" style="height:100%;" ng-src="{{signatureBook.linkVisaCircuit}}"></iframe>
</div>
<!-- HISTORY CONTENT -->
<div class="content" ng-if="signatureBook.headerTab == 4">
</div>
</div>
<div style="cursor:w-resize;display:table-cell;width:auto;height:100%;margin:10px;background:#ccc;vertical-align:middle;">
<i class="fa fa-caret-right" style="font-size:9px;cursor:pointer;" aria-hidden="true"></i>
<i class="fa fa-caret-left" style="font-size:9px;cursor:pointer;" aria-hidden="true"></i>
</div>
<div id="rightPanel">
<div style="display:table;height:98%;margin:5px;">
<div id="rightPanelThumbnails" style="display:table-cell;width:15%;height:100%;margin:10px;background:white;vertical-align:top;">
<div style="height:74vh;overflow:auto;text-align:center;">
<span ng-repeat="(index, attachment) in signatureBook.thumbnailsAttachments" ng-click="changeRightViewer(index)">
<img ng-src="{{attachment.thumbnailLink}}" class="rightPanelThumbnails" ng-class="{'rightPanelSelectedThumbnail': index == signatureBook.selectedThumbnail}">
<label>{{attachment.attachment_type}}</label>
</span>
</div> </div>
<div style="height:30px;text-align:center;color: #009DC5;cursor:pointer;"> <div class="pjDetailsMore">
<i class="fa fa-plus fa-2x" aria-hidden="true"></i> <i class="fa fa-chevron-down" aria-hidden="true"></i>
</div> </div>
<iframe ng-src="{{signatureBook.viewerLink}}"></iframe>
</div> </div>
<div style="cursor:w-resize;display:table-cell;width:auto;height:100%;margin:10px;background:#ccc;vertical-align:middle;"> <div class="panelRight">
<i class="fa fa-caret-right" style="font-size:9px;cursor:pointer;" aria-hidden="true"></i> <div ng-repeat="(index, attachment) in signatureBook.thumbnailsAttachments" ng-click="changeRightViewer(index)" class="item" ng-class="{'rightPanelSelectedThumbnail': index == signatureBook.selectedThumbnail}">
</div> <span class="fa-stack fa-lg" title="{{attachment.attachment_type}}">
<div id="rightPanelShow" style="display:table-cell;width:85%;height:100%;margin:10px;background:white;text-align:center;"> <i class="fa fa-file-o fa-stack-2x"></i>
<div id="pjDetails" style="width:95%;height:20%;margin:auto;overflow:auto;border:solid 1px;margin-bottom:5px;"> <i class="fa fa-reply fa-stack-1x"></i>
<div class="infoPj"><label>Type</label><span>Projet de réponse</span></div> </span>
<div class="infoPj"><label>Crée le</label><span>15-02-2015</span></div>
<div class="infoPj"><label>Par</label><span>Bernard BLIER</span></div>
<div class="infoPj"><label>Date de retour</label><span>15-03-2015</span></div>
<div class="infoPj"><label>Objet</label><span title="Ceci est un test ekjfzeflkj ezflkj hzekjf jkef zejkhf kezjjhf kezjlfh zfhelhf kjfh zefh zefh ezkfh zkjlfh">Ceci est un test ekjfzeflkj ezflkj hzekjf jkef zejkhf kezjjhf kezjlfh zfhelhf kjfh zefh zefh ezkfh zkjlfh</span></div>
<div class="infoPj"><label>Contact</label><span>Prosper DELAURE</span></div>
<div class="infoPj"><label>Version</label><span>1</span></div>
<div class="infoPj"></div><div class="infoPj"></div>
<div class="modifPj fa fa-pencil-square-o fa-2x"></div>
</div> </div>
<iframe ng-src="{{signatureBook.viewerLink}}" style="height:70%;"></iframe>
<div id="pjSign" style="width:95%;height:9%;margin:auto;overflow:auto;border:solid 1px;margin-bottom:5px;">
<img style="height:100%;position: relative;display: inline-block;width: 100px;padding-left: 5px;" src="http://www.etaletaculture.fr/wp-content/uploads/2013/08/Signature-Napoleon.jpg">
<img style="height:100%;position: relative;display: inline-block;width: 100px;padding-left: 5px;" src="http://www.etaletaculture.fr/wp-content/uploads/2013/08/Signature-Napoleon.jpg">
<img style="height:100%;position: relative;display: inline-block;width: 100px;padding-left: 5px;" src="http://www.etaletaculture.fr/wp-content/uploads/2013/08/Signature-Napoleon.jpg">
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment