ADAM / AIAHTML5

Commit a19d5ae5acc81472ac1bf16e056aba83700833b3

Authored by Mukul Rajput
1 parent 2d7dd3e2

changes for checkbox in edit style modal

Inline Side-by-side
Showing 1 changed file with 67 additions and 21 deletions
400-SOURCECODE/AIAHTML5.Web/index.html
  View file @a19d5ae
@@ -675,36 +675,36 @@ @@ -675,36 +675,36 @@
675 <div class="col-sm-12"> 675 <div class="col-sm-12">
676 <div class="checkbox no-margin"> 676 <div class="checkbox no-margin">
677 <label> 677 <label>
678 - <input id="fill-option" type="checkbox" checked> Fill Option 678 + <input id="fill-option" type="checkbox" checked onclick="filloption()"> Fill Option
679 </label> 679 </label>
680 </div> 680 </div>
681 </div> 681 </div>
682 - <div class="col-sm-6"> 682 + <div class="col-sm-6 filloptionopacity">
683 <div class="radio"> 683 <div class="radio">
684 <label> 684 <label>
685 <input type="radio" name="filloption" id="filloption1" value="filloption1"> 685 <input type="radio" name="filloption" id="filloption1" value="filloption1">
686 - <span class="">Texture</span>  
687 - <img src="~/../content/images/common/annotation-tool-bar/pattern-picker.png" alt="" class="pattern-picker" data-toggle="modal" data-target="#pattern"> 686 + <span class="">Texture</span>
  687 + <img id="editstyleTexture" src="~/../content/images/common/annotation-tool-bar/pattern-picker.png" alt="" class="pattern-picker" data-toggle="modal" data-target="#pattern">
688 </label> 688 </label>
689 </div> 689 </div>
690 <div class="radio"> 690 <div class="radio">
691 <label> 691 <label>
692 <input type="radio" name="filloption" id="filloption2" value="filloption2" checked style="margin-top:8px;"> 692 <input type="radio" name="filloption" id="filloption2" value="filloption2" checked style="margin-top:8px;">
693 693
694 -  
695 - <div class="form-group" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">  
696 - <span style="font-weight: normal; float: left; padding-top: 5px; padding-right: 5px;">Color</span> 694 +
  695 + <div id="editstylebackgroundcolor" class="form-group" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
  696 + <span style="font-weight: normal; float: left; padding-top: 5px; padding-right: 5px;">Color</span>
697 <input type="text" class="form-control outerBackgroundColor" data-control="saturation" style="display:none;" value="#0088cc"> 697 <input type="text" class="form-control outerBackgroundColor" data-control="saturation" style="display:none;" value="#0088cc">
698 </div> 698 </div>
699 699
700 700
701 <!--<span class="">Color</span> <img src="img/color-picker.png" alt="" class="color-picker">--> 701 <!--<span class="">Color</span> <img src="img/color-picker.png" alt="" class="color-picker">-->
702 - <!--<span class="demo2" data-control="hue" style="font-weight:normal;">Color</span>--> 702 + <!--<span class="demo2" data-control="hue" style="font-weight:normal;">Color</span>-->
703 <!--<img src="img/color-picker.png" alt="" class="color-picker">--> 703 <!--<img src="img/color-picker.png" alt="" class="color-picker">-->
704 </label> 704 </label>
705 </div> 705 </div>
706 </div> 706 </div>
707 - <div class="col-sm-6 no-padding marginTop10"> 707 + <div class="col-sm-6 no-padding marginTop10 filloptionopacity">
708 <div class="row"> 708 <div class="row">
709 <label class="pull-left" style="font-weight:normal;">Scale</label> 709 <label class="pull-left" style="font-weight:normal;">Scale</label>
710 <div class="pull-left" style="width:62%; margin-left:3%; margin-top:2%;"> 710 <div class="pull-left" style="width:62%; margin-left:3%; margin-top:2%;">
@@ -734,14 +734,14 @@ @@ -734,14 +734,14 @@
734 <div class="col-sm-12"> 734 <div class="col-sm-12">
735 <div class="checkbox no-margin"> 735 <div class="checkbox no-margin">
736 <label> 736 <label>
737 - <input id="Outline-Option" type="checkbox" checked> Outline Option 737 + <input id="Outline-Option" onclick="enableDisable()" type="checkbox" checked> Outline Option
738 </label> 738 </label>
739 </div> 739 </div>
740 </div> 740 </div>
741 - <div class="col-sm-6"> 741 + <div class="col-sm-6 filloutlineopacity">
742 <label class="marginTop5"> 742 <label class="marginTop5">
743 - <span style="font-weight: normal; float: left; padding-top: 5px; padding-right: 5px;">Color</span>  
744 - <!--<span class="demo " data-control="hue" style="float:left;">&nbsp;</span>--> 743 + <span style="font-weight: normal; float: left; padding-top: 5px; padding-right: 5px;">Color</span>
  744 + <!--<span class="demo " data-control="hue" style="float:left;">&nbsp;</span>-->
