Merge branch 'feature/scale' into 'wrdp'

页面缩放功能

See merge request o2oa/o2oa!3073

o2web/source/o2_core/o2.js

@@ -2180,6 +2180,27 @@ o2.core = true;
             }
         });
     }
+
+    var styleString = Element.getComputedStyle;
+    function styleNumber(element, style){
+        return styleString(element, style).toInt() || 0;
+    }
+
+    function topBorder(element){
+        return styleNumber(element, 'border-top-width');
+    }
+
+    function leftBorder(element){
+        return styleNumber(element, 'border-left-width');
+    }
+
+    [Document, Window].invoke('implement', {
+        getSize: function(){
+            var doc = this.getDocument();
+            doc = ((!doc.compatMode || doc.compatMode == 'CSS1Compat') && (!layout || !layout.userLayout || !layout.userLayout.scale || layout.userLayout.scale==1)) ? doc.html : doc.body;
+            return {x: doc.clientWidth, y: doc.clientHeight};
+        },
+    });
     if (window.Element && Element.implement) Element.implement({
         "isIntoView": function() {
             // var pNode = this.getParent();
@@ -2487,8 +2508,100 @@ o2.core = true;
             h += (this.getStyle("padding-left").toFloat() || 0)+ (this.getStyle("padding-right").toFloat() || 0);
             if (!notMargin) h += (this.getStyle("margin-left").toFloat() || 0)+ (this.getStyle("margin-right").toFloat() || 0);
             return h;
+        },
+        "getSize": function(){
+            if ((/^(?:body|html)$/i).test(this.tagName)) return this.getWindow().getSize();
+            if (!window.getComputedStyle) return {x: this.offsetWidth, y: this.offsetHeight};
+            if (this.get('tag') == 'svg') return svgCalculateSize(this);
+            try {
+                if (!layout || !layout.userLayout || !layout.userLayout.scale || layout.userLayout.scale==1){
+                    var bounds = this.getBoundingClientRect();
+                    return {x: bounds.width, y: bounds.height};
+                }else{
+                    return {"x": this.offsetWidth.toFloat(), "y": this.offsetHeight.toFloat()};
+                }
+            } catch (e){
+                return {x: 0, y: 0};
+            }
+        },
+        "getScaleOffsets": function(){
+            var hasGetBoundingClientRect = this.getBoundingClientRect;
+//<1.4compat>
+            hasGetBoundingClientRect = hasGetBoundingClientRect && !Browser.Platform.ios;
+//</1.4compat>
+            if (hasGetBoundingClientRect){
+                var bound = this.getBoundingClientRect();
+
+                var boundLeft = bound.left;
+                var boundTop = bound.top;
+                if (!layout || !layout.userLayout || !layout.userLayout.scale || layout.userLayout.scale==1){
+
+                }else{
+                    boundLeft= boundLeft/layout.userLayout.scale;
+                    boundTop = boundTop/layout.userLayout.scale;
+                }
+
+
+
+                var html = document.id(this.getDocument().documentElement);
+                var htmlScroll = html.getScroll();
+                var elemScrolls = this.getScrolls();
+                var isFixed = (Element.getComputedStyle(this, 'position') == 'fixed');
+
+                return {
+                    x: boundLeft.toFloat() + elemScrolls.x + ((isFixed) ? 0 : htmlScroll.x) - html.clientLeft,
+                    y: boundTop.toFloat() + elemScrolls.y + ((isFixed) ? 0 : htmlScroll.y) - html.clientTop
+                };
+            }
+
+            var element = this, position = {x: 0, y: 0};
+            if (isBody(this)) return position;
+
+            while (element && !isBody(element)){
+                position.x += element.offsetLeft;
+                position.y += element.offsetTop;
+//<1.4compat>
+                if (Browser.firefox){
+                    if (!borderBox(element)){
+                        position.x += leftBorder(element);
+                        position.y += topBorder(element);
+                    }
+                    var parent = element.parentNode;
+                    if (parent && styleString(parent, 'overflow') != 'visible'){
+                        position.x += leftBorder(parent);
+                        position.y += topBorder(parent);
+                    }
+                } else if (element != this && Browser.safari){
+                    position.x += leftBorder(element);
+                    position.y += topBorder(element);
+                }
+//</1.4compat>
+                element = element.offsetParent;
+            }
+//<1.4compat>
+            if (Browser.firefox && !borderBox(this)){
+                position.x -= leftBorder(this);
+                position.y -= topBorder(this);
+            }
+//</1.4compat>
+            return position;
+        },
+        getPosition: function(relative){
+            var offset = this.getScaleOffsets(),
+                scroll = this.getScrolls();
+            var position = {
+                x: offset.x - scroll.x,
+                y: offset.y - scroll.y
+            };
+
+            if (relative && (relative = document.id(relative))){
+                var relativePosition = relative.getPosition();
+                return {x: position.x - relativePosition.x - leftBorder(relative), y: position.y - relativePosition.y - topBorder(relative)};
+            }
+            return position;
         }
     });
