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 675 <div class="col-sm-12">
676 676 <div class="checkbox no-margin">
677 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 679 </label>
680 680 </div>
681 681 </div>
682   - <div class="col-sm-6">
  682 + <div class="col-sm-6 filloptionopacity">
683 683 <div class="radio">
684 684 <label>
685 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 688 </label>
689 689 </div>
690 690 <div class="radio">
691 691 <label>
692 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 697 <input type="text" class="form-control outerBackgroundColor" data-control="saturation" style="display:none;" value="#0088cc">
698 698 </div>
699 699  
700 700  
701 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 703 <!--<img src="img/color-picker.png" alt="" class="color-picker">-->
704 704 </label>
705 705 </div>
706 706 </div>
707   - <div class="col-sm-6 no-padding marginTop10">
  707 + <div class="col-sm-6 no-padding marginTop10 filloptionopacity">
708 708 <div class="row">
709 709 <label class="pull-left" style="font-weight:normal;">Scale</label>
710 710 <div class="pull-left" style="width:62%; margin-left:3%; margin-top:2%;">
... ... @@ -734,14 +734,14 @@
734 734 <div class="col-sm-12">
735 735 <div class="checkbox no-margin">
736 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 738 </label>
739 739 </div>
740 740 </div>
741   - <div class="col-sm-6">
  741 + <div class="col-sm-6 filloutlineopacity">
742 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 747 <div class="form-group" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
... ... @@ -754,7 +754,7 @@
754 754 </label>
755 755 </div>
756 756  
757   - <div class="col-sm-6">
  757 + <div class="col-sm-6 filloutlineopacity">
758 758 <div class="form-horizontal">
759 759 <div class="form-group">
760 760 <label class="col-sm-3 control-label" style=" font-weight:normal; padding-top:9px;">Size</label>
... ... @@ -791,17 +791,63 @@
791 791 </div>
792 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 851 </script>
806 852  
807 853  
... ...