ADAM / AIAHTML5

Commit 6f5db128ba361d7b6fc047a03ba05eb85cd81596

Authored by Nikita Kulshreshtha
1 parent d6baa2a6

Refs: #7808

Inline Side-by-side
Showing 1 changed file with 81 additions and 10 deletions
400-SOURCECODE/AIAHTML5.Web/index.html
  View file @6f5db12
... ... @@ -41,6 +41,35 @@
41 41  
42 42 <!--Annotation Toolbar: Jcanvas-->
43 43 <style>
  44 +
  45 +
  46 + .ActiveFormattingButtonClass {
  47 + background-color: #1B92D0 !important;
  48 + }
  49 +
  50 + .Edittext-btn-css {
  51 + background: #4B4B4B;
  52 + padding: 4px;
  53 + cursor: pointer;
  54 + margin-right: 2px;
  55 + }
  56 +
  57 + /*.italic-btn-css {
  58 + background: #4B4B4B;
  59 + padding: 4px;
  60 + cursor: pointer;
  61 + margin-right: 2px;
  62 + }*/
  63 +
  64 + .underline-btn-css {
  65 + background: #4B4B4B;
  66 + padding: 4px;
  67 + cursor: pointer;
  68 + margin-right: 5px;
  69 + }
  70 +
  71 +
  72 +
44 73 .activebtncolor {
45 74 background-color: #1B92D0 !important;
46 75 border-color: #1B92D0 !important;
... ... @@ -537,14 +566,14 @@
537 566 <option>72</option>
538 567 </select>
539 568 <span style="vertical-align:middle;">
540   - <span id="text-bold" style="background: #4B4B4B;padding:4px;cursor:pointer;margin-right:2px;">
  569 + <span id="text-bold" class="Edittext-btn-css">
541 570 <i aria-hidden="true" class="fa fa-bold" style="color: #fff"></i>
542 571 </span>
543   - <span id="text-italic" style="background: #4B4B4B; padding: 4px; cursor: pointer; margin-right: 2px;">
  572 + <span id="text-italic" class="Edittext-btn-css">
544 573 <i class="fa fa-italic" aria-hidden="true" style="color: #fff"></i>
545 574  
546 575 </span>
547   - <span id="text-underline" style="background: #4B4B4B; padding: 4px; cursor: pointer; margin-right: 5px;">
  576 + <span id="text-underline" class="underline-btn-css">
548 577 <i class="fa fa-underline" aria-hidden="true" style="color: #fff"></i>
549 578 </span>
550 579 </span>
... ... @@ -555,15 +584,15 @@
555 584 </div>
556 585  
557 586 <span style="vertical-align:middle;">
558   - <span id="text-left" style="background: #4B4B4B;padding:4px;cursor:pointer;margin-right:2px;">
  587 + <span id="text-left" class="Edittext-btn-css">
559 588 <i aria-hidden="true" class="fa fa-align-left" style="color: #fff"></i>
560 589 </span>
561   - <span id="text-center" style="background: #4B4B4B; padding: 4px; cursor: pointer; margin-right: 2px;">
  590 + <span id="text-center" class="Edittext-btn-css">
562 591 <i class="fa fa-align-center" aria-hidden="true" style="color: #fff"></i>
563 592  
564 593  
565 594 </span>
566   - <span id="text-right" style="background: #4B4B4B; padding: 4px; cursor: pointer; margin-right: 5px;">
  595 + <span id="text-right" class="underline-btn-css">
567 596 <i class="fa fa-align-right" aria-hidden="true" style="color: #fff"></i>
568 597  
569 598  
... ... @@ -1207,41 +1236,83 @@
1207 1236  
1208 1237 $("#text-left").on('click', function () {
1209 1238  
  1239 + //Annotation: Formatting buttons color is not change when select.
  1240 +
  1241 + $("#text-center").removeClass("ActiveFormattingButtonClass");
  1242 + $("#text-right").removeClass("ActiveFormattingButtonClass");
  1243 + $("#text-left").addClass("ActiveFormattingButtonClass");
1210 1244 $("#text_area").css("text-align", "left");
1211 1245  
  1246 +
1212 1247 });
1213 1248  
1214 1249  
1215 1250 $("#text-center").on('click', function () {
1216 1251  
  1252 + //Annotation: Formatting buttons color is not change when select.
  1253 +
  1254 + $("#text-right").removeClass("ActiveFormattingButtonClass");
  1255 + $("#text-left").removeClass("ActiveFormattingButtonClass");
  1256 + $("#text-center").addClass("ActiveFormattingButtonClass");
1217 1257 $("#text_area").css("text-align", "center");
1218 1258  
  1259 +
1219 1260 });
1220 1261  
1221 1262  
1222 1263 $("#text-right").on('click', function () {
1223 1264  
1224   - $("#text_area").css("text-align", "right");
  1265 + //Annotation: Formatting buttons color is not change when select.
1225 1266  
  1267 + $("#text-left").removeClass("ActiveFormattingButtonClass");
  1268 + $("#text-center").removeClass("ActiveFormattingButtonClass");
  1269 + $("#text-right").addClass("ActiveFormattingButtonClass");
  1270 + $("#text_area").css("text-align", "right");
1226 1271 });
1227 1272  
1228 1273  
1229 1274 $("#text-bold").on('click', function () {
1230 1275  
1231   - $("#text_area").css("font-weight", "bold");
  1276 + //Annotation: Formatting buttons color is not change when select.
  1277 + $("#text-bold").toggleClass("ActiveFormattingButtonClass");
  1278 +
  1279 + if ($("#text-bold").hasClass("ActiveFormattingButtonClass")) {
  1280 + $("#text_area").css("font-weight", "bold");
  1281 + }
  1282 + else {
  1283 + $("#text_area").css("font-weight", "normal");
  1284 + }
  1285 +
1232 1286  
1233 1287 });
1234 1288  
1235 1289 $("#text-italic").on('click', function () {
1236 1290  
1237   - $("#text_area").css("font-style", "italic");
  1291 + //Annotation: Formatting buttons color is not change when select.
  1292 + $("#text-italic").toggleClass("ActiveFormattingButtonClass");
  1293 + if ($("#text-italic").hasClass("ActiveFormattingButtonClass")) {
  1294 + $("#text_area").css("font-style", "italic");
  1295 + }
  1296 + else {
  1297 + $("#text_area").css("font-style", "normal");
  1298 + }
  1299 +
1238 1300  
1239 1301 });
1240 1302  
1241 1303 $("#text-underline").on('click', function () {
1242 1304  
1243   - $("#text_area").css("text-decoration", "underline");
  1305 + //Annotation: Formatting buttons color is not change when select.
  1306 + $("#text-underline").toggleClass("ActiveFormattingButtonClass");
  1307 +
  1308 + if ($("#text-underline").hasClass("ActiveFormattingButtonClass")) {
  1309 + $("#text_area").css("text-decoration", "underline");
  1310 + }
  1311 + else {
  1312 + $("#text_area").css("text-decoration", "none");
  1313 + }
1244 1314  
  1315 +
1245 1316 });
1246 1317  
1247 1318  
... ...