745 745
746 746
747 <div class="form-group" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;"> 747 <div class="form-group" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
@@ -754,7 +754,7 @@ @@ -754,7 +754,7 @@
754 </label> 754 </label>
755 </div> 755 </div>
756 756
757 - <div class="col-sm-6"> 757 + <div class="col-sm-6 filloutlineopacity">
758 <div class="form-horizontal"> 758 <div class="form-horizontal">
759 <div class="form-group"> 759 <div class="form-group">
760 <label class="col-sm-3 control-label" style=" font-weight:normal; padding-top:9px;">Size</label> 760 <label class="col-sm-3 control-label" style=" font-weight:normal; padding-top:9px;">Size</label>
@@ -791,17 +791,63 @@ @@ -791,17 +791,63 @@
791 </div> 791 </div>
792 </div> 792 </div>
793 793
  794 + <script>
  795 + function filloption()
  796 + {
  797 +
  798 + if (document.getElementById('fill-option').checked)
  799 + {
  800 +
  801 + $("#filloption1").css({ "pointer-events": "auto" });
  802 + $("#filloption12").css({ "pointer-events": "auto" });
  803 + $("#edit-slider-3").css({ "pointer-events": "auto" });
  804 + $("#edit-slider-4").css({ "pointer-events": "auto" });
  805 + $("#editstylebackgroundcolor").css({ "pointer-events": "auto" });
  806 + $("#editstyleTexture").css({ "pointer-events": "auto" });
  807 + $(".filloptionopacity label").css({ "cursor": "pointer" });
  808 + $(".filloptionopacity").css({ "opacity": "1" })
  809 + }
  810 + else
  811 + {
  812 +
  813 + $("#filloption1").css({ "pointer-events": "none" });
  814 + $("#filloption2").css({ "pointer-events": "none" });
  815 + $("#edit-slider-3").css({ "pointer-events": "none"});
  816 + $("#edit-slider-4").css({ "pointer-events": "none"});
  817 + $("#editstylebackgroundcolor").css({ "pointer-events": "none"});
  818 + $("#editstyleTexture").css({ "pointer-events": "none" });
  819 + $(".filloptionopacity label").css({ "cursor": "default" });
  820 + $(".filloptionopacity").css({ "opacity": ".5"})
794 821
  822 + }
795 823
796 - <script>  
797 - function mytoggle() {  
798 - var div = document.getElementById("divSection");  
799 - if (div.style.display == 'block') {  
800 - div.style.display = 'none';  
801 - return; 824 + }
  825 + function enableDisable() {
  826 +
  827 + if (document.getElementById('Outline-Option').checked) {
  828 +
  829 + $("#borderWidthCanvasElement").css({ "pointer-events": "auto" });
  830 + $("#editstylebordercolor").css({ "pointer-events": "auto" });
  831 + $(".filloutlineopacity").css({ "opacity": "1" })
  832 + }
  833 + else {
  834 + $("#borderWidthCanvasElement").css({ "pointer-events": "none" });
  835 + $("#editstylebordercolor").css({ "pointer-events": "none" });
  836 + $(".filloutlineopacity").css({ "opacity": ".5" })
802 } 837 }
803 - div.style.display = 'block';  
804 } 838 }
  839 +
  840 + </script>
  841 +
  842 + <script>
  843 + function mytoggle() {
  844 + var div = document.getElementById("divSection");
  845 + if (div.style.display == 'block') {
  846 + div.style.display = 'none';
  847 + return;
  848 + }
  849 + div.style.display = 'block';
  850 + }
805 </script> 851 </script>
806 852
807 853