new feature in OpenPage

OpenPage/assets/scheme.html

@@ -19,7 +19,8 @@
                 <afx-button data-width = "25" data-id="btaj" iconclass = "fa fa-align-justify"></afx-button>
                 <afx-button data-width = "25" data-id="btindent" iconclass = "fa fa-indent"></afx-button>
                 <afx-button data-width = "25" data-id="btoutdent" iconclass = "fa fa-outdent"></afx-button>
-                <afx-list-view dropdown = "true" data-width="80" data-id="format-list"></afx-list-view>
+                <afx-button data-width = "25" data-id="btformat" iconclass = "fa fa-paint-brush"></afx-button>
+                <afx-list-view dropdown = "true" data-width="100" data-id="format-list"></afx-list-view>
                 <div data-width="5"></div>
                 <afx-nspinner data-width = "50" data-id="font-size" ></afx-nspinner>
                 <div data-width="5"></div>
@@ -30,6 +31,16 @@
             <div data-id="container">
                 <div data-id="odfcanvas"></div>
             </div>
+            <div data-height="5"></div>
+            <afx-hbox data-id="status-bar" data-height="28">
+                <div></div>
+                <afx-button data-width = "25" data-id="btzoomfix" iconclass = "fa fa-arrows-alt"></afx-button>
+                <div data-width="5"></div>
+                <afx-slider data-id="slzoom" data-width="150" max="400"></afx-slider>
+                <div data-width="5"></div>
+                <afx-label data-id = "lbzoom" data-width="40"></afx-label>
+            </afx-hbox>
+            
         </afx-vbox>
         
     </afx-hbox>

OpenPage/build/debug/main.css

@@ -23,21 +23,55 @@ afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"]
     border: 1px solid #eaeaea;
     box-shadow: 3px 3px 3px #9f9F9F;
 }
-afx-app-window[data-id="HyperLinkDialog"] afx-label.header span
+afx-app-window[data-id="OpenPage"] afx-hbox[data-id="status-bar"]
 {
-    font-weight: bold;
+    background-color: #f5f5f5;
+    border: 1px solid #eaeaea;
+    box-shadow: -3px -3px 3px #9f9F9F;
 }
-afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button{
+afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button, afx-app-window[data-id="OpenPage"] afx-button[data-id="btzoomfix"] button
+{
     border: 1px solid #f5f5f5;
     background-color: transparent;
     width:100%;
     height: 100%;
 }
 
-afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button:hover, afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button.btactive
+afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button:hover, afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button.btactive, afx-app-window[data-id="OpenPage"] afx-button[data-id="btzoomfix"] button:hover
 {
     border: 1px solid #759DC0;
     background-color: transparent;
     border-radius:5px;
     color:#759DC0;
+}
+afx-app-window[data-id="HyperLinkDialog"] afx-label.header span
+{
+    font-weight: bold;
+}
+afx-app-window[data-id="FormatDialog"] afx-label.header
+{
+    padding-left: 5px;
+    border-bottom: 1px solid #a6a6a6;
+}
+afx-app-window[data-id="FormatDialog"] afx-label.header span
+{
+    font-weight: bold;
+}
+afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="aligmentbox"] afx-label span,
+afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="spacingbox"] afx-label span,
+afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="stylebox"] afx-label span
+{
+    display: block;
+    padding-top: 7px;
+}
+
+afx-app-window[data-id="FormatDialog"]  div[data-id="preview"]
+{
+    border: 1px solid #a6a6a6;
+}
+afx-app-window[data-id="FormatDialog"]  div[data-id="txtcolor"],
+afx-app-window[data-id="FormatDialog"]  div[data-id="bgcolor"]
+{
+    border:1px solid #a6a6a6;
+    display: block;
 }

OpenPage/build/debug/scheme.html

