Merge branch 'full-screen-mode' into dev

Gruntfile.js

@@ -9,6 +9,18 @@ var path = require('path');
  *-----------------------------------------------------*/
 module.exports = function(grunt) {
 
+    // These plugins provide necessary tasks.
+    /* [Build plugin & task ] ------------------------------------*/
+    grunt.loadNpmTasks('grunt-contrib-clean');
+    grunt.loadNpmTasks('grunt-contrib-concat');
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+    grunt.loadNpmTasks('grunt-contrib-copy');
+    grunt.loadNpmTasks('grunt-text-replace');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-contrib-less');
+    grunt.loadNpmTasks('grunt-postcss');
+    grunt.loadNpmTasks('grunt-autoprefixer');
+
     var banner = '/*!\n' +
         ' * ====================================================\n' +
         ' * <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
@@ -131,7 +143,7 @@ module.exports = function(grunt) {
         watch: {
             less: {
                 files: ['ui/theme/**/*.less'],
-                tasks: ['less:compile']
+                tasks: ['less:compile', 'autoprefixer']
             }
         },
 
@@ -146,26 +158,25 @@ module.exports = function(grunt) {
                     sourceMap: true,
                     sourceMapFilename: 'ui/theme/default/css/default.all.css.map',
                     sourceMapBasepath: 'ui/theme/default/css/'
-                    // compress: true,
-                    // cleancss: true
                 }
             }
         },
 
+        autoprefixer: {
+            all: {
+                options: {
+                    map: true
+                },
+                src: 'ui/theme/default/css/default.all.css',
+                dest: 'ui/theme/default/css/default.all.css'
+            }
+        }
+
     });
 
-    // These plugins provide necessary tasks.
-    /* [Build plugin & task ] ------------------------------------*/
-    grunt.loadNpmTasks('grunt-contrib-clean');
-    grunt.loadNpmTasks('grunt-contrib-concat');
-    grunt.loadNpmTasks('grunt-contrib-uglify');
-    grunt.loadNpmTasks('grunt-contrib-copy');
-    grunt.loadNpmTasks('grunt-text-replace');
-    grunt.loadNpmTasks('grunt-contrib-watch');
-    grunt.loadNpmTasks('grunt-contrib-less');
 
     // Build task(s).
-    grunt.registerTask('default', ['clean', 'concat', 'uglify', 'less', 'copy', 'replace']);
-    grunt.registerTask('dev', ['less', 'watch']);
+    grunt.registerTask('default', ['clean', 'concat', 'uglify', 'less', 'autoprefixer', 'copy', 'replace']);
+    grunt.registerTask('dev', ['less', 'autoprefixer', 'watch']);
 
 };
\ No newline at end of file

import.js

@@ -204,6 +204,7 @@
         { path: 'ui/ribbon/appearence/color.js',        pack: 'edit' },
 
         /* UI Ribbon「视图」面板 */
+        { path: 'ui/ribbon/view/fullscreen.js',         pack: 'edit' },
         { path: 'ui/ribbon/view/level.js',              pack: 'edit' }
     ];
 

lang/zh-cn/zh-cn.js

@@ -131,6 +131,8 @@ KityMinder.LANG['zh-cn'] = {
         'load_share_for_edit': '正在加载分享的文件...',
         'share_sync_success': '分享内容已同步',
 
+        'fullscreen_exit_hint': '按 F11 退出全屏',
+
         'error_detail': '详细信息',
         'copy_and_feedback': '复制并反馈',
 
@@ -143,7 +145,8 @@ KityMinder.LANG['zh-cn'] = {
             'arrangedown': '下移',
             'resetlayout': '整理布局',
             'expandtoleaf': '展开全部节点',
-            'collapsetolevel1': '收起到一级节点'
+            'collapsetolevel1': '收起到一级节点',
+            'fullscreen': '全屏'
         },
 
         'back': '返回',

package.json

@@ -36,7 +36,8 @@
         "grunt-text-replace": "~0.3.9",
         "grunt-contrib-watch": "~0.6.1",
         "grunt-contrib-less": "~0.11.3",
-        "grunt-contrib-clean": "~0.6.0"
+        "grunt-contrib-clean": "~0.6.0",
+        "grunt-autoprefixer": "~1.0.1"
     }
 
 }
\ No newline at end of file

src/core/keymap.js