+
     Object.copy = function(from, to){
         Object.each(from, function(value, key){
             switch (typeOf(value)){

o2web/source/o2_core/o2/xDesktop/$Default/blue/layout-pc.html

@@ -8,7 +8,9 @@
                 <div class="layout_menu_lnk_area" data-o2-element="lnkAreaNode"></div>
             </div>
             <div class="layout_menu_setting deepColor_bg">
-                <div class="layout_menu_setting_button icon_setting" data-o2-element="settingNode"></div>
+                <div class="layout_menu_setting_button" data-o2-element="settingNode">
+                    <div class="layout_menu_scale_zoomValue" data-o2-element="zoomValueNode" data-o2-events="click:zoomMenuShow"></div>
+                </div>
             </div>
         </div>
     </div>
@@ -55,4 +57,10 @@
         <div class="layout_content_message" data-o2-element="messageAreaNode"></div>
     </div>
 </div>
+<div class="layout_menu_scale_slider deepColor_bg" data-o2-element="sliderNode">
+    <div class="layout_menu_scale_zoomSlider" data-o2-element="zoomSliderNode">
+        <div class="layout_menu_scale_zoomSliderKnob mainColor_bg" data-o2-element="zoomSliderKnobNode"></div>
+    </div>
+</div>
 <div data-o2-element="startMenuArea"></div>
+

o2web/source/o2_core/o2/xDesktop/$Default/blue/style-pc.css

@@ -122,7 +122,8 @@
     height: 70px;
 }
 .layout_menu_setting_button{
-    height: 70px;
+    height: 55px;
+    padding-top: 15px;
     background-position: center;
     background-repeat: no-repeat;
     cursor: pointer;
@@ -487,7 +488,7 @@
 .layout_start_item_icon {
     width: 40px;
     height: 40px;
-    background-size: cover;
+    background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
 }
@@ -795,3 +796,62 @@
     margin: auto;
     border-radius: 20px;
 }
+/*.layout_menu_scale_zoomout {*/
+/*    height: 20px;*/
+/*    line-height: 20px;*/
+/*    width: 16px;*/
+/*    text-align: center;*/
+/*    background: #ffffff;*/
+/*    margin-left: 5px;*/
+/*    float: left;*/
+/*}*/
+/*.layout_menu_scale_zoomin {*/
+/*    height: 20px;*/
+/*    line-height: 20px;*/
+/*    width: 16px;*/
+/*    text-align: center;*/
+/*    background: #ffffff;*/
+/*    margin-right: 5px;*/
+/*    float: right;*/
+/*}*/
+.layout_menu_scale_zoomValue {
+    height: 40px;
+    line-height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    margin: auto;
+    text-align: center;
+    background: #ffffff;
+    cursor: pointer;
+    font-size: 12px;
+}
+.layout_menu_scale_zoomSlider {
+    width: 110px;
+    height: 5px;
+    margin-left: 10px;
+    border-radius: 3px;
+    background: #ffffff;
+    position: relative;
+}
+.layout_menu_scale_zoomSliderKnob {
+    width: 12px;
+    height: 12px;
+    border-radius: 10px;
+    border: 3px solid #f1f1f1;
+    cursor: pointer;
+    position: absolute;
+    top: -6px;
+}
+.layout_menu_scale_slider {
+    width: 0;
+    height: 38px;
+    overflow: hidden;
+    padding-top: 32px;
+    border-top-right-radius: 35px;
+    border-bottom-right-radius: 35px;
+    position: absolute;
+    bottom: 0;
+    left: 80px;
+    z-index: 40000;
+    display: none;
+}

o2web/source/o2_core/o2/xDesktop/$Default/cyan/layout-pc.html

@@ -8,7 +8,9 @@
                 <div class="layout_menu_lnk_area" data-o2-element="lnkAreaNode"></div>
             </div>
             <div class="layout_menu_setting deepColor_bg">
-                <div class="layout_menu_setting_button icon_setting" data-o2-element="settingNode"></div>
+                <div class="layout_menu_setting_button" data-o2-element="settingNode">
+                    <div class="layout_menu_scale_zoomValue" data-o2-element="zoomValueNode" data-o2-events="click:zoomMenuShow"></div>
+                </div>
             </div>
         </div>
     </div>
@@ -17,7 +19,7 @@
             <div style="display: table-row"><div class="layout_content_taskbar" data-o2-element="taskbarNode">
                 <div class="layout_content_taskbar_area">
                     <div class="layout_content_taskbar_area_user" data-o2-element="userInforNode">
-                        <div class="layout_content_taskbar_area_user_icon" style="background-image: url({{$.user.iconUrl}});"></div>
+                        <div class="layout_content_taskbar_area_user_icon"></div>
                         <div class="layout_content_taskbar_area_user_text">{{ $.user.name }}</div>
                     </div>
 
@@ -41,6 +43,7 @@
                             <div class="layout_content_taskbar_area_tabs_action_up icon_up_gray" data-o2-element="taskActionUp" data-o2-events="click:toolbarUp"></div>
                             <div class="layout_content_taskbar_area_tabs_action_down icon_down" data-o2-element="taskActionDown" data-o2-events="click:toolbarDown"></div>
                         </div>
+
                         <div class="layout_content_taskbar_area_tabs_contentArea" data-o2-element="taskContentAreaNode">
                             <div class="layout_content_taskbar_area_tabs_content" data-o2-element="taskContentNode" data-o2-events="mouseover:showRefresh"></div>
                         </div>
@@ -54,4 +57,10 @@
         <div class="layout_content_message" data-o2-element="messageAreaNode"></div>
     </div>
 </div>
+<div class="layout_menu_scale_slider deepColor_bg" data-o2-element="sliderNode">
+    <div class="layout_menu_scale_zoomSlider" data-o2-element="zoomSliderNode">
+        <div class="layout_menu_scale_zoomSliderKnob mainColor_bg" data-o2-element="zoomSliderKnobNode"></div>
+    </div>
+</div>
 <div data-o2-element="startMenuArea"></div>
+

o2web/source/o2_core/o2/xDesktop/$Default/cyan/style-pc.css

@@ -122,7 +122,8 @@
     height: 70px;
 }
 .layout_menu_setting_button{
-    height: 70px;
+    height: 55px;
+    padding-top: 15px;
     background-position: center;
     background-repeat: no-repeat;
     cursor: pointer;
@@ -487,7 +488,7 @@
 .layout_start_item_icon {
     width: 40px;
     height: 40px;
-    background-size: cover;
+    background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
 }
@@ -795,3 +796,62 @@
     margin: auto;
     border-radius: 20px;
 }
+/*.layout_menu_scale_zoomout {*/
+/*    height: 20px;*/
+/*    line-height: 20px;*/
+/*    width: 16px;*/
+/*    text-align: center;*/
+/*    background: #ffffff;*/
+/*    margin-left: 5px;*/
+/*    float: left;*/
+/*}*/
+/*.layout_menu_scale_zoomin {*/
+/*    height: 20px;*/
+/*    line-height: 20px;*/
+/*    width: 16px;*/
+/*    text-align: center;*/
+/*    background: #ffffff;*/
+/*    margin-right: 5px;*/
+/*    float: right;*/
+/*}*/
+.layout_menu_scale_zoomValue {
+    height: 40px;
+    line-height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    margin: auto;
+    text-align: center;
+    background: #ffffff;
+    cursor: pointer;
+    font-size: 12px;
+}
+.layout_menu_scale_zoomSlider {
+    width: 110px;
+    height: 5px;
+    margin-left: 10px;
+    border-radius: 3px;
+    background: #ffffff;
+    position: relative;
+}
+.layout_menu_scale_zoomSliderKnob {
+    width: 12px;
+    height: 12px;
+    border-radius: 10px;
+    border: 3px solid #f1f1f1;
+    cursor: pointer;
+    position: absolute;
+    top: -6px;
+}
+.layout_menu_scale_slider {
+    width: 0;
+    height: 38px;
+    overflow: hidden;
+    padding-top: 32px;
+    border-top-right-radius: 35px;
+    border-bottom-right-radius: 35px;
+    position: absolute;
+    bottom: 0;
+    left: 80px;
+    z-index: 40000;
+    display: none;
+}

o2web/source/o2_core/o2/xDesktop/$Default/darkgreen/layout-pc.html

@@ -8,7 +8,9 @@
                 <div class="layout_menu_lnk_area" data-o2-element="lnkAreaNode"></div>
             </div>
             <div class="layout_menu_setting deepColor_bg">
-                <div class="layout_menu_setting_button icon_setting" data-o2-element="settingNode"></div>
+                <div class="layout_menu_setting_button" data-o2-element="settingNode">
+                    <div class="layout_menu_scale_zoomValue" data-o2-element="zoomValueNode" data-o2-events="click:zoomMenuShow"></div>
+                </div>
             </div>
         </div>
     </div>
@@ -17,7 +19,7 @@
             <div style="display: table-row"><div class="layout_content_taskbar" data-o2-element="taskbarNode">
                 <div class="layout_content_taskbar_area">
                     <div class="layout_content_taskbar_area_user" data-o2-element="userInforNode">
-                        <div class="layout_content_taskbar_area_user_icon" style="background-image: url({{$.user.iconUrl}});"></div>
+                        <div class="layout_content_taskbar_area_user_icon"></div>
                         <div class="layout_content_taskbar_area_user_text">{{ $.user.name }}</div>
                     </div>
 
@@ -41,6 +43,7 @@
                             <div class="layout_content_taskbar_area_tabs_action_up icon_up_gray" data-o2-element="taskActionUp" data-o2-events="click:toolbarUp"></div>
                             <div class="layout_content_taskbar_area_tabs_action_down icon_down" data-o2-element="taskActionDown" data-o2-events="click:toolbarDown"></div>
                         </div>
+
                         <div class="layout_content_taskbar_area_tabs_contentArea" data-o2-element="taskContentAreaNode">
                             <div class="layout_content_taskbar_area_tabs_content" data-o2-element="taskContentNode" data-o2-events="mouseover:showRefresh"></div>
                         </div>
@@ -54,4 +57,10 @@
         <div class="layout_content_message" data-o2-element="messageAreaNode"></div>
     </div>
 </div>
+<div class="layout_menu_scale_slider deepColor_bg" data-o2-element="sliderNode">
+    <div class="layout_menu_scale_zoomSlider" data-o2-element="zoomSliderNode">
+        <div class="layout_menu_scale_zoomSliderKnob mainColor_bg" data-o2-element="zoomSliderKnobNode"></div>
+    </div>
+</div>
 <div data-o2-element="startMenuArea"></div>
+

o2web/source/o2_core/o2/xDesktop/$Default/darkgreen/style-pc.css

@@ -122,7 +122,8 @@
     height: 70px;
 }
 .layout_menu_setting_button{
-    height: 70px;
+    height: 55px;
+    padding-top: 15px;
     background-position: center;
     background-repeat: no-repeat;
     cursor: pointer;
@@ -487,7 +488,7 @@
 .layout_start_item_icon {
     width: 40px;
     height: 40px;
-    background-size: cover;
+    background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
 }
@@ -795,3 +796,62 @@
     margin: auto;
     border-radius: 20px;
 }
+/*.layout_menu_scale_zoomout {*/
+/*    height: 20px;*/
+/*    line-height: 20px;*/
+/*    width: 16px;*/
+/*    text-align: center;*/
+/*    background: #ffffff;*/
+/*    margin-left: 5px;*/
+/*    float: left;*/
+/*}*/
+/*.layout_menu_scale_zoomin {*/
+/*    height: 20px;*/
+/*    line-height: 20px;*/
+/*    width: 16px;*/
+/*    text-align: center;*/
+/*    background: #ffffff;*/
+/*    margin-right: 5px;*/
+/*    float: right;*/
+/*}*/
+.layout_menu_scale_zoomValue {
+    height: 40px;
+    line-height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    margin: auto;
+    text-align: center;
+    background: #ffffff;
+    cursor: pointer;
+    font-size: 12px;
+}
+.layout_menu_scale_zoomSlider {
+    width: 110px;
+    height: 5px;
+    margin-left: 10px;
+    border-radius: 3px;
+    background: #ffffff;
+    position: relative;
+}
+.layout_menu_scale_zoomSliderKnob {
+    width: 12px;
+    height: 12px;
+    border-radius: 10px;
+    border: 3px solid #f1f1f1;
+    cursor: pointer;
+    position: absolute;
+    top: -6px;
+}
+.layout_menu_scale_slider {
+    width: 0;
+    height: 38px;
+    overflow: hidden;
+    padding-top: 32px;
+    border-top-right-radius: 35px;
+    border-bottom-right-radius: 35px;
+    position: absolute;
+    bottom: 0;
+    left: 80px;
+    z-index: 40000;
+    display: none;
+}

o2web/source/o2_core/o2/xDesktop/$Default/gray/layout-pc.html

@@ -8,7 +8,9 @@
                 <div class="layout_menu_lnk_area" data-o2-element="lnkAreaNode"></div>
             </div>
             <div class="layout_menu_setting deepColor_bg">
-                <div class="layout_menu_setting_button icon_setting" data-o2-element="settingNode"></div>
+                <div class="layout_menu_setting_button" data-o2-element="settingNode">
+                    <div class="layout_menu_scale_zoomValue" data-o2-element="zoomValueNode" data-o2-events="click:zoomMenuShow"></div>
+                </div>
             </div>
         </div>
     </div>
@@ -17,7 +19,7 @@
             <div style="display: table-row"><div class="layout_content_taskbar" data-o2-element="taskbarNode">
                 <div class="layout_content_taskbar_area">
                     <div class="layout_content_taskbar_area_user" data-o2-element="userInforNode">
-                        <div class="layout_content_taskbar_area_user_icon" style="background-image: url({{$.user.iconUrl}});"></div>
+                        <div class="layout_content_taskbar_area_user_icon"></div>
                         <div class="layout_content_taskbar_area_user_text">{{ $.user.name }}</div>
                     </div>
 
@@ -41,6 +43,7 @@
                             <div class="layout_content_taskbar_area_tabs_action_up icon_up_gray" data-o2-element="taskActionUp" data-o2-events="click:toolbarUp"></div>
                             <div class="layout_content_taskbar_area_tabs_action_down icon_down" data-o2-element="taskActionDown" data-o2-events="click:toolbarDown"></div>
                         </div>
+
                         <div class="layout_content_taskbar_area_tabs_contentArea" data-o2-element="taskContentAreaNode">
                             <div class="layout_content_taskbar_area_tabs_content" data-o2-element="taskContentNode" data-o2-events="mouseover:showRefresh"></div>
                         </div>
@@ -54,4 +57,10 @@
         <div class="layout_content_message" data-o2-element="messageAreaNode"></div>
     </div>
 </div>
+<div class="layout_menu_scale_slider deepColor_bg" data-o2-element="sliderNode">
+    <div class="layout_menu_scale_zoomSlider" data-o2-element="zoomSliderNode">
+        <div class="layout_menu_scale_zoomSliderKnob mainColor_bg" data-o2-element="zoomSliderKnobNode"></div>
+    </div>
+</div>
 <div data-o2-element="startMenuArea"></div>
+

o2web/source/o2_core/o2/xDesktop/$Default/gray/style-pc.css

@@ -122,7 +122,8 @@
     height: 70px;
 }
 .layout_menu_setting_button{
-    height: 70px;
+    height: 55px;
+    padding-top: 15px;
     background-position: center;
     background-repeat: no-repeat;
     cursor: pointer;
@@ -487,7 +488,7 @@
 .layout_start_item_icon {
     width: 40px;
     height: 40px;
-    background-size: cover;
+    background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
 }
@@ -795,3 +796,62 @@
     margin: auto;
     border-radius: 20px;
 }
