public VisualStudioView() { var ToolbarHeight = "24px"; var Content = new IHTMLDiv(); this.Container = Content; this.Container.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute; this.Container.style.width = "100%"; this.Container.style.height = "100%"; new TwentyTenWorkspace().ToBackground(Content.style, true); var EditorFrame = VisualStudioView.CreateEditor(); var ToolbarContainerBackground = new IHTMLDiv().With( k => { k.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute; k.style.left = "0px"; k.style.right = "0px"; k.style.top = "0px"; k.style.height = ToolbarHeight; k.style.backgroundColor = Color.White; //k.style.Opacity = 0.5; } ).AttachTo(Content); var ToolbarContainer = new IHTMLDiv().With( k => { k.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute; k.style.left = "0px"; k.style.right = "0px"; k.style.top = "0px"; k.style.height = ToolbarHeight; } ).AttachTo(Content); var ToolbarContent = new IHTMLDiv().AttachTo(ToolbarContainer); ToolbarContent.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.relative; this.PriorityButtons = new IHTMLSpan().AttachTo(ToolbarContent); this.ApplyToolbarButtonStyle = k => { k.style.verticalAlign = "top"; k.style.padding = "0"; k.style.margin = "0"; k.style.overflow = ScriptCoreLib.JavaScript.DOM.IStyle.OverflowEnum.hidden; k.style.SetSize(24, 24); VisualStudioView.ApplyMouseHoverStyle(k, Color.Transparent); }; Func<IHTMLImage, IHTMLButton> AddButtonDummy = (img) => { return new IHTMLButton { img.WithinContainer() }.With(k => ApplyToolbarButtonStyle(k)).AttachTo(ToolbarContent); }; Func<IHTMLImage, Action, IHTMLButton> AddButtonAction = (img, command) => { return AddButtonDummy(img).With( k => { k.onclick += delegate { command(); }; } ); }; Func<IHTMLImage, string, IHTMLButton> AddButton = (img, command) => { return AddButtonAction(img, () => EditorFrame.contentWindow.document.execCommand( command, false, null ) ); }; var RTAButtons = new Dictionary<string, IHTMLImage> { // http://trac.symfony-project.org/browser/plugins/dmCkEditorPlugin/web/js/ckeditor/_source/plugins?rev=27455 {"Bold", new RTA_bold()}, {"Underline", new RTA_underline()}, {"Strikethrough", new RTA_strikethrough()}, {"Italic", new RTA_italic()}, {"JustifyLeft", new RTA_justifyleft()}, {"JustifyCenter", new RTA_justifycenter()}, {"JustifyRight", new RTA_justifyright()}, {"JustifyFull", new RTA_justifyfull()}, {"Indent", new RTA_indent()}, {"Outdent", new RTA_outdent()}, {"Superscript", new RTA_superscript()}, {"Subscript", new RTA_sub()}, {"Removeformat", new RTA_removeformat()}, {"InsertOrderedList", new RTA_numberedlist()}, {"InsertUnorderedList", new RTA_numberedlist()}, {"undo", new RTA_undo()}, {"redo", new RTA_redo()}, }.ToDictionary( k => k.Key, k => AddButton(k.Value, k.Key) ); var Workspace = new IHTMLDiv().With( div => { div.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute; div.style.left = "6px"; div.style.right = "6px"; div.style.bottom = "6px"; div.style.top = "30px"; } ).AttachTo(Content); var ToolboxSplit = new HorizontalSplit { Minimum = 0.05, Maximum = 0.5, Value = 0.15, }; Action<HorizontalSplit> ApplyStyle = t => { t.Split.Splitter.style.backgroundColor = Color.None; t.SplitImageContainer.Orphanize(); t.SplitArea.Target.style.borderLeft = "0"; t.SplitArea.Target.style.borderRight = "0"; t.SplitArea.Target.style.width = "6px"; t.SplitArea.Target.style.Opacity = 0.7; t.SelectionColor = JSColor.Black; }; ToolboxSplit.With(ApplyStyle); var ToolboxContainer = ToolboxSplit.LeftContainer; ToolboxSplit.Split.Left.style.backgroundColor = Color.White; Action<string, string> AddGroup = (Header, Title) => { #region group { var s = new Section().ToSectionConcept(); s.Target.Header.style.marginLeft = "1em"; s.Header = Header; s.Header.title = Title; s.Content.Clear(); CreateToolboxTo(s.Content); s.IsExpanded = false; s.Target.Container.AttachTo(ToolboxContainer); } #endregion }; AddGroup("HTML", "For example a section or a split view"); AddGroup("Flash Components", "For example an empty sprite or a visualization"); AddGroup("Java Applets", "For example a calculator form or a visualization"); AddGroup("General", "Snippets"); var EditorTreeSplit = new HorizontalSplit { Minimum = 0.5, Maximum = 0.95, Value = 0.6, }; EditorTreeSplit.With(ApplyStyle); EditorTreeSplit.Split.Splitter.style.backgroundColor = Color.None; var EditorContainer = new IHTMLDiv { EditorFrame }; EditorContainer.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute; EditorContainer.style.top = "1.3em"; EditorContainer.style.left = "0px"; EditorContainer.style.right = "0px"; EditorContainer.style.bottom = "0.3em"; EditorContainer.style.backgroundColor = Color.White; var DocumentsContainer = EditorContainer.WithinContainer(); new IHTMLDiv().With( div => { div.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute; div.style.top = "0px"; div.style.height = "1em"; div.style.left = "0px"; div.style.right = "0px"; div.style.color = Color.White; div.Add("About.htm"); } ).AttachTo(DocumentsContainer); new IHTMLDiv().With( div => { div.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute; div.style.top = "1em"; div.style.height = "0.3em"; div.style.left = "0px"; div.style.right = "0px"; div.style.backgroundColor = Color.FromRGB(255, 232, 166); } ).AttachTo(DocumentsContainer); new IHTMLDiv().With( div => { div.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute; div.style.bottom = "0px"; div.style.height = "0.3em"; div.style.left = "0px"; div.style.right = "0px"; div.style.backgroundColor = Color.FromRGB(255, 232, 166); } ).AttachTo(DocumentsContainer); EditorTreeSplit.Split.LeftScrollable = DocumentsContainer; EditorTreeSplit.Split.RightContainer = DemoTree().Container.WithinContainer().With(div => div.style.backgroundColor = Color.White); ToolboxSplit.Split.RightScrollable = EditorTreeSplit.Container; ToolboxSplit.Container.AttachTo(Workspace); }