@@ -19,7 +19,8 @@
                 <afx-button data-width = "25" data-id="btaj" iconclass = "fa fa-align-justify"></afx-button>
                 <afx-button data-width = "25" data-id="btindent" iconclass = "fa fa-indent"></afx-button>
                 <afx-button data-width = "25" data-id="btoutdent" iconclass = "fa fa-outdent"></afx-button>
-                <afx-list-view dropdown = "true" data-width="80" data-id="format-list"></afx-list-view>
+                <afx-button data-width = "25" data-id="btformat" iconclass = "fa fa-paint-brush"></afx-button>
+                <afx-list-view dropdown = "true" data-width="100" data-id="format-list"></afx-list-view>
                 <div data-width="5"></div>
                 <afx-nspinner data-width = "50" data-id="font-size" ></afx-nspinner>
                 <div data-width="5"></div>
@@ -30,6 +31,16 @@
             <div data-id="container">
                 <div data-id="odfcanvas"></div>
             </div>
+            <div data-height="5"></div>
+            <afx-hbox data-id="status-bar" data-height="28">
+                <div></div>
+                <afx-button data-width = "25" data-id="btzoomfix" iconclass = "fa fa-arrows-alt"></afx-button>
+                <div data-width="5"></div>
+                <afx-slider data-id="slzoom" data-width="150" max="400"></afx-slider>
+                <div data-width="5"></div>
+                <afx-label data-id = "lbzoom" data-width="40"></afx-label>
+            </afx-hbox>
+            
         </afx-vbox>
         
     </afx-hbox>

OpenPage/coffees/dialogs.coffee

@@ -29,4 +29,230 @@ class HyperLinkDialog extends this.OS.GUI.BasicDialog
                 (d.find "content1").value = d.data.text
                 (d.find "content3").value = d.data.link
                 $(d.find "content1").prop('disabled', d.data.readonly)