@@ -64,14 +64,14 @@ var keymap = KityMinder.keymap = (function(origin) {
     'F2': 113,
     'F3': 114,
     'F4': 115,
-    'F5': 115,
-    'F6': 116,
-    'F7': 117,
-    'F8': 118,
-    'F9': 119,
-    'F10': 120,
-    'F11': 121,
-    'F12': 122,
+    'F5': 116,
+    'F6': 117,
+    'F7': 118,
+    'F8': 119,
+    'F9': 120,
+    'F10': 121,
+    'F11': 122,
+    'F12': 123,
 
     '`': 192,
     '=': 187,

src/core/theme.js

@@ -57,6 +57,9 @@ kity.extendClass(Minder, {
     setTheme: function(name) {
         this._theme = name || null;
         this.getRenderTarget().style.background = this.getStyle('background');
+        this.fire('themechange', {
+            theme: name
+        });
     },
 
     /**

ui/menu/share/share.js

@@ -49,7 +49,8 @@ KityMinder.registerUI('menu/share/share', function(minder) {
 
         if (shared) {
             fio.user.check().then(function(user) {
-                $.pajax(BACKEND_URL, {
+                $.pajax({
+                    url: BACKEND_URL,
                     type: 'POST',
                     data: {
                         action: 'update',
@@ -162,7 +163,7 @@ KityMinder.registerUI('menu/share/share', function(minder) {
 
     function renderCreatePanel() {
         // render template
-        return $.pajax('static/pages/createshare.html').then(function(html) {
+        return $.pajax({ url: 'static/pages/createshare.html' }).then(function(html) {
             /* global jhtmls: true */
             var render = jhtmls.render(html);
             $create_menu.html(render({

ui/ribbon/appearence/theme.js

@@ -39,5 +39,9 @@ KityMinder.registerUI('ribbon/appearence/theme', function(minder) {
     $tabs.appearence.appendWidget($themePanel);
     $themePanel.appendWidget($themeSelect);
 
+    minder.on('themechange', function(e) {
+        $('#content-wrapper').css('background', minder.getStyle('background'));
+    });
+
     return $themePanel;
 });
\ No newline at end of file

ui/ribbon/view/fullscreen.js

+/**
+ * @fileOverview
+ *
+ * 全屏无打扰模式
+ *
+ * @author: techird
+ * @copyright: Baidu FEX, 2014
+ */
+KityMinder.registerUI('ribbon/view/fullscreen', function(minder) {
+
+    var $commandbutton = minder.getUI('widget/commandbutton');
+    var $tabs = minder.getUI('ribbon/tabs');
+    var notice = minder.getUI('widget/notice');
+
+    var $fullscreenPanel = new FUI.LabelPanel({
+        label: minder.getLang('panels.level'),
+        column: true
+    }).appendTo($tabs.view);
+
+    var $fullscreenButton = $commandbutton
+        .generate('fullscreen', fullscreen)
+        .addClass('large')
+        .appendTo($fullscreenPanel);
+
+    function fullscreen() {
+        if ($('#content-wrapper').toggleClass('fullscreen').hasClass('fullscreen')) {
+            notice.info(minder.getLang('ui.fullscreen_exit_hint'), false, 4000);
+        }
+    }
+
+    minder.addShortcut('F11', fullscreen);
+
+    return $fullscreenButton;
+});

ui/theme/default/css/_about.less

 /**
  * 页面下方 “关于” 面板的样式
  */
+
+.fullscreen #about #km-cat {
+    transform: translate(0, 0);
+    transition: transform 0.7s 0.2s ease;
+}
 #about {
     position: absolute;
     bottom: 0;
@@ -18,8 +23,8 @@
     border-bottom: 5px solid #393F4F;
     overflow: visible;
     
-    .transition(all ease .3s 0.3s);
-    .transform(translate(100%));
+    transition: all ease .3s 0.3s;
+    transform: translate(100%);
     a {
         color: #eee;
     }
@@ -28,8 +33,8 @@
         position: absolute;
         left: 15px;
         top: 5px;
-        .transition(all ease 1.3s 0.3s);
-        .transform(translate(-60px, 0));
+        transition: all ease 1.3s 0.3s;
+        transform: translate(-60px, 0);
         cursor: pointer;
     }
 
@@ -38,7 +43,7 @@
     }
 
     &:hover, &:hover #km-cat {
-        .transform(translate(0));
+        transform: translate(0);
     }
 
     #km-version.new-version{
@@ -57,7 +62,7 @@
             border-radius: 4px;
             text-shadow: none;
             box-shadow: -1px 1px 3px rgba(0,0,0,0.3);
-            .transform(scale(.6))
+            transform: scale(.6);
         }
     }
 }

