added placeholders to path input

.vscode/launch.json

@@ -5,7 +5,7 @@
             // Use IntelliSense to find out which attributes exist for C# debugging
             // Use hover for the description of the existing attributes
             // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
-            "name": ".NET Core Launch (web)",
+            "name": ".NET Core Launch (Umbraco 9)",
             "type": "coreclr",
             "request": "launch",
             "preLaunchTask": "build",
@@ -26,6 +26,26 @@
                 "/Views": "${workspaceFolder}/Views"
             }
         },
+        {
+            "name": ".NET Core Launch (Umbraco 1020)",
+            "type": "coreclr",
+            "request": "launch",
+            "preLaunchTask": "build",
+            "program": "${workspaceFolder}/UmbracoV1020/bin/Debug/net6.0/UmbracoV10.dll",
+            "args": [],
+            "cwd": "${workspaceFolder}/UmbracoV9",
+            "stopAtEntry": false,            
+            "serverReadyAction": {
+                "action": "openExternally",
+                "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
+            },
+            "env": {
+                "ASPNETCORE_ENVIRONMENT": "Development"
+            },
+            "sourceFileMap": {
+                "/Views": "${workspaceFolder}/Views"
+            }
+        },
         {
             "name": ".NET Core Attach",
             "type": "coreclr",

Documentation/Configuration/README.md

@@ -36,6 +36,8 @@ On the Packages Configuration property, click the Add button. This will display
     * You can use absolute paths: `http:\\\www.yoursite.com\styles\fonts\my-font-package.css`. This allows you to use external files, like the ones from a CDN.
     * Or relative to the root: `\styles\fonts\my-font-package.css`
     This file will be loaded in the head of your backoffice and will affect the whole view so be careful of what you load there. Check the Known Issues section for some more info.
+    * Use the Select button to pick files from your local installation.
+
 
 5. Template. This will be the template your icon will be based on. You can use the value ```{icon}``` as placeholder for your icon specific rule. For instance, for Font Awesome you should enter something like: `<i class="fa {icon}"></i>`
 6. Override Backoffice template. Optional. You can override the Template value to use differente templates for frontend and backoffice.

Our.Iconic/App_Plugins/Iconic/Views/iconic.edit.dialog.html

@@ -34,7 +34,6 @@
 
                             <input class="umb-property-editor" name="editTemplate" type="text" ng-model="model.package.template" val-highlight="{{ packageForm.editTemplate.$invalid && packageForm.editTemplate.$dirty}}" required />
 
-
                             <span ng-messages="packageForm.editTemplate.$error" show-validation-on-submit>
                                 <span class="help-inline" ng-message="required"><localize key="iconicValidation_name">Please enter a template</localize></span>
                             </span>
@@ -52,7 +51,8 @@
                         <umb-control-group label="@iconicConfig_cssFile" description="@iconicConfig_cssFileDescription" required="true">
                             <div class="flex">
                                 <label class="control-label">File Path: </label>
-                                <input type="text" class="umb-property-editor" name="editCssFile" required ng-model="model.package.cssfile" />
+                                <input type="text" class="umb-property-editor" name="editCssFile" required ng-model="model.package.cssfile"
+                                       placeholder="Enter partial or absolute URL, or select from the filesystem."/>
 
                                 <umb-button action="openCssFilePicker(model.package.cssfile)"
                                             label="Select"
@@ -83,7 +83,8 @@
 
                                 <div class="flex">
                                     <label class="control-label">File Path: </label>
-                                    <input type="text" class="umb-property-editor" name="editSourceFile" required ng-model="model.package.sourcefile" />
+                                    <input type="text" class="umb-property-editor" name="editSourceFile" required ng-model="model.package.sourcefile"
+                                           placeholder="Enter partial or absolute URL, or select from the filesystem."/>
 
                                     <umb-button action="openRulesFilePicker()"
                                                 label="Select"

Our.Iconic/App_Plugins/Iconic/js/src/iconic.prevalues.editor.controller.js

@@ -98,7 +98,7 @@
         };
 
         function loadPreconfigs() {
-            $http.get().then(
+            $http.get(umbRequestHelper.convertVirtualToAbsolutePath("~/App_Plugins/Iconic/preconfigs.json")).then(
                 function(response) {
                     $scope.preconfig = response.data.preconfigs;
                 },

Our.Iconic/Our.Iconic.csproj

@@ -6,7 +6,7 @@
 With Iconic you will be able to create a property editor that can use virtually any font package out there and not only that, you will be able to select your icon from more than one package on the same property.		</Description>
         <Product>$(AssemblyName)</Product>
         <PackageTags>umbraco plugin package icon picker editor backoffice</PackageTags>
-		<Version>4.1.0-beta</Version>
+		<Version>4.1.0-beta2</Version>
 		<Authors>Mario Lopez</Authors>
 		<PackageProjectUrl>https://github.com/Skartknet/Iconic</PackageProjectUrl>
 		<PackageIcon>iconic_logo.png</PackageIcon>

UmbracoV10/App_Plugins/Iconic/Views/iconic.edit.dialog.html

@@ -34,7 +34,6 @@
 
                             <input class="umb-property-editor" name="editTemplate" type="text" ng-model="model.package.template" val-highlight="{{ packageForm.editTemplate.$invalid && packageForm.editTemplate.$dirty}}" required />
 
-
                             <span ng-messages="packageForm.editTemplate.$error" show-validation-on-submit>
                                 <span class="help-inline" ng-message="required"><localize key="iconicValidation_name">Please enter a template</localize></span>
                             </span>
@@ -50,13 +49,16 @@
 
 
                         <umb-control-group label="@iconicConfig_cssFile" description="@iconicConfig_cssFileDescription" required="true">
-                            <input type="hidden" name="editCssFile" required ng-model="model.package.cssfile" />
-                            <umb-node-preview ng-if="model.package.cssfile" icon="'icon-document'" name="model.package.cssfile" allow-remove="true" on-remove="removeCssFile()">
-                            </umb-node-preview>
+                            <div class="flex">
+                                <label class="control-label">File Path: </label>
+                                <input type="text" class="umb-property-editor" name="editCssFile" required ng-model="model.package.cssfile"
+                                       placeholder="Enter partial or absolute URL, or select from the filesystem."/>
+
+                                <umb-button action="openCssFilePicker(model.package.cssfile)"
+                                            label="Select"
+                                            type="button"></umb-button>
 
-                            <a ng-hide="model.package.cssfile" href="" class="umb-node-preview-add" ng-click="openCssFilePicker(model.package.cssfile)" prevent-default>
-                                <localize key="general_add">Add</localize>
-                            </a>
+                            </div>
 
                             <span ng-messages="packageForm.editCssFile.$error" show-validation-on-submit>
                                 <span class="help-inline" ng-message="required"><localize key="iconicValidation_css">Please select a CSS file</localize></span>
@@ -79,14 +81,17 @@
 
                             <umb-control-group label="@iconicConfig_rulesFile" description="@iconicConfig_rulesFileDescription">
 
-                                <input name="editSourceFile" type="hidden" ng-model="model.package.sourcefile" required />
+                                <div class="flex">
+                                    <label class="control-label">File Path: </label>
+                                    <input type="text" class="umb-property-editor" name="editSourceFile" required ng-model="model.package.sourcefile"
+                                           placeholder="Enter partial or absolute URL, or select from the filesystem."/>
 
-                                <umb-node-preview ng-if="model.package.sourcefile" icon="'icon-document'" name="model.package.sourcefile" allow-remove="true" on-remove="removeRulesFile()">
-                                </umb-node-preview>
+                                    <umb-button action="openRulesFilePicker()"
+                                                label="Select"
+                                                type="button"></umb-button>
+
+                                </div>
 
-                                <a ng-hide="model.package.sourcefile" href="" class="umb-node-preview-add" ng-click="openRulesFilePicker()" prevent-default>
-                                    <localize key="general_add">Add</localize>
-                                </a>
                                 <span ng-messages="packageForm.editSourceFile.$error" show-validation-on-submit>
                                     <span class="help-inline" ng-message="required"><localize key="iconicValidation_rules">Please select a valid CSS file</localize></span>
                                 </span>
@@ -118,7 +123,8 @@
 
                 <umb-box ng-show="error" class="umb-alert--warning" style="background-color: #f5c1bc;">
                     <umb-box-content>
-                        <umb-icon icon="icon-alert"></umb-icon> {{ error }}</umb-box-content>
+                        <umb-icon icon="icon-alert"></umb-icon> {{ error }}
+                    </umb-box-content>
                 </umb-box>
             </umb-editor-container>
 

UmbracoV10/App_Plugins/Iconic/Views/iconic.html

@@ -1,6 +1,6 @@
 <div class="our-iconic__container flex" ng-controller="Our.Iconic.Controller">
 
-    <div class="umb-panel-header-icon" ng-click="overlay.show = true" ng-class="{'-placeholder': model.value===null ||model.value===''}" title="{{model.value.style}}">
+    <div class="umb-panel-header-icon" ng-click="openOverlay()" ng-class="{'-placeholder': model.value===null ||model.value===''}" title="{{model.value.style}}">
 
         <localize ng-show="!modelIsValid" key="general_add" class="ng-isolate-scope" style="font-size: 1rem;">Add</localize>
 
@@ -13,9 +13,7 @@
         <div ng-if="modelIsValid"><small><em>{{model.value.icon}}</em></small></div>
 
         <button type="button" ng-if="modelIsValid" class="umb-node-preview__action umb-node-preview__action--red ng-scope" ng-click="removeIcon()" style="margin-left: 0;" prevent-default>
-           <localize key="general_remove">Remove</localize>
+            <localize key="general_remove">Remove</localize>
         </button>
     </div>
-    <umb-overlay ng-if="overlay.show" model="overlay" view="overlay.view" position="right">
-    </umb-overlay>
 </div>

UmbracoV10/App_Plugins/Iconic/js/src/iconic.controller.js

@@ -1,12 +1,12 @@
 angular.module("umbraco")
-    .controller("Our.Iconic.Controller", ['$scope', 'assetsService', 'umbRequestHelper', function($scope, assetsService, umbRequestHelper) {
+    .controller("Our.Iconic.Controller", ['$scope', 'assetsService', 'umbRequestHelper', 'overlayService', function ($scope, assetsService, umbRequestHelper, overlayService) {
         var config = $scope.model.config;
 
         $scope.pckg;
         $scope.modelIsValid = false;
         $scope.icon;
 
-        $scope.selectIcon = function(model) {
+        $scope.selectIcon = function (model) {
             if (model.pickerData.icon && model.pickerData.packageId) {
                 $scope.pckg = loadPackage(config.packages, model.pickerData.packageId);
                 $scope.model.value = model.pickerData;
@@ -18,23 +18,28 @@ angular.module("umbraco")
         };
 
 
-        $scope.removeIcon = function() {
+        $scope.removeIcon = function () {
             $scope.model.value = {};
             $scope.modelIsValid = false;
         };
 
         $scope.overlay = {
-            view: umbRequestHelper.convertVirtualToAbsolutePath("~/app_plugins/iconic/views/iconic.dialog.html"),
+            view: umbRequestHelper.convertVirtualToAbsolutePath("~/App_plugins/Iconic/Views/iconic.dialog.html"),
             title: "Select an icon",
             hideSubmitButton: true,
             submit: $scope.selectIcon,
-            close: function() {
-                $scope.overlay.show = false;
+            close: function () {
+                overlayService.close();
             },
             pickerData: $scope.model.value,
-            pickerConfig: config
+            pickerConfig: config,
+            position: 'right'
         };
 
+        $scope.openOverlay = function () {
+            overlayService.open($scope.overlay);
+        }
+
 
         function loadPackage(packages, packageId) {
             return packages.find((el) => el.id === packageId);

UmbracoV10/App_Plugins/Iconic/js/src/iconic.dialog.controller.js

@@ -15,10 +15,17 @@
 
             $scope.loading = true;            
 
-            assetsService.loadCss('~/' + pckg.cssfile.replace(/wwwroot\//i, '')).then(function() {
-                $scope.loading = false;
-                $scope.pckgselected = pckg;
-            });
+            var cssUri = isExternalUri(pckg.cssfile) ? pckg.cssfile :
+                umbRequestHelper.convertVirtualToAbsolutePath('~/' + pckg.cssfile.replace(/wwwroot\//i, ''));
+
+            assetsService.loadCss(cssUri).then(function () {            
+                .then(function () {
+                    $scope.loading = false;
+                    $scope.pckgselected = pckg;
+                })
+                .catch(function (err) {
+                    throw err;
+                });
 
         }
 

UmbracoV10/App_Plugins/Iconic/js/src/iconic.prevalues.editor.controller.js

@@ -14,8 +14,12 @@
                 extractStyles(
                     $scope.model.package,
                     function(extractedStyles) {
-                        $scope.previewIcon = extractedStyles[0];                        
-                        assetsService.loadCss(umbRequestHelper.convertVirtualToAbsolutePath('~/' + $scope.model.package.cssfile.replace(/wwwroot\//i, '')));
+                        $scope.previewIcon = extractedStyles[0];     
+
+                        var cssUri = isExternalUri($scope.model.package.cssfile) ? $scope.model.package.cssfile :
+                            umbRequestHelper.convertVirtualToAbsolutePath('~/' + $scope.model.package.cssfile.replace(/wwwroot\//i, ''));
+
+                        assetsService.loadCss(cssUri);
                         $scope.previewButtonState = "success";
                     },
                     function() {
@@ -104,6 +108,10 @@
             );
         }
 
+        function isExternalUri(uri) {
+            return uri.indexOf("://") > -1;
+        }
+
         function displayError(alias) {
             localizationService.localize(alias).then(function(response) {
                 $scope.error = response.value;
@@ -158,7 +166,9 @@
             if (!item.sourcefile) item.sourcefile = item.cssfile;
 
 
-            var path = umbRequestHelper.convertVirtualToAbsolutePath("~/" + item.sourcefile.replace("wwwroot/", ""));
+            var path = isExternalUri(item.sourcefile) ?
+                item.sourcefile :
+                umbRequestHelper.convertVirtualToAbsolutePath("~/" + item.sourcefile.replace("wwwroot/", ""));
 
             $http.get(path).then(
                 function(response) {