Preview styling and toggling update

MaterialGraphProject/Assets/UnityShaderEditor/Editor/Drawing/Views/MaterialNodeView.cs

             {
                 name = "controls"
             };
-            leftContainer.Add(m_ControlsContainer);
+            topContainer.Add(m_ControlsContainer);
+            m_ControlsContainer.SendToBack();
+            inputContainer.PlaceBehind(m_ControlsContainer);
 
             if (node.hasPreview)
             {
                     m_PreviewData = previewManager.GetPreview(inNode);
                     m_PreviewData.onPreviewChanged += UpdatePreviewTexture;
                     UpdatePreviewTexture();
-                    m_PreviewContainer.Add(m_PreviewTextureView);
-                    var collapsePreviewButton = new VisualElement { name = "collapse", text = "▲" };
+                    var collapsePreviewButton = new VisualElement { name = "collapse"/*, text = "▲" */};
+                    collapsePreviewButton.Add(new VisualElement { name = "icon" });
                     collapsePreviewButton.AddManipulator(new Clickable(() =>
                     {
                         node.owner.owner.RegisterCompleteObjectUndo("Collapse Preview");
-                    m_PreviewContainer.Add(collapsePreviewButton);
+                    m_PreviewTextureView.Add(collapsePreviewButton);
-                    var expandPreviewButton = new VisualElement { name = "expand", text = "▼" };
+                    var expandPreviewButton = new VisualElement { name = "expand"};
+                    expandPreviewButton.Add(new VisualElement { name = "icon"});
                     expandPreviewButton.AddManipulator(new Clickable(() =>
                     {
                         node.owner.owner.RegisterCompleteObjectUndo("Expand Preview");
                 }
-                leftContainer.Add(m_PreviewContainer);
+
+                extensionContainer.Add(m_PreviewContainer);
             }
 
             m_ControlViews = new List<VisualElement>();
                 return;
             if (expanded)
             {
+                if (m_PreviewTextureView.parent != m_PreviewContainer)
+                {
+                    m_PreviewContainer.Add(m_PreviewTextureView);
+                }
+                if (m_PreviewTextureView.parent == m_PreviewContainer)
+                {
+                    m_PreviewTextureView.RemoveFromHierarchy();
+                }
                 m_PreviewContainer.RemoveFromClassList("expanded");
                 m_PreviewContainer.AddToClassList("collapsed");
             }
                 if (slot.hidden)
                     continue;
 
-                var data = InstantiateNodeAnchor(Orientation.Horizontal, slot.isInputSlot ? Direction.Input : Direction.Output, typeof(Vector4));
+                var data = InstantiateNodeAnchor(slot.isInputSlot ? Direction.Input : Direction.Output, typeof(Vector4));
                 data.capabilities &= ~Capabilities.Movable;
                 data.anchorName = slot.displayName;
                 data.userData = slot;
 
         void OnResize(Vector2 deltaSize)
         {
-            var updatedWidth = leftContainer.layout.width + deltaSize.x;
+            var updatedWidth = topContainer.layout.width + deltaSize.x;
             var updatedHeight = m_PreviewTextureView.layout.height + deltaSize.y;
 
             var previewNode = node as PreviewNode;
 
         void UpdatePreviewTexture()
         {
-            if (m_PreviewData.texture == null || !node.previewExpanded)
+            if (m_PreviewData.texture == null || !node.previewExpanded || m_PreviewTextureView.panel == null)
             {
                 m_PreviewTextureView.visible = false;
                 m_PreviewTextureView.image = Texture2D.blackTexture;
                 m_PreviewTextureView.AddToClassList("visible");
                 m_PreviewTextureView.RemoveFromClassList("hidden");
                 m_PreviewTextureView.image = m_PreviewData.texture;
+                m_PreviewTextureView.Dirty(ChangeType.Repaint);
+                m_PreviewTextureView.style.height = m_PreviewTextureView.layout.width;
-            Dirty(ChangeType.Repaint);
         }
 
         void UpdateControls()
             var width = previewNode.width;
             var height = previewNode.height;
 
-            leftContainer.style.width = width;
             m_PreviewTextureView.style.height = height;
         }
 

MaterialGraphProject/Assets/UnityShaderEditor/Editor/Resources/Styles/MaterialGraph.uss

     width: 400;
 }
 
-MaterialGraphView {
-    background-color: rgb(20, 21, 21);
-}
-MaterialNodeView > .mainContainer > #left > #previewContainer {
-    width: 200;
-}
-
-MaterialNodeView > .mainContainer > #left > #previewContainer.expanded > #preview.active,
-MaterialNodeView > .mainContainer > #left > #previewContainer.expanded > #preview.visible {
-    width: 200;
-    height: 200;
-}
-
-MaterialNodeView > .mainContainer > #left > #previewContainer.collapsed > #collapse {
-    height: 0;
-}
-
-MaterialNodeView > .mainContainer > #left > #previewContainer.expanded > #collapse {
-    background-color: rgba(0, 0, 0, 0.5);
-    text-color: rgba(255, 255, 255, 0.75);
-    border-color: rgba(255, 255, 255, 0.75);
-    border-radius: 2;
-    text-alignment: middle-center;
-    position-left: 87;
-    position-right: 87;
-    position-top: 5;
-    position-type: absolute;
-    height: 0;
-    border-top-width: 0;
-    border-bottom-width: 0;
-    border-left-width: 0;
-    border-right-width: 0;
+MaterialNodeView #previewContainer > #preview
+{
+    align-items:center;
-MaterialNodeView > .mainContainer > #left > #previewContainer.expanded:hover > #collapse {
+MaterialNodeView #previewContainer > #preview > #collapse {
+    background-color: #000;
+    border-color: #F0F0F0;
+    width: 20;
+    height: 20;
+    border-radius: 1;
-    height: 26;
+    margin-top: 4;
+    opacity: 0.6;
+    align-items:center;
+    justify-content:center;
-MaterialNodeView > .mainContainer > #left > #previewContainer.expanded > #collapse:hover {
-    background-color: rgba(0, 0, 0, 0.75);
-    text-color: rgba(255, 255, 255, 1);
-    border-color: rgba(255, 255, 255, 1);
+
+MaterialNodeView #previewContainer > #preview > #collapse > #icon
+{
+    background-image : resource("GraphView/Nodes/PreviewCollapse.png"); 
+    width: 16;
+    height: 16;
-
-MaterialNodeView > .mainContainer > #left > #previewContainer.expanded > #collapse:active {
-	background-color: rgba(0, 0, 0, 0.66);
+MaterialNodeView #previewContainer > #preview > #collapse:hover {
+    opacity: 1.0;
-MaterialNodeView > .mainContainer > #left > #previewContainer.expanded > #expand {
+MaterialNodeView #previewContainer.collapsed > #preview > #collapse {
-MaterialNodeView > .mainContainer > #left > #previewContainer.collapsed > #expand {
-    text-alignment: middle-center;
-    text-color: rgb(153, 153, 153);
+MaterialNodeView #previewContainer > #expand {
-    width: 50;
+    width: 56;
+    height: 16;
+    flex-direction: row;
+    justify-content:center;
+}
+
+MaterialNodeView #previewContainer > #expand > #icon {
+    align-self: center;
+    background-image : resource("GraphView/Nodes/PreviewExpand.png"); 
+    width: 16;
+    height: 16;
-MaterialNodeView > .mainContainer > #left > #previewContainer.collapsed > #expand:hover {
-    background-color: rgba(0, 0, 0, 0.5);
-    text-color: rgba(255, 255, 255, 1);
+MaterialNodeView #previewContainer.collapsed > #expand:hover {
+    background-color: #2B2B2B;
+}
+MaterialNodeView #previewContainer.expanded > #expand {
+    height: 0;
 }
 
 MaterialNodeView > #resize {
 GraphInspectorView {
     background-color: rgb(56, 56, 56);
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: flex-start;
-
+ 
 GraphInspectorView > #top > #header {
     background-color: rgb(64, 64, 64);
     border-color: rgb(79, 79, 79);