页面缩放功能

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

@@ -8,10 +8,8 @@
                 <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" data-o2-element="settingNode" data-o2-events="click:returnZoom">
-<!--                    <div class="layout_menu_scale_zoomout" data-o2-events="click:zoomOut"></div>-->
-<!--                    <div class="layout_menu_scale_zoomin" data-o2-events="click:zoomIn"></div>-->
-                    <div class="layout_menu_scale_zoomValue" data-o2-element="zoomValueNode"></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>
@@ -59,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

@@ -823,4 +823,35 @@
     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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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

@@ -50,6 +50,46 @@ o2.xDesktop.Default = new Class({
     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);