-        }
+        }
+
+class FormatDialog extends this.OS.GUI.BaseDialog
+    constructor: () ->
+        super "FormatDialog"
+    init: () ->
+        @_gui.htmlToScheme FormatDialog.scheme, @, @host
+    
+    main: () ->
+        @ui =
+            aligment:
+                left:@find("swleft"),
+                right:@find("swright"),
+                center:@find("swcenter"),
+                justify:@find("swjustify")
+            spacing:
+                left: @find("spnleft"),
+                right: @find("spnright"),
+                top: @find("spntop"),
+                bottom: @find("spnbottom"),
+            style:
+                bold: @find("swbold"),
+                italic: @find("switalic"),
+                underline: @find("swunderline"),
+                color: @find("txtcolor"),
+                bgcolor: @find("bgcolor")
+            font:
+                family: @find("lstfont"),
+                size: @find("spnfsize")
+            formats: @find("lstformats")
+        # init the format object
+        @currentStyle =
+            aligment: @_api.switcher("left", "right", "center", "justify"),
+            spacing:
+                left:0
+                top:0,
+                right:0,
+                bottom:0
+            style:
+                bold:false,
+                italic: false,
+                underline: false,
+                color: undefined,
+                bgcolor: undefined
+            font:
+                family: undefined,
+                size: 12
+        @preview = ($(@find "preview").find "p")[0]
+        $(@preview)
+            .css "padding", "0"
+            .css "margin", "0"
+        @initUIEvent()
+        @previewStyle()
+    
+    initUIEvent: () ->
+        me = @
+        set = (e, o, k ,f) ->
+            me.ui[o][k].set e, (r) ->
+                v = r
+                v = f r if f
+                me.currentStyle[o][k] = v
+                me.previewStyle()
+                
+        for k,v of @ui.aligment
+            set "onchange", "aligment", k, ((e) -> e.data)
+        for k,v of @ui.spacing
+            set "onchange", "spacing", k
+        for k,v of @ui.style
+            set "onchange", "style", k, ((e) -> e.data) if k isnt "color" and k isnt "bgcolor"
+        set "onchange", "font", "size"
+        $(@ui.style.color).click (e) ->
+            me.openDialog "ColorPickerDialog", (d) ->
+                me.currentStyle.style.color = d
+                me.previewStyle()
+        $(@ui.style.bgcolor).click (e) ->
+            me.openDialog "ColorPickerDialog", (d) ->
+                me.currentStyle.style.bgcolor = d
+                me.previewStyle()
+        #font
+        @ui.font.family.set "items", @data.fonts if @data and @data.fonts
+        set "onlistselect", "font", "family", ( (e) -> e.data)
+        #format list
+        @ui.formats.set "selected", -1
+        @ui.formats.set "items", @data.formats if @data and @data.formats
+        @ui.formats.set "onlistselect", (e) ->
+            me.fromODFStyleFormat e.data
+         @ui.formats.set "selected", 0
+        #@currentStyle =
+    
+    fromODFStyleFormat: (odfs) ->
+        console.log "change style"
+        console.log odfs
+    
+    previewStyle: () ->
+        console.log "previewing"
+        # reset ui
+        @ui.aligment.left.set "swon", @currentStyle.aligment.left
+        @ui.aligment.right.set "swon", @currentStyle.aligment.right
+        @ui.aligment.center.set "swon", @currentStyle.aligment.center
+        @ui.aligment.justify.set "swon", @currentStyle.aligment.justify
+        @ui.spacing.left.set "value", @currentStyle.spacing.left
+        @ui.spacing.right.set "value", @currentStyle.spacing.right
+        @ui.spacing.top.set "value", @currentStyle.spacing.top
+        @ui.spacing.bottom.set "value", @currentStyle.spacing.bottom
+        @ui.style.bold.set "swon", @currentStyle.style.bold
+        @ui.style.italic.set "swon", @currentStyle.style.italic
+        @ui.style.underline.set "swon", @currentStyle.style.underline
+        @ui.font.size.set "value", @currentStyle.font.size
+        
+        items = @ui.font.family.get "items"
+        item = i for v, i in items when v.name is name
+        @ui.font.family.set "selected", item if item >= 0
+        
+        $(@ui.style.color).css "background-color", @currentStyle.style.color.hex if @currentStyle.style.color
+        $(@ui.style.bgcolor).css "background-color", @currentStyle.style.bgcolor.hex if @currentStyle.style.bgcolor
+        # set the preview css
+        el = $ @preview
+        el.css "text-align", @currentStyle.aligment.selected
+        el.css "padding-left", @currentStyle.spacing.left + "mm"
+        el.css "padding-right", @currentStyle.spacing.right + "mm"
+        el.css "padding-top", @currentStyle.spacing.top + "mm"
+        el.css "padding-bottom", @currentStyle.spacing.bottom + "mm"
+        el
+            .css "font-weight", "normal"
+            .css "font-style", "normal"
+            .css "text-decoration", "none"
+        el.css "font-weight", "bold" if @currentStyle.style.bold
+        el.css "font-style", "italic" if @currentStyle.style.italic
+        el.css "text-decoration", "underline" if @currentStyle.style.underline
+        el.css "color", @currentStyle.style.color.hex if @currentStyle.style.color
+        el.css "background-color", @currentStyle.style.bgcolor.hex if @currentStyle.style.bgcolor
+        el.css "font-size", @currentStyle.font.size + "pt"
+        el.css "font-family", @currentStyle.font.family.name if @currentStyle.font.family
+
+FormatDialog.scheme = """
+<afx-app-window apptitle="__(Format Dialog)" width="500" height="450" data-id="FormatDialog">
+    <afx-vbox>
+        <div data-height="5"></div>
+        <afx-hbox data-height="30">
+            <div data-width="5"></div>
+            <afx-list-view data-id="lstformats" dropdown = "true"></afx-list-view>
+            <div data-width="5" ></div>
+            <afx-button text="clone" data-id="bt-clone" iconclass = "fa fa-copy" data-width="60"></afx-button>
+            <div data-width="5"></div>
+        </afx-hbox>
+        <afx-label text="__(Aligment)" class="header" data-height="20"></afx-label>
+        <afx-hbox data-height="23" data-id="aligmentbox">
+            <div data-width="20" ></div>
+            <afx-switch data-width="30" data-id="swleft"></afx-switch>
+            <afx-label text="__(Left)"></afx-label>
+            <afx-switch data-width="30" data-id="swright"></afx-switch>
+            <afx-label text="__(Right)"></afx-label>
+            <afx-switch data-width="30" data-id="swcenter"></afx-switch>
+            <afx-label text="__(Center)"></afx-label>
+            <afx-switch data-width="30" data-id="swjustify"></afx-switch>
+            <afx-label text="__(Justify)"></afx-label>
+            <div data-width="20" ></div>
+        </afx-hbox>
+         <div data-height="5"></div>
+        <afx-label text="__(Spacing)" class="header" data-height="20"></afx-label>
+        <div data-height="5"></div>
+        <afx-hbox data-height="23" data-id="spacingbox">
+            <div ></div>
+            <afx-label data-width="50" text="__(Left:)"></afx-label>
+            <afx-nspinner data-width="50" data-id="spnleft" step="0.5"></afx-nspinner>
+            <div></div>
+            <afx-label data-width="50" text="__(Right:)"></afx-label>
+            <afx-nspinner data-width="50" data-id="spnright" step="0.5"></afx-nspinner>
+            <div></div>
+            <afx-label data-width="50" text="__(Top:)"></afx-label>
+            <afx-nspinner data-width="50" data-id="spntop" step="0.5"></afx-nspinner>
+            <div></div>
+            <afx-label data-width="50" text="__(Bottom:)"></afx-label>
+            <afx-nspinner data-width="50" data-id="spnbottom" step="0.5"></afx-nspinner>
+            <div  ></div>
+        </afx-hbox>
+         <div data-height="5"></div>
+         <afx-label text="__(Style)" class="header" data-height="20"></afx-label>
+         <div data-height="5"></div>
+        <afx-hbox data-height="23" data-id="stylebox">
+            <div data-width="5"></div>
+            <afx-switch data-width="30" data-id="swbold"></afx-switch>
+            <afx-label text="__(Bold)"></afx-label>
+            <afx-switch data-width="30" data-id="switalic"></afx-switch>
+            <afx-label text="__(Italic)"></afx-label>
+            <afx-switch data-width="30" data-id="swunderline"></afx-switch>
+            <afx-label text="__(Underline)"></afx-label>
+            <afx-label data-width="35" text="__(Text:)"></afx-label>
+            <div data-width="30" data-id="txtcolor"></div>
+            <div data-width="5"></div>
+            <afx-label data-width="80" text="__(Background:)"></afx-label>
+            <div data-width="30" data-id="bgcolor"></div>
+            <div data-width="5"></div>
+        </afx-hbox>
+        <div data-height="5"></div>
+        <afx-label text="__(Font)" class="header" data-height="20"></afx-label>
+        <div data-height="5"></div>
+        <afx-hbox data-height="30">
+            <div data-width="5"></div>
+            <afx-list-view data-id="lstfont" dropdown = "true"></afx-list-view>
+            <div data-width="5" ></div>
+            <afx-label data-width="35" text="__(Size:)"></afx-label>
+            <afx-nspinner data-width="50" data-id="spnfsize"></afx-nspinner>
+            <div data-width="5"></div>
+        </afx-hbox>
+        <div data-height="5"></div>
+        <afx-label text="__(Preview)" class="header" data-height="20"></afx-label>
+        <div data-height="5"></div>
+        <afx-hbox>
+             <div data-width="5"></div>
+            <div data-id="preview">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet diam vestibulum massa malesuada quis dignissim libero blandit. Duis sit amet volutpat nisl.</p>
+            </div>
+             <div data-width="5"></div>
+        </afx-hbox>
+        
+        <div data-height="5"></div>
+        <afx-hbox data-height="30">
+            <div></div>
+            <afx-button text="__(Ok)" data-width="30" data-id="btok"></afx-button>
+            <div data-width="5"></div>
+            <afx-button text="__(Cancel)" data-width="55" data-id="btx"></afx-button>
+        </afx-hbox>
+         <div data-height="5"></div>
+    </afx-vbox>
+</afx-app-window>
+"""

