Browse code

Améliorations IHM (déplacement bouton ajout de fichier et optimisation espace de recherche de totoz)

bruno.spyckerelle authored on 11/10/2016 08:45:06
Showing 3 changed files
... ...
@@ -102,23 +102,44 @@ body > .container-fluid {
102 102
 }
103 103
 
104 104
 .fixed-bottom .form-group {
105
-    margin-bottom: 0px !important;
105
+    margin-bottom: 5px !important;
106 106
     padding-left: 0px;
107
+    padding-right: 5px;
108
+    float: left;
107 109
 }
108 110
 
109
-.fixed-bottom .col-xs-3 {
110
-    padding-left: 5px;
111
-    padding-right: 5px;
112
-    margin-bottom: 5px !important;
111
+.fixed-bottom #saveFile {
112
+    padding-top: 4px;
113
+    padding-bottom: 4px;
114
+    padding-left: 10px;
115
+    padding-right: 10px;
113 116
 }
114 117
 
115
-.fixed-bottom .col-xs-6 {
116
-    padding-left: 5px;
117
-    padding-right: 5px;
118
-    margin-bottom: 5px !important;
118
+#form-message .focusin {
119
+    width: calc(100% - 30px);
120
+}
121
+
122
+#form-message .unfocus {
123
+    width: calc(100% - 210px);
124
+}
125
+
126
+#form-totoz .unfocus {
127
+    width: 30px;
128
+}
129
+
130
+#form-totoz .focusin {
131
+    width: 210px;
119 132
 }
120 133
 
134
+#form-totoz .unfocus  #totoz-search {
135
+    display: none;
136
+}
121 137
 
138
+#form-totoz .unfocus .input-group-addon {
139
+    border: 1px solid rgb(204, 204, 204);
140
+    border-radius: 4px;
141
+    padding-bottom: 7px;
142
+}
122 143
 
123 144
 .fixed-top-left {
124 145
     position: fixed;
... ...
@@ -143,7 +164,8 @@ body > .container-fluid {
143 164
 }
144 165
 
145 166
 #form-totoz .input-group-addon {
146
-    width: 1% !important;
167
+    padding-left: 6px;
168
+    padding-right: 6px;
147 169
 }
148 170
 
149 171
 td.maxwidth90 {
... ...
@@ -53,9 +53,6 @@
53 53
                         <a href="#" id="launchDuck" title="Lancer un \_o<"><img src="img/coin.png"></a>
54 54
                     </li>
55 55
                     <li>
56
-                        <a href="#" id="saveFile" title="Envoyer un fichier" data-toggle="modal" data-target="#fileModal"><span class="glyphicon glyphicon-transfer"></span></a>
57
-                    </li>
58
-                    <li>
59 56
                         <a href="#" id="forceRefresh" title="Rafraîchir les tribunes"><span class="glyphicon glyphicon-refresh"></span></a>
60 57
                     </li>
61 58
                     <li>
... ...
@@ -105,7 +102,7 @@
105 102
                 <div class="col-xs-12">
106 103
                     <div class="fixed-bottom">
107 104
                         <form class="form-inline" id="form-message">
108
-                            <div class="form-group col-xs-9">
105
+                            <div class="form-group focusin">
109 106
                                 <div class="input-group input-wide">
110 107
                                     <div class="input-group-btn dropup">
111 108
                                         <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
... ...
@@ -115,11 +112,14 @@
115 112
                                         </ul>
116 113
                                     </div>
117 114
                                     <input type="text" class="form-control input-sm" id="message" placeholder="\_o<">
115
+                                    <div class="input-group-btn">
116
+                                        <button class="btn btn-default" type="button" id="saveFile" title="Envoyer un fichier" data-toggle="modal" data-target="#fileModal"><span class="glyphicon glyphicon-file"></span></button>
117
+                                    </div>
118 118
                                 </div>
119 119
                             </div>
120 120
                         </form>
121 121
                         <form id="form-totoz" class="form-inline">
122
-                            <div class="form-group col-xs-3">
122
+                            <div class="form-group unfocus">
123 123
                                 <div class="input-group input-wide">
124 124
                                     <div class="input-group-addon"><span class="glyphicon glyphicon-picture"></span></div>
125 125
                                     <input type="text" id="totoz-search" class="form-control input-sm" placeholder="Totoz...">
... ...
@@ -210,7 +210,7 @@
210 210
                                 </div>
211 211
                             </div>
212 212
                             <div class="form-group">
213
-                                <label for="config-favicon" class="col-sm-4 control-label">Icone de la fenêtre</label>
213
+                                <label for="config-favicon" class="col-sm-4 control-label">Icône de la fenêtre</label>
214 214
                                 <div class="col-sm-8">
215 215
                                     <input type="text" class="form-control" id="config-favicon">
216 216
                                 </div>
... ...
@@ -787,14 +787,16 @@ $(document).ready(function(){
787 787
         insertInPalmi($(this).data('totoz'));
788 788
     });
789 789
 
790
-    $("#form-totoz").focusin(function(){
791
-        $("#form-message .form-group").addClass('col-xs-3').removeClass('col-xs-9');
792
-        $("#form-totoz .form-group").addClass('col-xs-9').removeClass('col-xs-3');
790
+    $("#form-totoz .input-group-addon").on('click', function(e){
791
+        $("#form-message .form-group").addClass('unfocus').removeClass('focusin');
792
+        $("#form-totoz .form-group").addClass('focusin').removeClass('unfocus');
793
+        $("#form-totoz input").focus();
793 794
     });
795
+
794 796
     $("#form-message").on("focusin click", function(e){
795 797
         if($("#form-totoz .popover").length == 0 || e.type == "click") {
796
-            $("#form-message .form-group").addClass('col-xs-9').removeClass('col-xs-3');
797
-            $("#form-totoz .form-group").addClass('col-xs-3').removeClass('col-xs-9');
798
+            $("#form-message .form-group").addClass('focusin').removeClass('unfocus');
799
+            $("#form-totoz .form-group").addClass('unfocus').removeClass('focusin');
798 800
         }
799 801
     });
800 802