+/*.layout_menu_scale_zoomout {*/
+/*    height: 20px;*/
+/*    line-height: 20px;*/
+/*    width: 16px;*/
+/*    text-align: center;*/
+/*    background: #ffffff;*/
+/*    margin-left: 5px;*/
+/*    float: left;*/
+/*}*/
+/*.layout_menu_scale_zoomin {*/
+/*    height: 20px;*/
+/*    line-height: 20px;*/
+/*    width: 16px;*/
+/*    text-align: center;*/
+/*    background: #ffffff;*/
+/*    margin-right: 5px;*/
+/*    float: right;*/
+/*}*/
+.layout_menu_scale_zoomValue {
+    height: 40px;
+    line-height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    margin: auto;
+    text-align: center;
+    background: #ffffff;
+    cursor: pointer;
+    font-size: 12px;
+}
+.layout_menu_scale_zoomSlider {
+    width: 110px;
+    height: 5px;
+    margin-left: 10px;
+    border-radius: 3px;
+    background: #ffffff;
+    position: relative;
+}
+.layout_menu_scale_zoomSliderKnob {
+    width: 12px;
+    height: 12px;
+    border-radius: 10px;
+    border: 3px solid #f1f1f1;
+    cursor: pointer;
+    position: absolute;
+    top: -6px;
+}
+.layout_menu_scale_slider {
+    width: 0;
+    height: 38px;
+    overflow: hidden;
+    padding-top: 32px;
+    border-top-right-radius: 35px;
+    border-bottom-right-radius: 35px;
+    position: absolute;
+    bottom: 0;
+    left: 80px;
+    z-index: 40000;
+    display: none;
+}