OpenPage/coffees/main.coffee

@@ -7,11 +7,16 @@ class OpenPage extends this.OS.GUI.BaseApplication
         if not OpenPage.EditorSession
             require ["webodf/editor/EditorSession"], (ES) ->
                 OpenPage.EditorSession = ES
+        @userid = @systemsetting.user.username
         @eventSubscriptions = new core.EventSubscriptions()
         @initToolbox()
         @initCanvas()
         @canvas.load "#{@_api.handler.get}/home://welcome.odt"
-    
+        @currentStyle = ""
+        @resource =
+            fonts: []
+            formats: []
+        
     initToolbox: () ->
         me = @
         @basictool =
@@ -32,11 +37,15 @@ class OpenPage extends this.OS.GUI.BaseApplication
             indent: @find("btindent"),
             outdent: @find("btoutdent"),
             fonts: @find("font-list"),
-            fontsize: @find("font-size")
+            fontsize: @find("font-size"),
+            styles: @find("format-list"),
+            zoom: @find("slzoom")
+            format: @find("btformat")
+        
         fn = (name, el) ->
-            if name is "fonts"
+            if name is "fonts" or name is "styles"
                act = "onlistselect"
-            else if name is "fontsize"
+            else if name is "fontsize" or name is "zoom"
                 act = "onchange"
             else
                 act = "onbtclick"