ui/theme/default/css/_help.less

@@ -58,7 +58,7 @@
             }
 
             &:before {
-                .transition(all .3s ease);
+                transition: all .3s ease;
                 opacity: 0.6;
                 content: ' ';
                 display: block;
@@ -68,7 +68,7 @@
             }
 
             &:hover:before {
-                .transform(translate3d(0, -5px, 0));
+                transform: translate3d(0, -5px, 0);
                 opacity: 1;
             }
 

ui/theme/default/css/_icons.less

@@ -23,4 +23,5 @@
     .arrangedown& { .sprite(15); }
     .expandtoleaf& { background-position: 0 -995px; }
     .collapsetolevel1& { background-position: 0 -1015px;}
+    .fullscreen& { background-position: 0 -1035px;}
 }
\ No newline at end of file

ui/theme/default/css/_kityminder.less

@@ -45,12 +45,23 @@ html, body {
     top: 40px;
 }
 
+.fullscreen #panel {
+    transform: translate(0, -101px);
+}
+
+.fullscreen #kityminder {
+    top: 0 !important;
+}
+
 #panel {
     background: @ui-color;
     font-family: 'Hiragino Sans GB', 'Arial', 'Microsoft Yahei';
     height: @panel-height;
-    overflow: visible;
+    overflow: hidden;
+    -webkit-backface-visibility: hidden;
     position: relative;