o2web/source/o2_core/o2/xDesktop/$Default/green/layout-pc.html

@@ -8,7 +8,9 @@
                 <div class="layout_menu_lnk_area" data-o2-element="lnkAreaNode"></div>
             </div>
             <div class="layout_menu_setting deepColor_bg">
-                <div class="layout_menu_setting_button icon_setting" data-o2-element="settingNode"></div>
+                <div class="layout_menu_setting_button" data-o2-element="settingNode">
+                    <div class="layout_menu_scale_zoomValue" data-o2-element="zoomValueNode" data-o2-events="click:zoomMenuShow"></div>
+                </div>
             </div>
         </div>
     </div>
@@ -17,7 +19,7 @@
             <div style="display: table-row"><div class="layout_content_taskbar" data-o2-element="taskbarNode">
                 <div class="layout_content_taskbar_area">
                     <div class="layout_content_taskbar_area_user" data-o2-element="userInforNode">
-                        <div class="layout_content_taskbar_area_user_icon" style="background-image: url({{$.user.iconUrl}});"></div>
+                        <div class="layout_content_taskbar_area_user_icon"></div>
                         <div class="layout_content_taskbar_area_user_text">{{ $.user.name }}</div>
                     </div>
 
@@ -41,6 +43,7 @@
                             <div class="layout_content_taskbar_area_tabs_action_up icon_up_gray" data-o2-element="taskActionUp" data-o2-events="click:toolbarUp"></div>
                             <div class="layout_content_taskbar_area_tabs_action_down icon_down" data-o2-element="taskActionDown" data-o2-events="click:toolbarDown"></div>
                         </div>
+
                         <div class="layout_content_taskbar_area_tabs_contentArea" data-o2-element="taskContentAreaNode">
                             <div class="layout_content_taskbar_area_tabs_content" data-o2-element="taskContentNode" data-o2-events="mouseover:showRefresh"></div>
                         </div>
@@ -54,4 +57,10 @@
         <div class="layout_content_message" data-o2-element="messageAreaNode"></div>
     </div>
 </div>
+<div class="layout_menu_scale_slider deepColor_bg" data-o2-element="sliderNode">
+    <div class="layout_menu_scale_zoomSlider" data-o2-element="zoomSliderNode">
+        <div class="layout_menu_scale_zoomSliderKnob mainColor_bg" data-o2-element="zoomSliderKnobNode"></div>
+    </div>
+</div>
 <div data-o2-element="startMenuArea"></div>
+

o2web/source/o2_core/o2/xDesktop/$Default/green/style-pc.css

@@ -122,7 +122,8 @@
     height: 70px;
 }
 .layout_menu_setting_button{
-    height: 70px;
+    height: 55px;
+    padding-top: 15px;
     background-position: center;
     background-repeat: no-repeat;
     cursor: pointer;
@@ -487,7 +488,7 @@
 .layout_start_item_icon {
     width: 40px;
     height: 40px;
-    background-size: cover;
+    background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
 }
@@ -795,3 +796,62 @@
     margin: auto;
     border-radius: 20px;
 }
+/*.layout_menu_scale_zoomout {*/
+/*    height: 20px;*/
+/*    line-height: 20px;*/
+/*    width: 16px;*/
+/*    text-align: center;*/
+/*    background: #ffffff;*/
+/*    margin-left: 5px;*/
+/*    float: left;*/
+/*}*/
+/*.layout_menu_scale_zoomin {*/
+/*    height: 20px;*/
+/*    line-height: 20px;*/
+/*    width: 16px;*/
+/*    text-align: center;*/
+/*    background: #ffffff;*/
+/*    margin-right: 5px;*/
+/*    float: right;*/
+/*}*/
+.layout_menu_scale_zoomValue {
+    height: 40px;
+    line-height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    margin: auto;
+    text-align: center;
+    background: #ffffff;
+    cursor: pointer;
+    font-size: 12px;
+}
+.layout_menu_scale_zoomSlider {
+    width: 110px;
+    height: 5px;
+    margin-left: 10px;
+    border-radius: 3px;
+    background: #ffffff;
+    position: relative;
+}
+.layout_menu_scale_zoomSliderKnob {
+    width: 12px;
+    height: 12px;
+    border-radius: 10px;
+    border: 3px solid #f1f1f1;
+    cursor: pointer;
+    position: absolute;
+    top: -6px;
+}
+.layout_menu_scale_slider {
+    width: 0;
+    height: 38px;
+    overflow: hidden;
+    padding-top: 32px;
+    border-top-right-radius: 35px;
+    border-bottom-right-radius: 35px;
+    position: absolute;
+    bottom: 0;
+    left: 80px;
+    z-index: 40000;
+    display: none;
+}

o2web/source/o2_core/o2/xDesktop/$Default/navy/layout-pc.html

