Fix/use hostconfig to add container styles

source/nodejs/adaptivecards-designer/css/adaptivecards-default.css

@@ -29,13 +29,6 @@ a.default-ac-anchor:visited:active {
     color: #004D84;
 }
 
-#treeViewSheetHost .default-ac-container,
-#propertySheetHost .default-ac-container,
-#treeViewSheetHost .ac-container,
-#propertySheetHost .ac-container {
-    background-color: #f9f9f9 !important; /* The important overrides inline CSS properties added via JS */
-}
-
 [id="treeViewSheetHost"],
 [id="propertySheetHost"] {
     min-width: 205px;

source/nodejs/adaptivecards-designer/css/card-designer.css

@@ -68,7 +68,6 @@
 }
 
 .acd-peer.selected {
-    /* background-color: rgba(227, 255, 218, 0.1); */
     border: solid 1px #78dd03;
 }
 
@@ -95,7 +94,7 @@
 /*
 * Header and Aside menus
 */
-.aside-menu,
+.acd-aside-menu,
 .treeview-menu,
 .properties-menu {
     align-items: center;
@@ -106,7 +105,7 @@
     padding: 6px 12px;
 }
 
-.aside-menu__title,
+.acd-aside-menu__title,
 .treeview-menu__title,
 .properties-menu__title {
     color: #000000;
@@ -116,15 +115,15 @@
     width: 120px;
 }
 
-.aside-menu__bullet,
+.acd-aside-menu__bullet,
 .treeview-menu__bullet,
 .properties-menu__bullet {
     align-items: center;
     cursor: pointer;
     display: flex;
 }
 
-.aside-menu__icon,
+.acd-aside-menu__icon,
 .treeview-menu__icon,
 .properties-menu__icon {
     background-image: url("/assets/icons/hide.svg");
@@ -141,7 +140,7 @@
     margin-right: 0;
 }
 
-.aside-menu__description,
+.acd-aside-menu__description,
 .treeview-menu__description,
 .properties-menu__description {
     color: #4a4a4a;
@@ -157,12 +156,12 @@
     overflow-y: auto;
 }
 
-.is-toggled .aside-menu {
+.is-toggled .acd-aside-menu {
     width: 170px;
     height: 30px;
 }
 
-.is-toggled .aside-menu {
+.is-toggled .acd-aside-menu {
     transform: translate(-72px, 70px) rotate(-90deg);
 }
 
@@ -512,14 +511,9 @@
 /*
 * Fixes Properties Panel CSS inline styles added via JavaScript
 */
-.default-ac-columnSet.wrapper .default-ac-container:nth-child(1),
-.default-ac-columnSet.wrapper .default-ac-container:nth-child(3) {
-    flex-direction: row !important;
-}
+
 
 .default-ac-columnSet.wrapper .default-ac-container:nth-child(1) {
-    justify-content: flex-end !important;
-    align-items: center;
     padding-right: 6px !important;
     flex: 1 1 140px !important;
     margin-left: 10px;
@@ -529,3 +523,9 @@
     padding-left: 0 !important;
     flex: 2 1 125px !important;
 }
+
+.acd-peerButton[type="button"] {
+    background-color: transparent;
+    border: 0;
+    padding: 0;
+}

source/nodejs/adaptivecards-designer/index.html

@@ -29,14 +29,14 @@
         </div>
         <div class="content" style="display: flex; flex: 1 1 auto; overflow-y: hidden;">
             <section class="aside js-aside">
-                <nav class="aside-menu">
-                    <span class="aside-menu__title">Tool box</span>
-                    <span class="aside-menu__bullet js-aside-bullet">
-                        <span class="aside-menu__icon js-aside-icon"></span>
-                        <span class="aside-menu__description js-aside-description">Hide</span>
+                <nav class="acd-aside-menu">
+                    <span class="acd-aside-menu__title">Tool box</span>
+                    <span class="acd-aside-menu__bullet js-aside-bullet">
+                        <span class="acd-aside-menu__icon js-aside-icon"></span>
+                        <span class="acd-aside-menu__description js-aside-description">Hide</span>
                     </span>
                 </nav>
-                <ul class="aside-items js-aside-items"></ul>
+                <ul id="toolPalette" class="aside-items js-aside-items"></ul>
             </section>
             <div style="display: flex; flex-direction: column; flex: 1 1 100%; overflow: hidden;">
                 <div style="display: flex; flex: 1 1 100%; overflow: hidden;">

source/nodejs/adaptivecards-designer/src/IVendors.ts

@@ -0,0 +1,17 @@
+export interface FullScreenElement extends HTMLElement {
+    mozRequestFullScreen: () => void
+    msRequestFullscreen: () => void
+    onfullscreenchange: (this: Element, ev: Event) => any;
+    onmozfullscreenchange: (this: Element, ev: Event) => any;
+    MSFullscreenChange: (this: Element, ev: Event) => any;
+}
+
+export interface FullScreenDocument extends Document {
+    exitFullscreen: () => void
+    webkitExitFullscreen: () => void
+    mozCancelFullScreen: () => void
+    msExitFullscreen: () => void
+    fullscreen: boolean
+    webkitIsFullScreen: boolean
+    mozFullScreen: boolean
+}

source/nodejs/adaptivecards-designer/src/adaptive-card-schema.ts

@@ -902,21 +902,3 @@ export const adaptiveCardSchema =
     }
   }
 };
