Fixed CSS to avoid changing form controls color

MscrmTools · Jul 24, 2019 · 7a1dfef · 7a1dfef
1 parent ca06401
commit 7a1dfef
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 26 deletions.
diff --git a/NNCheckboxes/NNCheckboxes/ControlManifest.Input.xml b/NNCheckboxes/NNCheckboxes/ControlManifest.Input.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <manifest>
-  <control namespace="MscrmTools" constructor="NNCheckboxes" version="1.0.10" display-name-key="NNCheckboxes_Display_Key" description-key="NNCheckboxes_Desc_Key" control-type="standard" preview-image="logo.png">
+  <control namespace="MscrmTools" constructor="NNCheckboxes" version="1.0.11" display-name-key="NNCheckboxes_Display_Key" description-key="NNCheckboxes_Desc_Key" control-type="standard" preview-image="logo.png">
     <data-set name="nnRelationshipDataSet" display-name-key="nnRelationshipDataSet_Display_Key">
       <property-set name="displayAttribute" display-name-key="targetEntity_Display_Key" description-key="targetEntity_Desc_Key" of-type="SingleLine.Text" usage="bound" required="true" />
       <property-set name="backgroundColorAttribute" display-name-key="backgroundColorAttribute_Display_Key" description-key="backgroundColorAttribute_Desc_Key" of-type-group="colorTypes" usage="bound" required="false" />

diff --git a/NNCheckboxes/NNCheckboxes/css/NNCheckboxes.css b/NNCheckboxes/NNCheckboxes/css/NNCheckboxes.css
@@ -1,9 +1,3 @@
-* {
-    font-family: "Segoe UI",tahoma,Arial;
-    font-size: 14px;
-    color: #828181;
-}
-
 body {
     margin: 0;
 }
@@ -27,7 +21,7 @@ div.nncb-main{
 
 
 /* Customize the label (the container) */
-.container {
+.nncb-container {
     display: block;
     position: relative;
     padding-left: 25px !important;
@@ -40,17 +34,20 @@ div.nncb-main{
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
+    font-family: "Segoe UI",tahoma,Arial;
+    font-size: 14px;
+    color: #828181;
 }
 
 /* Hide the browser's default checkbox */
-.container input {
+.nncb-container input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
 }
 
 /* Create a custom checkbox */
-.checkmark {
+.nncb-checkmark {
     position: absolute;
     top: 3px;
     left: 3px;
@@ -61,29 +58,29 @@ div.nncb-main{
 }
 
 /* On mouse-over, add a grey background color */
-.container:hover input ~ .checkmark {
+.nncb-container:hover input ~ .nncb-checkmark {
     background-color: #ccc;
 }
 
 /* When the checkbox is checked, add a blue background */
-.container input:checked ~ .checkmark {
+.nncb-container input:checked ~ .nncb-checkmark {
     background-color: #fff;
 }
 
 /* Create the checkmark/indicator (hidden when not checked) */
-.checkmark:after {
+.nncb-checkmark:after {
     content: "";
     position: absolute;
     display: none;
 }
 
 /* Show the checkmark when checked */
-.container input:checked ~ .checkmark:after {
+.nncb-container input:checked ~ .nncb-checkmark:after {
     display: block;
 }
 
 /* Style the checkmark/indicator */
-.container .checkmark:after {
+.nncb-container .nncb-checkmark:after {
     left: 3px !important;
     top: 0px !important;
     width: 4px;
@@ -95,18 +92,21 @@ div.nncb-main{
     transform: rotate(45deg);
 }
 
-div.flex{
+div.nncb-flex{
     display: flex;
     flex-wrap : wrap;
     flex-grow:1;
 }
 
-div.flex >div {
+div.nncb-flex >div {
     flex: 0 50%;
     margin-bottom:5px;
+    font-family: "Segoe UI",tahoma,Arial;
+    font-size: 14px;
+    color: #828181;
 }
 
-div.new{
+div.nncb-new{
     text-align: center;
     vertical-align: middle;
     line-height: 160px;
@@ -115,15 +115,15 @@ div.new{
 
 /* toggle switch */
 /* The switch - the box around the slider */
-.nncb-container {
+.nncb-container-switch {
     position: relative;
     display: inline-block;
     width: 40px;
     height: 22px;
   }
 
   /* Hide default HTML checkbox */
-  .nncb-container input {
+  .nncb-container-switch input {
     opacity: 0;
     width: 0;
     height: 0;

diff --git a/NNCheckboxes/NNCheckboxes/index.ts b/NNCheckboxes/NNCheckboxes/index.ts
@@ -52,7 +52,7 @@ export class NNCheckboxes implements ComponentFramework.StandardControl<IInputs,
 		this._parentRecordType = context.parameters.parentEntityLogicalName.raw;
 		// TODO Waiting for bug fix : entityTypeName contains child entity name instead of parent
 		// context.mode.contextInfo.entityTypeName;
-
+debugger;
 		if(context.parameters.toggleDefaultBackgroundColorOn && context.parameters.toggleDefaultBackgroundColorOn.raw)
 		{
 			// @ts-ignore
@@ -132,7 +132,7 @@ export class NNCheckboxes implements ComponentFramework.StandardControl<IInputs,
 		// If no category grouping, then only one flexbox is needed
 		if(!this._categoryAttributeName){
 			this._divFlexBox = document.createElement("div");
-			this._divFlexBox.setAttribute("class", "flex");
+			this._divFlexBox.setAttribute("class", "nncb-flex");
 			this._container.appendChild(this._divFlexBox);
 		}
 
@@ -182,7 +182,7 @@ export class NNCheckboxes implements ComponentFramework.StandardControl<IInputs,
 
 									// Add a new flex box
 									thisCtrl._divFlexBox = document.createElement("div");
-									thisCtrl._divFlexBox.setAttribute("class", "flex");
+									thisCtrl._divFlexBox.setAttribute("class", "nncb-flex");
 									thisCtrl._container.appendChild(thisCtrl._divFlexBox);
 								}
 							}
@@ -225,15 +225,15 @@ export class NNCheckboxes implements ComponentFramework.StandardControl<IInputs,
 							divFlexCtrl.appendChild(lblContainer);
 
 							if(thisCtrl._useToggleSwitch){
-								lblContainer.setAttribute("class", "nncb-container");
+								lblContainer.setAttribute("class", "nncb-container-switch");
 
 								var spanLabel = document.createElement("span");
 								spanLabel.setAttribute("class", "nncb-switch-label");
 								spanLabel.textContent = record[thisCtrl._labelAttributeName];
 								divFlexCtrl.appendChild(spanLabel);
 							}
 							else{
-								lblContainer.setAttribute("class", "container");
+								lblContainer.setAttribute("class", "nncb-container");
 								lblContainer.setAttribute("style", styles.join(";"))
 							}
 
@@ -351,7 +351,7 @@ export class NNCheckboxes implements ComponentFramework.StandardControl<IInputs,
 							}
 							else{
 								var mark = document.createElement("span");
-								mark.setAttribute("class", "checkmark");
+								mark.setAttribute("class", "nncb-checkmark");
 
 								lblContainer.innerHTML += record[thisCtrl._labelAttributeName];
 								lblContainer.appendChild(chk);
@@ -451,6 +451,7 @@ export class NNCheckboxes implements ComponentFramework.StandardControl<IInputs,
 	 * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
 	 */
 	public updateView(context: ComponentFramework.Context<IInputs>): void {
+		debugger;
 		if(context.parameters.nnRelationshipDataSet.paging.hasNextPage)
 		{
 			context.parameters.nnRelationshipDataSet.paging.loadNextPage();