@@ -8,7 +8,9 @@
                 <div class="layout_menu_lnk_area" data-o2-element="lnkAreaNode"></div>
             </div>
             <div class="layout_menu_setting deepColor_bg">
-                <div class="layout_menu_setting_button icon_setting" data-o2-element="settingNode"></div>
+                <div class="layout_menu_setting_button" data-o2-element="settingNode">
+                    <div class="layout_menu_scale_zoomValue" data-o2-element="zoomValueNode" data-o2-events="click:zoomMenuShow"></div>
+                </div>
             </div>
         </div>
     </div>
@@ -17,7 +19,7 @@
             <div style="display: table-row"><div class="layout_content_taskbar" data-o2-element="taskbarNode">
                 <div class="layout_content_taskbar_area">
                     <div class="layout_content_taskbar_area_user" data-o2-element="userInforNode">
-                        <div class="layout_content_taskbar_area_user_icon" style="background-image: url({{$.user.iconUrl}});"></div>
+                        <div class="layout_content_taskbar_area_user_icon"></div>
                         <div class="layout_content_taskbar_area_user_text">{{ $.user.name }}</div>
                     </div>
 
@@ -41,6 +43,7 @@
                             <div class="layout_content_taskbar_area_tabs_action_up icon_up_gray" data-o2-element="taskActionUp" data-o2-events="click:toolbarUp"></div>
                             <div class="layout_content_taskbar_area_tabs_action_down icon_down" data-o2-element="taskActionDown" data-o2-events="click:toolbarDown"></div>
                         </div>
+
                         <div class="layout_content_taskbar_area_tabs_contentArea" data-o2-element="taskContentAreaNode">
                             <div class="layout_content_taskbar_area_tabs_content" data-o2-element="taskContentNode" data-o2-events="mouseover:showRefresh"></div>
                         </div>
@@ -54,4 +57,10 @@
         <div class="layout_content_message" data-o2-element="messageAreaNode"></div>
     </div>
 </div>
+<div class="layout_menu_scale_slider deepColor_bg" data-o2-element="sliderNode">
+    <div class="layout_menu_scale_zoomSlider" data-o2-element="zoomSliderNode">
+        <div class="layout_menu_scale_zoomSliderKnob mainColor_bg" data-o2-element="zoomSliderKnobNode"></div>
+    </div>
+</div>
 <div data-o2-element="startMenuArea"></div>
+

o2web/source/o2_core/o2/xDesktop/$Default/navy/style-pc.css

@@ -122,7 +122,8 @@
     height: 70px;
 }
 .layout_menu_setting_button{
-    height: 70px;
+    height: 55px;
+    padding-top: 15px;
     background-position: center;
     background-repeat: no-repeat;
     cursor: pointer;
@@ -487,7 +488,7 @@
 .layout_start_item_icon {
     width: 40px;
     height: 40px;
-    background-size: cover;
+    background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
 }
@@ -795,3 +796,62 @@
     margin: auto;
     border-radius: 20px;
 }
+/*.layout_menu_scale_zoomout {*/
+/*    height: 20px;*/
+/*    line-height: 20px;*/
+/*    width: 16px;*/
+/*    text-align: center;*/
+/*    background: #ffffff;*/
+/*    margin-left: 5px;*/
+/*    float: left;*/
+/*}*/
+/*.layout_menu_scale_zoomin {*/
+/*    height: 20px;*/
+/*    line-height: 20px;*/
+/*    width: 16px;*/
+/*    text-align: center;*/
+/*    background: #ffffff;*/
+/*    margin-right: 5px;*/
+/*    float: right;*/
+/*}*/
+.layout_menu_scale_zoomValue {
+    height: 40px;
+    line-height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    margin: auto;
+    text-align: center;
+    background: #ffffff;
+    cursor: pointer;
+    font-size: 12px;
+}
+.layout_menu_scale_zoomSlider {
+    width: 110px;
+    height: 5px;
+    margin-left: 10px;
+    border-radius: 3px;
+    background: #ffffff;
+    position: relative;
+}
+.layout_menu_scale_zoomSliderKnob {
+    width: 12px;
+    height: 12px;
+    border-radius: 10px;
+    border: 3px solid #f1f1f1;
+    cursor: pointer;
+    position: absolute;
+    top: -6px;
+}
+.layout_menu_scale_slider {
+    width: 0;
+    height: 38px;
+    overflow: hidden;
+    padding-top: 32px;
+    border-top-right-radius: 35px;
+    border-bottom-right-radius: 35px;
+    position: absolute;
+    bottom: 0;
+    left: 80px;
+    z-index: 40000;
+    display: none;
+}

o2web/source/o2_core/o2/xDesktop/$Default/orange/layout-pc.html

@@ -8,7 +8,9 @@
                 <div class="layout_menu_lnk_area" data-o2-element="lnkAreaNode"></div>
             </div>
             <div class="layout_menu_setting deepColor_bg">
-                <div class="layout_menu_setting_button icon_setting" data-o2-element="settingNode"></div>
+                <div class="layout_menu_setting_button" data-o2-element="settingNode">
+                    <div class="layout_menu_scale_zoomValue" data-o2-element="zoomValueNode" data-o2-events="click:zoomMenuShow"></div>
+                </div>
             </div>
         </div>
     </div>
@@ -17,7 +19,7 @@
             <div style="display: table-row"><div class="layout_content_taskbar" data-o2-element="taskbarNode">
                 <div class="layout_content_taskbar_area">
                     <div class="layout_content_taskbar_area_user" data-o2-element="userInforNode">
-                        <div class="layout_content_taskbar_area_user_icon" style="background-image: url({{$.user.iconUrl}});"></div>
+                        <div class="layout_content_taskbar_area_user_icon"></div>
                         <div class="layout_content_taskbar_area_user_text">{{ $.user.name }}</div>
                     </div>
 
@@ -41,6 +43,7 @@
                             <div class="layout_content_taskbar_area_tabs_action_up icon_up_gray" data-o2-element="taskActionUp" data-o2-events="click:toolbarUp"></div>
                             <div class="layout_content_taskbar_area_tabs_action_down icon_down" data-o2-element="taskActionDown" data-o2-events="click:toolbarDown"></div>
                         </div>
+
                         <div class="layout_content_taskbar_area_tabs_contentArea" data-o2-element="taskContentAreaNode">
                             <div class="layout_content_taskbar_area_tabs_content" data-o2-element="taskContentNode" data-o2-events="mouseover:showRefresh"></div>
                         </div>
@@ -54,4 +57,10 @@
         <div class="layout_content_message" data-o2-element="messageAreaNode"></div>
     </div>
 </div>
+<div class="layout_menu_scale_slider deepColor_bg" data-o2-element="sliderNode">
+    <div class="layout_menu_scale_zoomSlider" data-o2-element="zoomSliderNode">
+        <div class="layout_menu_scale_zoomSliderKnob mainColor_bg" data-o2-element="zoomSliderKnobNode"></div>
+    </div>
+</div>
 <div data-o2-element="startMenuArea"></div>