@@ -48,12 +57,16 @@ class OpenPage extends this.OS.GUI.BaseApplication
         for name, el of @basictool
            fn name, el
         
+        (@find "btzoomfix").set "onbtclick", (e) -> me.zoom 100
+        @basictool.zoom.set "onchanging", (e) ->
+            zlb = me.find "lbzoom"
+            zlb.set "text", Math.floor(e) + "%"
+        
     initCanvas: () ->
         el = @find "odfcanvas"
         me = @
         el.setAttribute "translate", "no"
         el.classList.add "notranslate"
-        @userid = "localuser"
         @canvas = new odf.OdfCanvas(el)
         @documentChanged = (e) ->
             #console.log e
@@ -61,6 +74,19 @@ class OpenPage extends this.OS.GUI.BaseApplication
             #console.log e
         @textStylingChanged = (e) ->
             me.updateToolbar e
+        @paragrahStyleChanged = (e) ->
+            return unless e.type is "style"
+            items = me.basictool.styles.get "items"
+            item = i for v, i in items when v.name is e.styleName
+            me.currentStyle = e.styleName
+            me.basictool.styles.set "selected", item
+        
+        @updateSlider = (v) ->
+            value = Math.floor v*100
+            me.basictool.zoom.set "value", value
+            zlb = me.find "lbzoom"
+            zlb.set "text", value+"%"
+        
         #@canvas.enableAnnotations(true, true)
         @canvas.addListener "statereadychange", ()->
             me.session = new ops.Session(me.canvas)
@@ -85,12 +111,15 @@ class OpenPage extends this.OS.GUI.BaseApplication
             me.directFormattingCtl = me.editorSession.sessionController.getDirectFormattingController()
             me.directFormattingCtl.subscribe gui.DirectFormattingController.textStylingChanged, me.textStylingChanged
             me.directFormattingCtl.subscribe gui.DirectFormattingController.paragraphStylingChanged, me.textStylingChanged
