Split css of help Popup in new file + add dropdown to choose circle or line shape
--- a/src/hdalab/static/hdalab/css/additionnal_renkan.css Fri Dec 12 13:39:26 2014 +0100
+++ b/src/hdalab/static/hdalab/css/additionnal_renkan.css Tue Dec 16 10:49:52 2014 +0100
@@ -33,189 +33,3 @@
background: url("../img/tag_purple.png") no-repeat 5px 2px;
}
-/* -------- help Popup -------- */
-.renkan_help {
- display: list-item;
- line-height: 32px;
-}
-
-#toggle-help{
- position: absolute;
- right:0px;
- background: url('../img/toggle-help.png') no-repeat right center;
- background-size: 28px 28px;
- height: 28px;
- width: 28px;
-}
-
-#help-container{
- padding:10px;
- background: rgba(221,221,221,0.97);
- border:none;
-}
-
-.ui-dialog {
- border:none;
- padding:0px;
- border-radius:0px;
- box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
-}
-
-.ui-dialog-titlebar-close,
-.ui-dialog-titlebar{
- display:none;
-}
-
-.ui-widget-content{
- background: transparent;
-}
-
-.column-left,
-.column-right,
-.column-center{
- font-family: Arial;
- font-size: 11pt;
- display: list-item;
-}
-
-.slides{
- list-style:none;
-}
-
-.slides li{
- display:none;
-}
-
-.slides li current{
- display:initial;
-}
-
-/* --- Slide1 --- */
-li.slide1 .column-left,
-li.slide1 .column-right,
-li.slide1 .column-center{
- margin-right:50px;
-}
-
-li.slide1 .column-left{
- float: left;
- width: 30%;
- margin-top:5px;
-}
-li.slide1 .column-right{
- float: right;
- width: 30%;
- padding-right: 60px;
- margin-top:5px;
-}
-li.slide1 .column-center{
- display: inline-block;
- width: 10%;;
-}
-
-/* --- Slide2 --- */
-li.slide2
-.column-left,
-.column-right,
-.column-center{
- margin-right:20px;
-}
-
-li.slide2 .column-left{
- float: left;
- width: 30%;
-}
-li.slide2 .column-right{
- float: right;
- width: 30%;
- padding-right:20px;
-}
-li.slide2 .column-center{
- display: inline-block;
- width: 30%;
-}
-
-
-.img-requete,
-.img-ressource,
-.img-tag{
- line-height: 39px;
- display: list-item;
- padding-left: 55px;
- background-repeat: no-repeat;
- margin-bottom: 25px;
-}
-
-.img-requete{
- background-image: url("../img/requete.png");
- background-size: 39px 39px;
-}
-.img-ressource{
- background-image: url("../img/ressource.png");
- margin-left:2px;
- background-size: 35px 35px;
-}
-.img-tag{
- background-image: url("../img/tag.png");
- background-size: 39px 39px;
-}
-.img-menu{
- size:201px 103px;
- margin-top:20px;
-}
-.img-save,
-.img-extend{
- margin-right: 7px;
- padding-top: 3px;
- float:left;
- height: 31px;
- width: 31px;
-}
-.img-close{
- text-align: right;
- position:absolute;
- right:10px;
- top:10px;
- height: 34px;
- padding-right:40px;
- background: url('../img/close.png') no-repeat right center;
- background-size: 34px 34px;
-
-}
-
-.slideShowTitle{
- font-family: "Helvetica Neue";
- font-size: 26pt;
- font-stretch: condensed;
- margin-bottom: 10px;
-}
-
-.columnTitle{
- font-family: Helvetica Neue;
- font-stretch: condensed;
- font-size: 17pt;
- margin-top: 0px;
- margin-bottom: 10px;
-}
-
-ul.bjqs-controls li.bjqs-next a{
- text-align: right;
- position:absolute;
- right:10px;
- bottom:10px;
- height: 34px;
- vertical-align: middle;
- padding-right:40px;
- background: url('../img/arrow-right.png') no-repeat;
- background-size: 34px 34px;
- right:10px;
-}
-ul.bjqs-controls li.bjqs-prev a{
- display: none;
-}
-
-ul.bjqs-controls li a:hover{
-}
-
-/* --------- Fin Help Popup --------- */
-
--- a/src/hdalab/static/hdalab/css/common.css Fri Dec 12 13:39:26 2014 +0100
+++ b/src/hdalab/static/hdalab/css/common.css Tue Dec 16 10:49:52 2014 +0100
@@ -277,12 +277,13 @@
clear: both;
}
.all-title h1{
- font-size: 20px;
+ font-size: 20px;
font-size: 2rem;
font-weight: bold;
font-family: 'FranklinGothic', Arial, Helvetica, sans-serif;
letter-spacing: -0.04em;
text-transform: uppercase;
+ display: inline;
}
.all-title h1:before {
content: "/";
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/hdalab/static/hdalab/css/renkan_help.css Tue Dec 16 10:49:52 2014 +0100
@@ -0,0 +1,262 @@
+.renkan_help{
+ line-height: 32px;
+ float: right;
+ display: inline-block;
+}
+.renkan_help ul {
+ text-align: left;
+ display: inline;
+ margin: 0;
+ padding: 10px 2px 10px 0;
+ list-style: none;
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+}
+.renkan_help ul li{
+ z-index: 500;
+ font: bold 12px/18px sans-serif;
+ display: inline-block;
+ margin-right: -4px;
+ position: relative;
+ padding: 5px;
+ background: #fff;
+ cursor: pointer;
+ width:250px;
+ -moz-transition: all 0.2s;
+}
+.renkan_help ul li:hover{
+ background: #555;
+ color:#fff;
+}
+.renkan_help ul li ul {
+ padding: 0;
+ position: absolute;
+ top: 28px;
+ left: 0;
+ width: 100%;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+ display: none;
+ opacity: 0;
+ visibility: hidden;
+ -moz-transition: opacity 0.2s;
+}
+.renkan_help ul li ul li {
+ display: block;
+ transition: background-color 0.3s ease 0s;
+}
+.renkan_help ul li:hover ul {
+ display: block;
+ opacity: 1;
+ visibility: visible;
+}
+.renkan_help ul.disable,
+.renkan_help ul.disable li,
+.renkan_help ul.disable li:hover{
+ background: none repeat scroll 0 0 #eeeeee;
+ box-shadow: none;
+ color: #c1c1c1;
+ cursor: default;
+}
+#graph-circle {
+ background: url("../img/graph-circle2.png") no-repeat scroll right 5px center / 25px 25px #ffffff;
+}
+#graph-line {
+ background: url("../img/graph-line2.png") no-repeat scroll right 5px center / 25px 25px #ffffff;
+}
+#graph-line a{
+}
+#graph-line:hover a,
+#graph-circle:hover a{
+ color: #4f5451;
+}
+#graph-line:hover,
+#graph-circle:hover
+{
+ background-color: rgb(224,224,224);
+}
+#toggle-help{
+/* position: absolute; */
+ background: url('../img/toggle-help.png') no-repeat right center;
+ background-size: 28px 28px;
+ height: 28px;
+ width: 28px;
+ display: inline-block;
+ vertical-align: middle;
+ margin-left: 10px;
+}
+
+/* #################################################### */
+/* -------------------- help Popup -------------------- */
+/* #################################################### */
+#help-container{
+ padding:10px;
+ background: rgba(221,221,221,0.97);
+ border:none;
+}
+
+.ui-dialog {
+ z-index:600;
+ border:none;
+ padding:0px;
+ border-radius:0px;
+ box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
+}
+
+.ui-dialog-titlebar-close,
+.ui-dialog-titlebar{
+ display:none;
+}
+
+.ui-widget-content{
+ background: transparent;
+}
+
+.column-left,
+.column-right,
+.column-center{
+ font-family: Arial;
+ font-size: 11pt;
+ display: list-item;
+}
+
+.slides{
+ list-style:none;
+}
+
+.slides li{
+ display:none;
+}
+
+.slides li current{
+ display:initial;
+}
+
+/* --- Slide1 --- */
+li.slide1 .column-left,
+li.slide1 .column-right,
+li.slide1 .column-center{
+ margin-right:50px;
+}
+
+li.slide1 .column-left{
+ float: left;
+ width: 30%;
+ margin-top:5px;
+}
+li.slide1 .column-right{
+ float: right;
+ width: 30%;
+ padding-right: 60px;
+ margin-top:5px;
+}
+li.slide1 .column-center{
+ display: inline-block;
+ width: 10%;;
+}
+
+/* --- Slide2 --- */
+li.slide2
+.column-left,
+.column-right,
+.column-center{
+ margin-right:20px;
+}
+
+li.slide2 .column-left{
+ float: left;
+ width: 30%;
+}
+li.slide2 .column-right{
+ float: right;
+ width: 30%;
+ padding-right:20px;
+}
+li.slide2 .column-center{
+ display: inline-block;
+ width: 30%;
+}
+
+
+.img-requete,
+.img-ressource,
+.img-tag{
+ line-height: 39px;
+ display: list-item;
+ padding-left: 55px;
+ background-repeat: no-repeat;
+ margin-bottom: 25px;
+}
+
+.img-requete{
+ background-image: url("../img/requete.png");
+ background-size: 39px 39px;
+}
+.img-ressource{
+ background-image: url("../img/ressource.png");
+ margin-left:2px;
+ background-size: 35px 35px;
+}
+.img-tag{
+ background-image: url("../img/tag.png");
+ background-size: 39px 39px;
+}
+.img-menu{
+ size:201px 103px;
+ margin-top:20px;
+}
+.img-save,
+.img-extend{
+ margin-right: 7px;
+ padding-top: 3px;
+ float:left;
+ height: 31px;
+ width: 31px;
+}
+.img-close{
+ text-align: right;
+ position:absolute;
+ right:10px;
+ top:10px;
+ height: 34px;
+ padding-right:40px;
+ background: url('../img/close.png') no-repeat right center;
+ background-size: 34px 34px;
+
+}
+
+.slideShowTitle{
+ font-family: "Helvetica Neue";
+ font-size: 26pt;
+ font-stretch: condensed;
+ margin-bottom: 10px;
+}
+
+.columnTitle{
+ font-family: Helvetica Neue;
+ font-stretch: condensed;
+ font-size: 17pt;
+ margin-top: 0px;
+ margin-bottom: 10px;
+}
+
+ul.bjqs-controls li.bjqs-next a{
+ text-align: right;
+ position:absolute;
+ right:10px;
+ bottom:10px;
+ height: 34px;
+ vertical-align: middle;
+ padding-right:40px;
+ background: url('../img/arrow-right.png') no-repeat;
+ background-size: 34px 34px;
+ right:10px;
+}
+ul.bjqs-controls li.bjqs-prev a{
+ display: none;
+}
+
+ul.bjqs-controls li a:hover{
+}
+
+/* --------- Fin Help Popup --------- */
\ No newline at end of file
--- a/src/hdalab/static/hdalab/js/renkan-manual-save.js Fri Dec 12 13:39:26 2014 +0100
+++ b/src/hdalab/static/hdalab/js/renkan-manual-save.js Tue Dec 16 10:49:52 2014 +0100
@@ -72,13 +72,17 @@
_model.on("change remove", function(_model) {
_checkLeave();
if(canRemoveChangeShape && !changeShapeRemoved){
- $("#circle-shape").html("");
+ console.log("KATAPLA");
+ $("#graph-layout").addClass("disable");
+ $("#graph-layout ul").remove();
changeShapeRemoved = true;
}
});
_checkLeave();
if(canRemoveChangeShape && !changeShapeRemoved){
- $("#circle-shape").html("");
+ console.log("KATAPLA2");
+ $("#graph-layout").addClass("disable");
+ $("#graph-layout ul").remove();
changeShapeRemoved = true;
}
});
--- a/src/hdalab/templates/renkan_edit.html Fri Dec 12 13:39:26 2014 +0100
+++ b/src/hdalab/templates/renkan_edit.html Tue Dec 16 10:49:52 2014 +0100
@@ -9,6 +9,7 @@
<link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/ui-lightness/jquery-ui-1.10.4.min.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'renkanmanager/lib/renkan/css/renkan.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/additionnal_renkan.css' %}" />
+ <link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/renkan_help.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'hdalab/lib/bjqs.css' %}" />
{% endblock %}
@@ -166,13 +167,29 @@
{% endblock %}
{% block main_content %}
+<div class="all-title">
+ <h1><strong>RENKAN</strong></h1>
+ <div class="renkan_help">
+ <ul id="graph-layout">
+ <li>
+ {% trans 'Graph Layout' %}
+ <ul>
+ {% if 'shape=circle' in switch_shape_url %}
+ <li id="graph-line"><a href="">✓ {% trans 'See the graph in line' %}</a></li>
+ <li id="graph-circle"><a href="{{ switch_shape_url }}"> {% trans 'See the graph in circle' %}</a></li>
+ {% else %}
+ <li id="graph-line"><a href="{{ switch_shape_url }}"> {% trans 'See the graph in line' %}</a></li>
+ <li id="graph-circle"><a href="">✓ {% trans 'See the graph in circle' %}</a></li>
+ {% endif %}
+ </ul>
+ </li>
+ </ul>
+ <a id="toggle-help" href="#"></a>
+ </div>
+</div>
<div id="dialog-form" title="Identification">
{% include 'ajax_identification/ajax_login.html' %}
</div>
-<div class="renkan_help">
- <span id="circle-shape"><a href="{{ switch_shape_url }}">{% if 'shape=circle' in switch_shape_url %}{% trans 'See the graph in circle' %}{% else %}{% trans 'See the graph in lines' %}{% endif %}</a></span>
- <a id="toggle-help" href="#"></a>
-</div>
<div id="help-container" class="">
<div id="help-slideshow">