+    transition: transform .7s ease;
+    z-index: 11;
 
     h1 {
         font-size: 14px;

ui/theme/default/css/_localfile.less

@@ -31,7 +31,7 @@
         font-size: 16px;
         color: #CCC;
         margin: 150px auto;
-        .transition(all .1s ease);
+        transition: all .1s ease;
      
         span {
             display: block;
@@ -41,7 +41,7 @@
         
         &.accept {
             border-color: lighten(@tab-active, 40%);
-            .transform(scale(1.2));
+            transform: scale(1.2);
         }
         &.deny {
             border-color: #eee;

ui/theme/default/css/_mainmenu.less

@@ -42,7 +42,7 @@
     
     .dock;
     overflow: hidden;
-    .transform(translate3d(0, -100%, 0));
+    transform: translate3d(0, -100%, 0);
     transform-origin: 0 0;
     opacity: 0;
     -webkit-transition: opacity .2s ease, -webkit-transform .2s ease;
@@ -51,16 +51,16 @@
 
     &.show {
         opacity: 1;
-        .transform(translate3d(0, 0, 0));
+        transform: translate3d(0, 0, 0);
     }
     
     .slide-in() {
-        .transform(translateX(-(@left-width)) translateZ(0));
+        transform: translateX(-(@left-width)) translateZ(0);
         -webkit-transition: -webkit-transform .7s ease, opacity .5s ease;
         transition: transform .7s ease, opacity .5s ease;
 
         .show& {
-            .transform(translateX(0) translateZ(0));
+            transform: translateX(0) translateZ(0);
             -webkit-transition: -webkit-transform .7s ease, opacity .5s ease;
             transition: transform .7s ease, opacity .5s ease;
         }

ui/theme/default/css/_nav.less

+.fullscreen .preview-navigator {
+    transform: translate(-45px, 30px);
+}
+
 .preview-navigator {
     background: white;
     width: 140px;
@@ -10,6 +14,7 @@
     padding: 1px;
     z-index: 9;
     cursor: crosshair;
+    transition: transform .7s 0.1s ease;
     
     &.grab {
         cursor: move;
@@ -18,7 +23,9 @@
         cursor: grabbing;
     }
 }
-
+.fullscreen .nav-bar {
+    transform: translate(-60px, 0);
+}
 .nav-bar {
     position: absolute;
     width: 35px;
@@ -30,6 +37,7 @@
     border-radius: 4px;
     z-index: 10;
     box-shadow: 3px 3px 10px rgba(0, 0, 0, .2);
+    transition: transform .7s 0.1s ease;
     
     .command-button {
         width: 35px;

ui/theme/default/css/_notice.less

@@ -9,7 +9,7 @@
     opacity: 0;
     color: white;
 
-    .transform(translate3d(0, -50px, 0));
+    transform: translate3d(0, -50px, 0);
 
     p {
         margin: 5px 0;
@@ -17,7 +17,7 @@
     }
 
     &.show {
-        .transform(translate3d(0, 0, 0));
+        transform: translate3d(0, 0, 0);
         opacity: 1;
     }
 

ui/theme/default/css/_public.less

-.transition(@value) {
-    -webkit-transition: @value;
-    -moz-transition: @value;
-    -ms-transition: @value;
-    -o-transition: @value;
-    transition: @value;
-}
-
-.transform(@value) {
-    -webkit-transform: @value;
-    -moz-transform: @value;
-    -ms-transform: @value;
-    -o-transform: @value;
-    tranform: @value;
-}
 
 .animation(@value) {
     -webkit-animation: @value;
@@ -133,18 +118,18 @@ input[type=url] {
 
 @-webkit-keyframes rotate {
     from { 
-        .transform(rotate(0)); 
+        transform: rotate(0);
     }
     to { 
-        .transform(rotate(360deg));
+        transform: rotate(360deg);
     }
 }
 @keyframes rotate {
     from { 
-        .transform(rotate(0));
+        transform: rotate(0);
     }
     to { 
-        .transform(rotate(360deg));
+        transform: rotate(360deg);
     }
 }
 
@@ -188,7 +173,7 @@ input[type=url] {
         padding-bottom: 4px;
         box-shadow: inset 0 -1px hsl(0, 0%, 92%), inset 0 -2px hsl(0, 100%, 100%), 0 1px 1px rgba(255, 255, 255, 0.3);
         &:after {
-            .transform(translate(0, 1px));
+            transform: translate(0, 1px);
         }
     }
 

ui/theme/default/css/_search.less

@@ -27,8 +27,8 @@
         margin-right: 3px;
         width: 30px;
         -webkit-appearance: none;
-        .transition(width .5s ease);
-        .transform(translateZ(0));
+        transition: width .5s ease;
+        transform: translateZ(0);
         
         &:focus {
             width: 150px;

ui/theme/default/css/_tab.less

 #tab-select {
     height: @panel-height;
     line-height: @panel-height;
+    min-width: 200px;
     margin-left: 10px;
     float: left;
 
@@ -69,6 +70,10 @@
     }
 }
 
+.fullscreen #tab-container {
+    transform: translate(0, -101px) !important;
+}
+
 #tab-container {
     position: absolute;
     top: @panel-height;
@@ -107,8 +112,8 @@
         }
     }
     
-
-    .transition(all 0.15s ease);
+    transition: transform 0.7s ease, 
+                opacity,height .5s ease;
 
     &.collapsed {
         opacity: 0;

ui/theme/default/css/_widgets.less

 .fui-button, li {
-    .transition(background-color .2s ease);
+    transition: background-color .2s ease;
 }
 
 .fui-disabled,
@@ -78,7 +78,7 @@ input[type=search]::-ms-clear {
             }
         }
         &:active {
-            .transform(scale(0.9));
+            transform: scale(0.9);
             &:hover {
                 background-color: @button-active;
                 .fui-disabled& {
@@ -398,7 +398,7 @@ input[type=search]::-ms-clear {
         font-size: 12px;
         overflow: hidden;
         
-        .transition(none);
+        transition: none;
         
         &:hover, :focus {
             background: #0099f2; /* Old browsers */

ui/widget/notice.js

@@ -110,10 +110,12 @@ KityMinder.registerUI('widget/notice', function (minder) {
         memory.set('show-error-detail', showDetail);
     });
 
-    function info(msg, warn) {
+    function info(msg, warn, time) {
 
         if (!$notice.hasClass('show')) $notice.empty();
 
+        clearTimeout(info.ttl2);
+
         if (warn) $notice.addClass('warn');
         else $notice.removeClass('warn');
 
@@ -121,9 +123,14 @@ KityMinder.registerUI('widget/notice', function (minder) {
         $notice.addClass('show');
 
         clearTimeout(info.ttl);
+
+        time = time || (warn ? 5000 : 3000);
         info.ttl = setTimeout(function() {
             $notice.removeClass('show');
-        }, warn ? 5000 : 3000);
+            info.ttl2 = setTimeout(function() {
+                $notice.empty();
+            }, 1000);
+        }, time);
     }
 
     function warn(msg) {