+

o2web/source/o2_core/o2/xDesktop/$Default/orange/style-pc.css

@@ -122,7 +122,8 @@
     height: 70px;
 }
 .layout_menu_setting_button{
-    height: 70px;
+    height: 55px;
+    padding-top: 15px;
     background-position: center;
     background-repeat: no-repeat;
     cursor: pointer;
@@ -487,7 +488,7 @@
 .layout_start_item_icon {
     width: 40px;
     height: 40px;
-    background-size: cover;
+    background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
 }
@@ -795,3 +796,62 @@
     margin: auto;
     border-radius: 20px;
 }
+/*.layout_menu_scale_zoomout {*/
+/*    height: 20px;*/
+/*    line-height: 20px;*/
+/*    width: 16px;*/
+/*    text-align: center;*/
+/*    background: #ffffff;*/
+/*    margin-left: 5px;*/
+/*    float: left;*/
+/*}*/
+/*.layout_menu_scale_zoomin {*/
+/*    height: 20px;*/
+/*    line-height: 20px;*/
+/*    width: 16px;*/
+/*    text-align: center;*/
+/*    background: #ffffff;*/
+/*    margin-right: 5px;*/
+/*    float: right;*/
+/*}*/
+.layout_menu_scale_zoomValue {
+    height: 40px;
+    line-height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    margin: auto;
+    text-align: center;
+    background: #ffffff;
+    cursor: pointer;
+    font-size: 12px;
+}
+.layout_menu_scale_zoomSlider {
+    width: 110px;
+    height: 5px;
+    margin-left: 10px;
+    border-radius: 3px;
+    background: #ffffff;
+    position: relative;
+}
+.layout_menu_scale_zoomSliderKnob {
+    width: 12px;
+    height: 12px;
+    border-radius: 10px;
+    border: 3px solid #f1f1f1;
+    cursor: pointer;
+    position: absolute;
+    top: -6px;
+}
+.layout_menu_scale_slider {
+    width: 0;
+    height: 38px;
+    overflow: hidden;
+    padding-top: 32px;
+    border-top-right-radius: 35px;
+    border-bottom-right-radius: 35px;
+    position: absolute;
+    bottom: 0;
+    left: 80px;
+    z-index: 40000;
+    display: none;
+}

o2web/source/o2_core/o2/xDesktop/$Default/purple/layout-pc.html

@@ -8,7 +8,9 @@
                 <div class="layout_menu_lnk_area" data-o2-element="lnkAreaNode"></div>
             </div>
             <div class="layout_menu_setting deepColor_bg">
-                <div class="layout_menu_setting_button icon_setting" data-o2-element="settingNode"></div>
+                <div class="layout_menu_setting_button" data-o2-element="settingNode">
+                    <div class="layout_menu_scale_zoomValue" data-o2-element="zoomValueNode" data-o2-events="click:zoomMenuShow"></div>
+                </div>
             </div>
         </div>
     </div>
@@ -17,7 +19,7 @@
             <div style="display: table-row"><div class="layout_content_taskbar" data-o2-element="taskbarNode">
                 <div class="layout_content_taskbar_area">
                     <div class="layout_content_taskbar_area_user" data-o2-element="userInforNode">
-                        <div class="layout_content_taskbar_area_user_icon" style="background-image: url({{$.user.iconUrl}});"></div>
+                        <div class="layout_content_taskbar_area_user_icon"></div>
                         <div class="layout_content_taskbar_area_user_text">{{ $.user.name }}</div>
                     </div>
 
@@ -41,6 +43,7 @@
                             <div class="layout_content_taskbar_area_tabs_action_up icon_up_gray" data-o2-element="taskActionUp" data-o2-events="click:toolbarUp"></div>
                             <div class="layout_content_taskbar_area_tabs_action_down icon_down" data-o2-element="taskActionDown" data-o2-events="click:toolbarDown"></div>
                         </div>
+
                         <div class="layout_content_taskbar_area_tabs_contentArea" data-o2-element="taskContentAreaNode">
                             <div class="layout_content_taskbar_area_tabs_content" data-o2-element="taskContentNode" data-o2-events="mouseover:showRefresh"></div>
                         </div>
@@ -54,4 +57,10 @@
         <div class="layout_content_message" data-o2-element="messageAreaNode"></div>
     </div>
 </div>
+<div class="layout_menu_scale_slider deepColor_bg" data-o2-element="sliderNode">
+    <div class="layout_menu_scale_zoomSlider" data-o2-element="zoomSliderNode">
+        <div class="layout_menu_scale_zoomSliderKnob mainColor_bg" data-o2-element="zoomSliderKnobNode"></div>
+    </div>
+</div>
 <div data-o2-element="startMenuArea"></div>
+

o2web/source/o2_core/o2/xDesktop/$Default/purple/style-pc.css

@@ -122,7 +122,8 @@
     height: 70px;
 }
 .layout_menu_setting_button{
-    height: 70px;
+    height: 55px;
+    padding-top: 15px;
     background-position: center;
     background-repeat: no-repeat;
     cursor: pointer;
@@ -487,7 +488,7 @@
 .layout_start_item_icon {
     width: 40px;
     height: 40px;
-    background-size: cover;
+    background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
 }
@@ -795,3 +796,62 @@
     margin: auto;
     border-radius: 20px;
 }
+/*.layout_menu_scale_zoomout {*/
+/*    height: 20px;*/
+/*    line-height: 20px;*/
+/*    width: 16px;*/
+/*    text-align: center;*/
+/*    background: #ffffff;*/
+/*    margin-left: 5px;*/
+/*    float: left;*/
+/*}*/
+/*.layout_menu_scale_zoomin {*/
+/*    height: 20px;*/
+/*    line-height: 20px;*/
+/*    width: 16px;*/
+/*    text-align: center;*/
+/*    background: #ffffff;*/
+/*    margin-right: 5px;*/
+/*    float: right;*/
+/*}*/
+.layout_menu_scale_zoomValue {
+    height: 40px;
+    line-height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    margin: auto;
+    text-align: center;
+    background: #ffffff;
+    cursor: pointer;
+    font-size: 12px;
+}
+.layout_menu_scale_zoomSlider {
+    width: 110px;
+    height: 5px;
+    margin-left: 10px;
+    border-radius: 3px;
+    background: #ffffff;
+    position: relative;
+}
+.layout_menu_scale_zoomSliderKnob {
+    width: 12px;
+    height: 12px;
+    border-radius: 10px;
+    border: 3px solid #f1f1f1;
+    cursor: pointer;
+    position: absolute;
+    top: -6px;
+}
+.layout_menu_scale_slider {
+    width: 0;
+    height: 38px;
+    overflow: hidden;
+    padding-top: 32px;
+    border-top-right-radius: 35px;
+    border-bottom-right-radius: 35px;
+    position: absolute;
+    bottom: 0;
+    left: 80px;
+    z-index: 40000;
+    display: none;
+}

