Fixed several designer issues (#844)

package.json

@@ -25,65 +25,65 @@
     "devDependencies": {
         "@types/chai": "^4.2.12",
         "@types/google-maps": "^3.2.2",
-        "@types/knockout": "^3.4.67",
+        "@types/knockout": "^3.4.68",
         "@types/knockout.mapping": "^2.0.35",
         "@types/knockout.validation": "0.0.37",
-        "@types/lodash": "^4.14.158",
+        "@types/lodash": "^4.14.160",
         "@types/mime-types": "^2.1.0",
-        "@types/mocha": "8.0.0",
-        "@types/node": "^14.0.26",
-        "autoprefixer": "^9.8.5",
+        "@types/mocha": "8.0.3",
+        "@types/node": "^14.6.0",
+        "autoprefixer": "^9.8.6",
         "awesome-typescript-loader": "^5.2.1",
         "azure-storage": "^2.10.3",
         "chai": "^4.2.0",
         "clean-webpack-plugin": "2.0.2",
         "copy-webpack-plugin": "^6.0.3",
-        "css-loader": "^3.6.0",
+        "css-loader": "^4.2.2",
         "extract-text-webpack-plugin": "^4.0.0-beta.0",
         "file-loader": "^6.0.0",
-        "html-loader": "^1.1.0",
-        "mini-css-extract-plugin": "^0.9.0",
-        "mocha": "^8.0.1",
+        "html-loader": "^1.2.1",
+        "mini-css-extract-plugin": "^0.10.0",
+        "mocha": "^8.1.1",
         "node-sass": "^4.14.1",
         "path": "^0.12.7",
         "postcss-loader": "^3.0.0",
         "raw-loader": "^4.0.1",
-        "sass-loader": "^9.0.2",
+        "sass-loader": "^9.0.3",
         "style-loader": "^1.2.1",
-        "terser-webpack-plugin": "^3.0.7",
-        "ts-node": "8.10.2",
-        "tslint": "^6.1.2",
-        "typescript": "3.9.7",
+        "terser-webpack-plugin": "^4.1.0",
+        "ts-node": "9.0.0",
+        "tslint": "^6.1.3",
+        "typescript": "4.0.2",
         "url-loader": "^4.1.0",
-        "webpack": "^4.44.0",
+        "webpack": "^4.44.1",
         "webpack-cli": "^3.3.12",
         "webpack-dev-server": "^3.11.0",
-        "webpack-merge": "^5.0.9"
+        "webpack-merge": "^5.1.2"
     },
     "dependencies": {
-        "@paperbits/azure": "0.1.306",
-        "@paperbits/common": "0.1.306",
-        "@paperbits/core": "0.1.306",
-        "@paperbits/prosemirror": "0.1.306",
-        "@paperbits/styles": "0.1.306",
+        "@paperbits/azure": "0.1.313",
+        "@paperbits/common": "0.1.313",
+        "@paperbits/core": "0.1.313",
+        "@paperbits/prosemirror": "0.1.313",
+        "@paperbits/styles": "0.1.313",
         "@webcomponents/custom-elements": "1.4.2",
         "@webcomponents/shadydom": "^1.7.4",
         "adal-vanilla": "^1.0.18",
         "applicationinsights-js": "^1.0.21",
-        "client-oauth2": "4.3.2",
+        "client-oauth2": "4.3.3",
         "core-js": "^3.6.5",
         "d3": "^5.16.0",
         "google-maps": "^4.3.2",
-        "js-beautify": "^1.11.0",
+        "js-beautify": "^1.13.0",
         "knockout": "^3.5.1",
         "knockout-mapping": "^2.6.0",
         "knockout.validation": "^2.0.4",
-        "liquidjs": "^9.14.1",
-        "lodash": "^4.17.19",
-        "lunr": "^2.3.8",
+        "liquidjs": "^9.15.0",
+        "lodash": "^4.17.20",
+        "lunr": "^2.3.9",
         "moment": "^2.27.0",
-        "msal": "^1.3.3",
-        "prismjs": "^1.20.0",
+        "msal": "^1.3.4",
+        "prismjs": "^1.21.0",
         "remark": "^12.0.1",
         "remark-html": "^12.0.0",
         "slick": "^1.12.2",

src/apim.design.module.ts

@@ -57,6 +57,7 @@ import { StaticRoleService } from "./services/roleService";
 import { ProvisionService } from "./services/provisioningService";
 import { PolicyService } from "./services/policyService";
 import { OAuthService } from "./services/oauthService";
+import { HistoryRouteHandler } from "@paperbits/common/routing";
 
 
 export class ApimDesignModule implements IInjectorModule {
@@ -121,5 +122,6 @@ export class ApimDesignModule implements IInjectorModule {
         injector.bindToCollection("routeGuards", UnsavedChangesRouteGuard);
         injector.bindInstance("reservedPermalinks", Constants.reservedPermalinks);
         injector.bindSingleton("oauthService", OAuthService);
+        injector.bindToCollection("autostart", HistoryRouteHandler);
     }
 }

src/apim.runtime.module.ts

@@ -17,7 +17,7 @@ import { IInjector, IInjectorModule } from "@paperbits/common/injection";
 import { DefaultEventManager } from "@paperbits/common/events";
 import { XmlHttpRequestClient } from "@paperbits/common/http";
 import { SettingsProvider } from "@paperbits/common/configuration";
-import { DefaultRouter } from "@paperbits/common/routing";
+import { DefaultRouter, LocationRouteHandler, HistoryRouteHandler } from "@paperbits/common/routing";
 import { ConsoleLogger } from "@paperbits/common/logging";
 import { KnockoutRegistrationLoaders } from "@paperbits/core/ko/knockout.loaders";
 import { ApiList, ApiListDropdown, ApiListTiles } from "./components/apis/list-of-apis/ko/runtime";
@@ -134,5 +134,8 @@ export class ApimRuntimeModule implements IInjectorModule {
         injector.bindSingleton("viewStack", ViewStack);
         injector.bindSingleton("sessionManager", DefaultSessionManager);
         injector.bind("tagInput", TagInput);
+        injector.bindToCollection("autostart", location.href.includes("designtime=true")
+            ? HistoryRouteHandler
+            : LocationRouteHandler);
     }
 }

src/startup.runtime.ts

@@ -1,18 +1,10 @@
 import { InversifyInjector } from "@paperbits/common/injection";
 import { ApimRuntimeModule } from "./apim.runtime.module";
-import { HistoryRouteHandler, LocationRouteHandler } from "@paperbits/common/routing";
 
 
 const injector = new InversifyInjector();
 injector.bindModule(new ApimRuntimeModule());
 
-if (location.href.includes("designtime=true")) {
-    injector.bindToCollection("autostart", HistoryRouteHandler);
-}
-else {
-    injector.bindToCollection("autostart", LocationRouteHandler);
-}
-
 document.addEventListener("DOMContentLoaded", () => {
     injector.resolve("autostart");
 });

src/themes/designer/styles/icons.scss

@@ -1,7 +1,7 @@
 .paperbits-icon {
     display: inline-block;
     font: normal normal normal 1em/1 "paperbits";
-    font-size: 1.3em;
+    font-size: 1.1em;
     vertical-align: middle;
     speak: none;
     text-transform: none;

src/themes/designer/styles/lists.scss

@@ -82,7 +82,7 @@
     }
 
     &.selected {
-        @include selection();
+        font-weight: bold;
     }
 
     .list-item-handle {
@@ -110,7 +110,7 @@
         display: inline-block;
         width: 130px;
         text-align: center;
-        padding: 5px;
+        padding: 15px 5px;
         line-height: 1.5em;
         margin-bottom: 15px;
         flex-basis: auto;

src/themes/designer/styles/toolboxes.scss

@@ -25,7 +25,7 @@ h2 {
 .toolbox {
     display: flex;
     flex-direction: column;
-    padding: 7px;
+    padding: $toolbox-padding;
     z-index: $z-index-base;
     max-height: calc(100% - 40px);
 
@@ -264,3 +264,10 @@ h2 {
     @include fit;
     background-size: cover;
 }
+
+.subtle {
+    font-size: .9em;
+    color: lighten($color-base, 10%);
+    font-family: monospace;
+    padding-top: 5px;
+}

src/themes/designer/styles/variables.scss

@@ -26,7 +26,8 @@ $toolbox-btn-size: 45px;
 $toolbox-btn-padding: 5px;
 $toolbox-btn-active-bg: #F9FBFC;
 $toolbox-btn-active-border: #96989A;
-$toolbox-border-radius: 4px;
+$toolbox-border-radius: 10px;
+$toolbox-padding: 8px;
 
 /* Workshops */
 $workshop-button-height: 2em;