+            me.editorSession.subscribe OpenPage.EditorSession.signalParagraphChanged, me.paragrahStyleChanged
+            
             # hyper link controller
             me.hyperlinkController = me.editorSession.sessionController.getHyperlinkController()
             me.eventSubscriptions.addFrameSubscription me.editorSession, OpenPage.EditorSession.signalCursorMoved, ()-> me.updateHyperlinkButtons()
             me.eventSubscriptions.addFrameSubscription me.editorSession, OpenPage.EditorSession.signalParagraphChanged, ()-> me.updateHyperlinkButtons()
             me.eventSubscriptions.addFrameSubscription me.editorSession, OpenPage.EditorSession.signalParagraphStyleModified, ()-> me.updateHyperlinkButtons()
             
+            
             #image controller
             me.imageController = me.editorSession.sessionController.getImageController()
             #imageController.subscribe(gui.ImageController.enabledChanged, enableButtons)
@@ -98,6 +127,11 @@ class OpenPage extends this.OS.GUI.BaseApplication
             #text controller
             me.textController = me.editorSession.sessionController.getTextController()
             
+            # zoom controller
+            me.zoomHelper = me.editorSession.getOdfCanvas().getZoomHelper()
+            me.zoomHelper.subscribe gui.ZoomHelper.signalZoomChanged, me.updateSlider
+            me.updateSlider me.zoomHelper.getZoomLevel()
+            
             me.editorSession.sessionController.setUndoManager new gui.TrivialUndoManager()
             me.editorSession.sessionController.getUndoManager().subscribe gui.UndoManager.signalDocumentModifiedChanged, me.documentChanged
             me.editorSession.sessionController.getMetadataController().subscribe gui.MetadataController.signalMetadataChanged, me.metaChanged
@@ -105,12 +139,13 @@ class OpenPage extends this.OS.GUI.BaseApplication
             op.init {
                 memberid: me.userid,
                 setProperties:{
-                    "fullName": "Xuan Sang LE",
+                    "fullName": me.userid,
                     "color": "blue"
                 }
             }
             me.session.enqueue([op])
             me.initFontList me.editorSession.getDeclaredFonts()
+            me.initStyles me.editorSession.getAvailableParagraphStyles()
             me.editorSession.sessionController.insertLocalCursor()
             me.editorSession.sessionController.startEditing()
             #console.log me.editorSession.getDeclaredFonts()
@@ -118,8 +153,14 @@ class OpenPage extends this.OS.GUI.BaseApplication
     
     initFontList: (list) ->
         v.text = v.name for v in list
+        @resource.fonts.push { text: v.text, name: v.family } for v in list
         @basictool.fonts.set "items", list
     
+    initStyles: (list) ->
+        v.text = v.displayName for v in list
+        @resource.formats.push { text: v.text, name: v.name, el: @editorSession.getParagraphStyleElement(v.name) } for v in list
+        @basictool.styles.set "items", list
+    
     updateToolbar: (changes) ->
         # basic style
         (@basictool.bold.set "selected", changes.isBold) if changes.hasOwnProperty 'isBold'
@@ -259,6 +300,19 @@ class OpenPage extends this.OS.GUI.BaseApplication
             , "binary"
         , __("Select image file"), { mimes: ["image/.*"] }
     
+    styles: (e) ->
+        return if e.data.name is @currentStyle
+        @editorSession.setCurrentParagraphStyle e.data.name
+    
+    zoom: (e) ->
+        #console.log "zooming", e
+        @zoomHelper.setZoomLevel e/100.0
+    
+    format: (e) ->
+        @openDialog new FormatDialog(), (d) ->
+            console.log d
+        , __("Add/Modify paragraph format"), @resource
+    
     closeDocument: () ->
         # finish editing
         return unless @editorSession and @session
@@ -279,6 +333,8 @@ class OpenPage extends this.OS.GUI.BaseApplication
             me.editorSession.sessionController.getUndoManager().unsubscribe gui.UndoManager.signalDocumentModifiedChanged, me.documentChanged
             me.directFormattingCtl.unsubscribe gui.DirectFormattingController.textStylingChanged, me.textStylingChanged
             me.directFormattingCtl.unsubscribe gui.DirectFormattingController.paragraphStylingChanged, me.textStylingChanged