o2web/source/o2_core/o2/xDesktop/$Default/red/layout-pc.html

@@ -8,7 +8,9 @@
                 <div class="layout_menu_lnk_area" data-o2-element="lnkAreaNode"></div>
             </div>
             <div class="layout_menu_setting deepColor_bg">
-                <div class="layout_menu_setting_button icon_setting" data-o2-element="settingNode"></div>
+                <div class="layout_menu_setting_button" data-o2-element="settingNode">
+                    <div class="layout_menu_scale_zoomValue" data-o2-element="zoomValueNode" data-o2-events="click:zoomMenuShow"></div>
+                </div>
             </div>
         </div>
     </div>
@@ -17,7 +19,7 @@
             <div style="display: table-row"><div class="layout_content_taskbar" data-o2-element="taskbarNode">
                 <div class="layout_content_taskbar_area">
                     <div class="layout_content_taskbar_area_user" data-o2-element="userInforNode">
-                        <div class="layout_content_taskbar_area_user_icon" style="background-image: url({{$.user.iconUrl}});"></div>
+                        <div class="layout_content_taskbar_area_user_icon"></div>
                         <div class="layout_content_taskbar_area_user_text">{{ $.user.name }}</div>
                     </div>
 
@@ -41,6 +43,7 @@
                             <div class="layout_content_taskbar_area_tabs_action_up icon_up_gray" data-o2-element="taskActionUp" data-o2-events="click:toolbarUp"></div>
                             <div class="layout_content_taskbar_area_tabs_action_down icon_down" data-o2-element="taskActionDown" data-o2-events="click:toolbarDown"></div>
                         </div>
+
                         <div class="layout_content_taskbar_area_tabs_contentArea" data-o2-element="taskContentAreaNode">
                             <div class="layout_content_taskbar_area_tabs_content" data-o2-element="taskContentNode" data-o2-events="mouseover:showRefresh"></div>
                         </div>
@@ -54,4 +57,10 @@
         <div class="layout_content_message" data-o2-element="messageAreaNode"></div>
     </div>
 </div>
+<div class="layout_menu_scale_slider deepColor_bg" data-o2-element="sliderNode">
+    <div class="layout_menu_scale_zoomSlider" data-o2-element="zoomSliderNode">
+        <div class="layout_menu_scale_zoomSliderKnob mainColor_bg" data-o2-element="zoomSliderKnobNode"></div>
+    </div>
+</div>
 <div data-o2-element="startMenuArea"></div>
+

o2web/source/o2_core/o2/xDesktop/$Default/red/style-pc.css

@@ -122,7 +122,8 @@
     height: 70px;
 }
 .layout_menu_setting_button{
-    height: 70px;
+    height: 55px;
+    padding-top: 15px;
     background-position: center;
     background-repeat: no-repeat;
     cursor: pointer;
@@ -487,7 +488,7 @@
 .layout_start_item_icon {
     width: 40px;
     height: 40px;
-    background-size: cover;
+    background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
 }
@@ -795,3 +796,62 @@
     margin: auto;
     border-radius: 20px;
 }
+/*.layout_menu_scale_zoomout {*/
+/*    height: 20px;*/
+/*    line-height: 20px;*/
+/*    width: 16px;*/
+/*    text-align: center;*/
+/*    background: #ffffff;*/
+/*    margin-left: 5px;*/
+/*    float: left;*/
+/*}*/
+/*.layout_menu_scale_zoomin {*/
+/*    height: 20px;*/
+/*    line-height: 20px;*/
+/*    width: 16px;*/
+/*    text-align: center;*/
+/*    background: #ffffff;*/
+/*    margin-right: 5px;*/
+/*    float: right;*/
+/*}*/
+.layout_menu_scale_zoomValue {
+    height: 40px;
+    line-height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    margin: auto;
+    text-align: center;
+    background: #ffffff;
+    cursor: pointer;
+    font-size: 12px;
+}
+.layout_menu_scale_zoomSlider {
+    width: 110px;
+    height: 5px;
+    margin-left: 10px;
+    border-radius: 3px;
+    background: #ffffff;
+    position: relative;
+}
+.layout_menu_scale_zoomSliderKnob {
+    width: 12px;
+    height: 12px;
+    border-radius: 10px;
+    border: 3px solid #f1f1f1;
+    cursor: pointer;
+    position: absolute;
+    top: -6px;
+}
+.layout_menu_scale_slider {
+    width: 0;
+    height: 38px;
+    overflow: hidden;
+    padding-top: 32px;
+    border-top-right-radius: 35px;
+    border-bottom-right-radius: 35px;
+    position: absolute;
+    bottom: 0;
+    left: 80px;
+    z-index: 40000;
+    display: none;
+}

o2web/source/o2_core/o2/xDesktop/$Default/tan/layout-pc.html

@@ -8,7 +8,9 @@
                 <div class="layout_menu_lnk_area" data-o2-element="lnkAreaNode"></div>
             </div>
             <div class="layout_menu_setting deepColor_bg">
-                <div class="layout_menu_setting_button icon_setting" data-o2-element="settingNode"></div>
+                <div class="layout_menu_setting_button" data-o2-element="settingNode">
+                    <div class="layout_menu_scale_zoomValue" data-o2-element="zoomValueNode" data-o2-events="click:zoomMenuShow"></div>
+                </div>
             </div>
         </div>
     </div>
@@ -17,7 +19,7 @@
             <div style="display: table-row"><div class="layout_content_taskbar" data-o2-element="taskbarNode">
                 <div class="layout_content_taskbar_area">
                     <div class="layout_content_taskbar_area_user" data-o2-element="userInforNode">
-                        <div class="layout_content_taskbar_area_user_icon" style="background-image: url({{$.user.iconUrl}});"></div>
+                        <div class="layout_content_taskbar_area_user_icon"></div>
                         <div class="layout_content_taskbar_area_user_text">{{ $.user.name }}</div>
                     </div>
 
@@ -41,6 +43,7 @@
                             <div class="layout_content_taskbar_area_tabs_action_up icon_up_gray" data-o2-element="taskActionUp" data-o2-events="click:toolbarUp"></div>
                             <div class="layout_content_taskbar_area_tabs_action_down icon_down" data-o2-element="taskActionDown" data-o2-events="click:toolbarDown"></div>
                         </div>
+
                         <div class="layout_content_taskbar_area_tabs_contentArea" data-o2-element="taskContentAreaNode">
                             <div class="layout_content_taskbar_area_tabs_content" data-o2-element="taskContentNode" data-o2-events="mouseover:showRefresh"></div>
                         </div>
@@ -54,4 +57,10 @@
         <div class="layout_content_message" data-o2-element="messageAreaNode"></div>
     </div>
 </div>
