K-Rise Systems

Posted: **November 30th, 2021, 7:49 am**

As of DesignTime revision 2078 and RunTime revision 803 the left and right textbox icons have been brought to MVC. Users are now able to use the Left Icon and Right Icon properties on a textbox using the Google Fonts selection. The selection can be found on the question mark icon on the properties or at the following link: https://fonts.google.com/icons. Users should make sure to use the icon name found on the right menu that pops up after clicking on the icon.

: IconOverview.PNG (20.48 KiB) Viewed 10874 times

: IconOverview.PNG (20.48 KiB) Viewed 10874 times

: IconView.PNG (8.76 KiB) Viewed 10874 times

: IconView.PNG (8.76 KiB) Viewed 10874 times

Users are also able to attach events to the icons using the Event Controller popup. This is done by setting the event to lefticonclick or righticonclick and setting the controller to the desired controller.

: IconEvents.PNG (12.54 KiB) Viewed 10874 times

: IconEvents.PNG (12.54 KiB) Viewed 10874 times

Note: If your application was created before the above revisions were applied, then the style.css file and the basic template need to be updated.
Users can do this in either of the following ways:

For applications with the Basic Template/style.css unchanged:
1. Download the LeftRightIcons.zip file below and unzip

LeftRightIcons.zip: (130.39 KiB) Downloaded 484 times

LeftRightIcons.zip: (130.39 KiB) Downloaded 484 times

2. Checkout the Basic template into a project using the "Add Existing" action button

: IconDeveloperWorkbench.PNG (45.04 KiB) Viewed 10871 times

: IconDeveloperWorkbench.PNG (45.04 KiB) Viewed 10871 times

3. Click the "Import From XML" action button in the project.
4. Upload the basic file from the zip file.
5. Double check that the "Import To" dropdown has VIEW-10000100 - Basic selected and hit import.

: IconImportTo.PNG (11.76 KiB) Viewed 10871 times

: IconImportTo.PNG (11.76 KiB) Viewed 10871 times

6. Checkout the Style.css folder by selecting a type of File.

: IconStyleCheckout.PNG (20.14 KiB) Viewed 10871 times

: IconStyleCheckout.PNG (20.14 KiB) Viewed 10871 times

7. Select the css folder and upload the style.css file and hit checkout.

: IconStyleCheckout2.PNG (33.34 KiB) Viewed 10871 times

: IconStyleCheckout2.PNG (33.34 KiB) Viewed 10871 times

8. Test and promote to PD.

For applications with a modified Basic Template or style.css:
1. Checkout the Basic template into a project.
2. Open the Basic template and in the html add the line

Code: Select all

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

after the line

Code: Select all

<link rel="stylesheet" href="System_Data(ApplicationFileUrl)css/amaran.css"></link>

3. Download the style.css file from the Static Files page by selecting the css folder and clicking on style.css

: IconStyleDownload.PNG (49.26 KiB) Viewed 10869 times

: IconStyleDownload.PNG (49.26 KiB) Viewed 10869 times

4. Add in the following to the file.

Code: Select all

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

.text-field-wrap .material-icons {
    position: absolute;
    top: 8px;
    left: 18px;
    font-size: calc(1em + 6px);
}

.text-field-wrap.right-icon input,
.text-field-wrap.right-icon textarea,
.text-field-wrap.right-icon select {
    padding-right: 53px;
}

    .text-field-wrap.right-icon input:focus,
    .text-field-wrap.right-icon textarea:focus,
    .text-field-wrap.right-icon select:focus {
        padding-right: 52px;
    }


.text-field-wrap .material-icons.left-icon{
    position: absolute;
    top: 8px;
    right: initial;
    left: 18px;
    font-size: calc(1em + 6px);
}
.text-field-wrap .material-icons.right-icon{
    position: absolute;
    top: 8px;
    right: 18px;
    left: initial;
    font-size: calc(1em + 6px);
}

.text-field-wrap.field-success  .material-icons.val-Icon {
    position: absolute;
    top: 8px;
    right: 18px;
    left: initial;
    font-size: calc(1em + 6px);
}

.text-field-wrap.field-error .material-icons.unval-Icon {
    position: absolute;
    top: 8px;
    right: 18px;
    left: initial;
    font-size: calc(1em + 6px);
}

.text-field-wrap.field-success .material-icons.unval-Icon {
    display: none;
}

.text-field-wrap.field-error .material-icons.val-Icon {
    display: none;
}

/* Field Success */

.text-field-wrap.field-success input,
.text-field-wrap.field-success textarea {
    border-color: #85A73C;
    padding-right: 50px;
}

    .text-field-wrap.field-success .label-text,
    .text-field-wrap.field-success.field-active input + .label-text,
    .text-field-wrap.field-success input:focus + .label-text,
    .text-field-wrap.field-success.field-active textarea + .label-text,
    .text-field-wrap.field-success textarea:focus + .label-text {
        color: #85A73C;
    }

.text-field-wrap.field-success .material-icons {
    color: #85A73C;
    
}


/* Field Error */

.text-field-wrap.field-error input,
.text-field-wrap.field-error textarea {
    border-color: #B83C26;
    padding-right: 50px;
}

    .text-field-wrap.field-error .label-text,
    .text-field-wrap.field-error.field-active input + .label-text,
    .text-field-wrap.field-error input:focus + .label-text,
    .text-field-wrap.field-error.field-active textarea + .label-text,
    .text-field-wrap.field-error textarea:focus + .label-text {
        color: #B83C26;
    }

.text-field-wrap.field-error .helper-text {
    color: #B83C26;
}

.text-field-wrap.field-error .material-icons {
    color: #B83C26;
}

.text-field-wrap.hidden-icons:not(.left-icon) .material-icons {
    display: none;
}

.text-field-wrap.hidden-icons.left-icon.right-icon .material-icons:first-of-type {
    display: none;
}

.text-field-wrap.field-error .material-icons.unval-Icon {
    display: block;
}

.text-field-wrap.field-success .material-icons.val-Icon {
    display: block;
}

.text-field-wrap:not(.field-success):not(.field-error) .material-icons:nth-last-child(3) {
    display: block;
}

5. Checkout the Style.css folder by selecting a type of File.
6. Select the css folder and upload the style.css file and hit checkout.
7. Test and promote to PD.

K-Rise Systems

Left And Right Textbox Icons Revision

Left And Right Textbox Icons Revision