Left And Right Textbox Icons Revision

[JustinVanRegenmorter]

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 10875 times

IconOverview.PNG (20.48 KiB) Viewed 10875 times

IconView.PNG (8.76 KiB) Viewed 10875 times

IconView.PNG (8.76 KiB) Viewed 10875 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 10875 times

IconEvents.PNG (12.54 KiB) Viewed 10875 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 485 times

LeftRightIcons.zip

(130.39 KiB) Downloaded 485 times

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

IconDeveloperWorkbench.PNG (45.04 KiB) Viewed 10872 times

IconDeveloperWorkbench.PNG (45.04 KiB) Viewed 10872 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 10872 times

IconImportTo.PNG (11.76 KiB) Viewed 10872 times

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

IconStyleCheckout.PNG (20.14 KiB) Viewed 10872 times

IconStyleCheckout.PNG (20.14 KiB) Viewed 10872 times

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

IconStyleCheckout2.PNG (33.34 KiB) Viewed 10872 times

IconStyleCheckout2.PNG (33.34 KiB) Viewed 10872 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 10870 times

IconStyleDownload.PNG (49.26 KiB) Viewed 10870 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.