+<div class="layout_menu_scale_slider deepColor_bg" data-o2-element="sliderNode">
+    <div class="layout_menu_scale_zoomSlider" data-o2-element="zoomSliderNode">
+        <div class="layout_menu_scale_zoomSliderKnob mainColor_bg" data-o2-element="zoomSliderKnobNode"></div>
+    </div>
+</div>
 <div data-o2-element="startMenuArea"></div>
+

o2web/source/o2_core/o2/xDesktop/$Default/tan/style-pc.css

@@ -122,7 +122,8 @@
     height: 70px;
 }
 .layout_menu_setting_button{
-    height: 70px;
+    height: 55px;
+    padding-top: 15px;
     background-position: center;
     background-repeat: no-repeat;
     cursor: pointer;
@@ -487,7 +488,7 @@
 .layout_start_item_icon {
     width: 40px;
     height: 40px;
-    background-size: cover;
+    background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
 }
@@ -795,3 +796,62 @@
     margin: auto;
     border-radius: 20px;
 }
+/*.layout_menu_scale_zoomout {*/
+/*    height: 20px;*/
+/*    line-height: 20px;*/
+/*    width: 16px;*/
+/*    text-align: center;*/
+/*    background: #ffffff;*/
+/*    margin-left: 5px;*/
+/*    float: left;*/
+/*}*/
+/*.layout_menu_scale_zoomin {*/
+/*    height: 20px;*/
+/*    line-height: 20px;*/
+/*    width: 16px;*/
+/*    text-align: center;*/
+/*    background: #ffffff;*/
+/*    margin-right: 5px;*/
+/*    float: right;*/
+/*}*/
+.layout_menu_scale_zoomValue {
+    height: 40px;
+    line-height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    margin: auto;
+    text-align: center;
+    background: #ffffff;
+    cursor: pointer;
+    font-size: 12px;
+}
+.layout_menu_scale_zoomSlider {
+    width: 110px;
+    height: 5px;
+    margin-left: 10px;
+    border-radius: 3px;
+    background: #ffffff;
+    position: relative;
+}
+.layout_menu_scale_zoomSliderKnob {
+    width: 12px;
+    height: 12px;
+    border-radius: 10px;
+    border: 3px solid #f1f1f1;
+    cursor: pointer;
+    position: absolute;
+    top: -6px;
+}
+.layout_menu_scale_slider {
+    width: 0;
+    height: 38px;
+    overflow: hidden;
+    padding-top: 32px;
+    border-top-right-radius: 35px;
+    border-bottom-right-radius: 35px;
+    position: absolute;
+    bottom: 0;
+    left: 80px;
+    z-index: 40000;
+    display: none;
+}

o2web/source/o2_core/o2/xDesktop/Default.js

@@ -11,6 +11,86 @@ o2.xDesktop.Default = new Class({
         "style": "blue",
         "index": "Homepage"
     },
+    zoomOut: function(){
+        if (!layout.userLayout.scale) layout.userLayout.scale = 1;
+        layout.userLayout.scale = layout.userLayout.scale-0.1;
+        if (layout.userLayout.scale<0.4) layout.userLayout.scale = 0.4;
+        this.zoom();
+    },
+    zoomIn: function(){
+        if (!layout.userLayout.scale) layout.userLayout.scale = 1;
+        layout.userLayout.scale = layout.userLayout.scale+0.1;
+        if (layout.userLayout.scale>5) layout.userLayout.scale = 5;
+        this.zoom();
+    },
+    zoom: function(v){
+        if (v){
+            layout.userLayout.scale = v;
+            if (layout.userLayout.scale<0.4) layout.userLayout.scale = 0.4;
+            if (layout.userLayout.scale>5) layout.userLayout.scale = 5;
+        }
+        if (layout.userLayout.scale){
+            var s = (1/layout.userLayout.scale)*100;
+            var p = s+"%";
+            document.id(document.documentElement).setStyles({
+                "transform": "scale("+layout.userLayout.scale+")",
+                "transform-origin": "0 0",
+                "width": p,
+                "height":p
+            });
+            this.fireEvent("resize");
+            this.setZoomValue();
+        }
+    },
+    setZoomValue: function(){
+        if (!layout.userLayout.scale) layout.userLayout.scale = 1;
+        var scaleP = Math.round(layout.userLayout.scale*100);
+        if (this.zoomValueNode) this.zoomValueNode.set("text", scaleP+"%");
+    },
+    returnZoom: function(){
+        this.zoom(1);
+    },
+    zoomMenuShow: function(){
+        this.sliderNode.show();
+        this.sliderNode.set('tween', {duration: 100});
+        this.sliderNode.tween('width', '140');
+
+        if (!this.zoomSlider){
+            if (!layout.userLayout.scale) layout.userLayout.scale = 1;
+            this.sliderNode.addEvent("mousedown", function (e){
+                e.stopPropagation();
+                e.preventDefault();
+            });
+
+            this.zoomSlider = new Slider(this.zoomSliderNode, this.zoomSliderKnobNode, {
+                range: [30, 300],
+                wheel: false,
+                snap: true,
+                //mode: "vertical",
+
+                steps: 27,
+                initialStep: layout.userLayout.scale*100,
+                onChange: function(step){
+                    if (this.zoomValueNode) this.zoomValueNode.set("text", step+"%");
+                }.bind(this),
+                onComplete: function(step){
+                    var scale = step/100;
+                    this.zoom(scale);
+                    this.zoomMenuHide();
+                }.bind(this)
+            });
+        }
+
+        this.hideZoom = this.zoomMenuHide.bind(this);
+        this.desktopNode.addEvent("mousedown", this.hideZoom);
+    },
+    zoomMenuHide: function(){
+        this.sliderNode.set('tween', {duration: 100});
+        this.sliderNode.tween('width', '0');
+
+        if (this.hideZoom) this.desktopNode.removeEvent("mousedown", this.hideZoom);
+    },
+
     initialize: function(node, options){
         this.setOptions(options);
         this.type = "layout";
@@ -18,6 +98,7 @@ o2.xDesktop.Default = new Class({
         this.node = $(node);
         this.node.empty();
         this.initData();
+        this.zoom();
         //this.load();
     },
     initData: function(){
@@ -76,6 +157,8 @@ o2.xDesktop.Default = new Class({
 
             this.loadMessageMenu();
 
+            this.setZoomValue();
+
             this.fireEvent("load");
             MWF.require("MWF.xDesktop.shortcut");
         }.bind(this));
@@ -538,7 +621,8 @@ o2.xDesktop.Default = new Class({
             //"lnks": [],
             "flatLnks": [],
             "widgets": {},
-            "menuData": this.menuData
+            "menuData": this.menuData,
+            "scale": layout.userLayout.scale || 1
         };
         // this.appArr.each(function(app){
         //     if (app.options.appId!==this.options.index){