-
-export interface FullScreenElement extends HTMLElement {
-    mozRequestFullScreen: () => void
-    msRequestFullscreen: () => void
-    onfullscreenchange: (this: Element, ev: Event) => any;
-    onmozfullscreenchange: (this: Element, ev: Event) => any;
-    MSFullscreenChange: (this: Element, ev: Event) => any;
-}
-
-export interface FullScreenDocument extends Document {
-    exitFullscreen: () => void
-    webkitExitFullscreen: () => void
-    mozCancelFullScreen: () => void
-    msExitFullscreen: () => void
-    fullscreen: boolean
-    webkitIsFullScreen: boolean
-    mozFullScreen: boolean
-}

source/nodejs/adaptivecards-designer/src/app.ts

@@ -125,7 +125,7 @@ class ElementPaletteItem extends BasePaletteItem {
     protected getText(): string {
         return this.typeRegistration.typeName;
     }
-    
+
     readonly typeRegistration: Adaptive.ITypeRegistration<Adaptive.CardElement>;
 
     constructor(typeRegistration: Adaptive.ITypeRegistration<Adaptive.CardElement>) {
@@ -146,7 +146,7 @@ class SnippetPaletteItem extends BasePaletteItem {
     protected getText(): string {
         return this.name;
     }
-    
+
     readonly name: string;
     snippet: object;
 
@@ -168,7 +168,7 @@ class SnippetPaletteItem extends BasePaletteItem {
 
                     let peer = Designer.CardDesigner.cardElementPeerRegistry.createPeerInstance(designer, null, adaptiveElement);
                     peer.initializeCardElement();
-            
+
                     return peer;
                 }
             }
@@ -236,7 +236,6 @@ class DesignerApp {
 
             properties.appendChild(card.render());
             let cardNodes = card.renderedElement.children;
-            (cardNodes[0] as HTMLElement).style.backgroundColor = "transparent";
 
             for (let element = 0; element < cardNodes.length; element++) {
                 (cardNodes[element] as HTMLElement).className += " wrapper";
@@ -259,7 +258,7 @@ class DesignerApp {
 
         this.paletteHostElement.appendChild(paletteItem.renderedElement);
     }
-    
+
     private buildPalette() {
         if (this.paletteHostElement) {
             this.paletteHostElement.innerHTML = "";
@@ -311,9 +310,48 @@ class DesignerApp {
                 for (var i = 0; i < sortedRegisteredTypes[objectKey].items.length; i++) {
                     var paletteItem = new ElementPaletteItem(sortedRegisteredTypes[objectKey].items[i]);
                     this.addPaletteItem(paletteItem);
-                    
+
                 }
             });
+
+            /* This is to test "snippet" support. Snippets are not yet fully baked
+            let personaHeaderSnippet = new SnippetPaletteItem("Persona header");
+            personaHeaderSnippet.snippet = {
+                type: "ColumnSet",
+                columns: [
+                    {
+                        width: "auto",
+                        items: [
+                            {
+                                type: "Image",
+                                size: "Small",
+                                style: "Person",
+                                url: "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg"
+                            }
+                        ]
+                    },
+                    {
+                        width: "stretch",
+                        items: [
+                            {
+                                type: "TextBlock",
+                                text: "John Doe",
+                                weight: "Bolder",
+                                wrap: true
+                            },
+                            {
+                                type: "TextBlock",
+                                spacing: "None",
+                                text: "Additional information",
+                                wrap: true
+                            }
+                        ]
+                    }
+                ]
+            };
+
+            this.addPaletteItem(personaHeaderSnippet);
+            */
         }
     }
 
@@ -341,7 +379,7 @@ class DesignerApp {
 
     private recreateDesigner() {
         let styleSheetLinkElement = <HTMLLinkElement>document.getElementById("adaptiveCardStylesheet");
-    
+
         if (styleSheetLinkElement == null) {
             styleSheetLinkElement = document.createElement("link");
             styleSheetLinkElement.id = "adaptiveCardStylesheet";
@@ -358,7 +396,7 @@ class DesignerApp {
         if (designerBackground) {
             designerBackground.style.backgroundColor = this._selectedHostContainer.getBackgroundColor();
         }
-    
+
         this._selectedHostContainer.initialize();
 
         this._designerHostElement.innerHTML = "";
@@ -602,7 +640,7 @@ class Splitter {
     private pointerMove(e: PointerEvent) {
         if (this._isPointerDown) {
             e.preventDefault();
-            
+
             let sizeApplied = false;
 
             if (this.isVertical) {
@@ -700,7 +738,7 @@ window.onload = () => {
     app.propertySheetHostElement = document.getElementById("propertySheetHost");
     app.treeViewSheetHostElement = document.getElementById("treeViewSheetHost");
     app.commandListHostElement = document.getElementById("commandsHost");
-    app.paletteHostElement = document.querySelector(".aside-items");
+    app.paletteHostElement = document.getElementById("toolPalette");
 
     app.createContainerPicker().attach(document.getElementById("containerPickerHost"));
 

source/nodejs/adaptivecards-designer/src/card-designer.ts

@@ -497,7 +497,7 @@ export abstract class DesignerPeer extends DraggableElement {
                 },
                 containerStyles: {
                     default: {
-                        backgroundColor: "#FFFFFF",
+                        backgroundColor: "#f9f9f9",
                         foregroundColors: {
                             default: {
                                 default: "#333333",
@@ -1021,7 +1021,6 @@ export class CardElementPeer extends DesignerPeer {
     addPropertySheetEntries(card: Adaptive.AdaptiveCard, includeHeader: boolean) {
         if (includeHeader) {
             let container = new Adaptive.Container();
-            container.style = "emphasis";
             container.padding = new Adaptive.PaddingDefinition(
                 Adaptive.Spacing.Small,
                 Adaptive.Spacing.Small,

source/nodejs/adaptivecards-designer/src/components/fullscreenhandler.ts

@@ -1,4 +1,4 @@
-import { FullScreenDocument, FullScreenElement } from "../adaptive-card-schema";
+import { FullScreenDocument, FullScreenElement } from "../IVendors";
 
 export default class FullScreenHandler {
     private _body: FullScreenElement;

source/nodejs/adaptivecards/src/card-elements.ts

@@ -1179,7 +1179,7 @@ export class Image extends CardElement {
                     message: "Invalid image " + name + ": " + value
                 },
                 errors
-            );    
+            );
         }
 
         return 0;
@@ -1272,7 +1272,7 @@ export class Image extends CardElement {
                     errorElement.style.display = "flex";
                     errorElement.style.alignItems = "center";
                     errorElement.style.justifyContent = "center";
-                    errorElement.style.backgroundColor = "#EEEEEE";
+                    errorElement.style.backgroundColor = "#eeeeee";
                     errorElement.style.color = "black";
                     errorElement.innerText = ":-(";
                     errorElement.style.padding = "10px";
@@ -2374,7 +2374,7 @@ export abstract class Action {
         if (this.onExecute) {
             this.onExecute(this);
         }
-        
+
         raiseExecuteActionEvent(this);
     }
 
@@ -2405,7 +2405,7 @@ export abstract class Action {
 
     parse(json: any, errors?: Array<IValidationError>) {
         raiseParseActionEvent(this, json, errors);
-	    
+
         this.id = json["id"];
         this.title = json["title"];
         this.iconUrl = json["iconUrl"];
@@ -5009,7 +5009,7 @@ export class AdaptiveCard extends ContainerWithActions {
                         message: e.message
                     },
                     errors
-                );                        
+                );
             }
         }
 
@@ -5140,7 +5140,7 @@ const defaultHostConfig: HostConfig.HostConfig = new HostConfig.HostConfig(
         },
         containerStyles: {
             default: {
-                backgroundColor: "#FFFFFF",
+                backgroundColor: "#F9F9F9",
                 foregroundColors: {
                     default: {
                         default: "#333333",