+            me.editorSession.unsubscribe OpenPage.EditorSession.signalParagraphChanged, me.paragrahStyleChanged
+            me.zoomHelper.unsubscribe gui.ZoomHelper.signalZoomChanged, me.updateSlider
             # destry editorSession
             me.editorSession.destroy (e) ->
                 return me.error __("Cannot destroy editor session {0}", e) if e
@@ -293,6 +349,12 @@ class OpenPage extends this.OS.GUI.BaseApplication
                     me.directFormattingCtl = undefined
                     me.textController = undefined
                     me.imageController = undefined
+                    me.ZoomHelper = undefined
+                    me.metaChanged = undefined
+                    me.documentChanged = undefined
+                    me.textStylingChanged = undefined
+                    me.paragrahStyleChanged = undefined
+                    me.updateSlider = undefined
                     #
             
     

OpenPage/css/dialog.css

@@ -0,0 +1,31 @@
+afx-app-window[data-id="HyperLinkDialog"] afx-label.header span
+{
+    font-weight: bold;
+}
+afx-app-window[data-id="FormatDialog"] afx-label.header
+{
+    padding-left: 5px;
+    border-bottom: 1px solid #a6a6a6;
+}
+afx-app-window[data-id="FormatDialog"] afx-label.header span
+{
+    font-weight: bold;
+}
+afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="aligmentbox"] afx-label span,
+afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="spacingbox"] afx-label span,
+afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="stylebox"] afx-label span
+{
+    display: block;
+    padding-top: 7px;
+}
+
+afx-app-window[data-id="FormatDialog"]  div[data-id="preview"]
+{
+    border: 1px solid #a6a6a6;
+}
+afx-app-window[data-id="FormatDialog"]  div[data-id="txtcolor"],
+afx-app-window[data-id="FormatDialog"]  div[data-id="bgcolor"]
+{
+    border:1px solid #a6a6a6;
+    display: block;
+}

OpenPage/css/main.css

@@ -22,18 +22,21 @@ afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"]
     border: 1px solid #eaeaea;
     box-shadow: 3px 3px 3px #9f9F9F;
 }
-afx-app-window[data-id="HyperLinkDialog"] afx-label.header span
+afx-app-window[data-id="OpenPage"] afx-hbox[data-id="status-bar"]
 {
-    font-weight: bold;
+    background-color: #f5f5f5;
+    border: 1px solid #eaeaea;
+    box-shadow: -3px -3px 3px #9f9F9F;
 }
-afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button{
+afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button, afx-app-window[data-id="OpenPage"] afx-button[data-id="btzoomfix"] button
+{
     border: 1px solid #f5f5f5;
     background-color: transparent;
     width:100%;
     height: 100%;
 }
 
-afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button:hover, afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button.btactive
+afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button:hover, afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button.btactive, afx-app-window[data-id="OpenPage"] afx-button[data-id="btzoomfix"] button:hover
 {
     border: 1px solid #759DC0;
     background-color: transparent;

OpenPage/project.apj

@@ -1 +1 @@
-{"name":"OpenPage","root":"home://myws/antosdk-apps/OpenPage","css":["css/main.css"],"javascripts":["javascripts/webodf.js","javascripts/EditorSession.js"],"coffees":["coffees/main.coffee","coffees/dialogs.coffee"],"copies":["assets/scheme.html","package.json","README.md"]}
+{"name":"OpenPage","root":"home://myws/antosdk-apps/OpenPage","css":["css/main.css","css/dialog.css"],"javascripts":["javascripts/webodf.js","javascripts/EditorSession.js"],"coffees":["coffees/main.coffee","coffees/dialogs.coffee"],"copies":["assets/scheme.html","package.json","README.md"]}