color egg

lang/zh-cn/zh-cn.js

@@ -164,8 +164,8 @@ KityMinder.LANG['zh-cn'] = {
         'saveto': '另存为',
         'hand': '允许拖拽',
         'camera': '定位根节点',
-        'zoom-in': '放大',
-        'zoom-out': '缩小',
+        'zoom-in': '放大（Ctrl+）',
+        'zoom-out': '缩小（Ctrl-）',
         'markers': '标签',
         'resource': '资源',
         'help': '帮助',

src/module/zoom.js

@@ -60,8 +60,8 @@ KityMinder.registerModule('Zoom', function() {
         timeline = animator.start(minder, 300, 'easeInOutSine', function() {});
         timeline.on('finish', function() {
             minder.fire('viewchange');
-            minder.fire('zoom', { zoom: value });
         });
+        minder.fire('zoom', { zoom: value });
     }
 
     var ZoomCommand = kity.createClass('Zoom', {

static/pages/operation.zh-cn.txt

@@ -18,9 +18,9 @@
 
 ## 视野控制
 
-`Space`: 切换编辑/抓手模式
-`滚轮`: 移动视野
-`右键拖动`: 拖动视野
+
+`Alt` + `拖动` or `右键拖动`: 拖动视野
+`滚轮` or `触摸板`: 移动视野
 `Ctrl` + `Up`, `Down`, `Left`, `Right`: 视野导航
 `空白处双击`, `Ctrl + Enter`: 居中根节点
 `Ctrl` + `+`, `-`: 放大/缩小视野

ui/menu/help/help.js

@@ -42,6 +42,19 @@ KityMinder.registerUI('menu/help/help', function (minder) {
         }
         $help.removeClass('loading');
         $help.find('.km-version').text(KityMinder.version);
+
+        // 彩蛋：点很多次按钮的蛋疼
+        var counter = 0;
+        var archives = {
+            '1': '你是个勇于尝试的人！',
+            '10': '你是个愿意深入探索的人！',
+            '100': '别点了，累',
+            '1000': '你真是最孤独的屌丝啊……真的别点了，没有了'
+        };
+        $help.delegate('.shortcut-key', 'click', function() {
+            var msg = archives[++counter];
+            if (msg) window.alert(msg);
+        });
     }
 
     function convert(markdown) {
@@ -71,7 +84,7 @@ KityMinder.registerUI('menu/help/help', function (minder) {
                 var description = match[2];
                 html += '<div class="shortcut-group"><span class="shortcut">';
                 html += declare.replace(/\`(.+?)\`/g, function(match, key) {
-                    return '<span class="shortcut-key ' + key.toLowerCase() + '">' + key + '</span>';
+                    return '<span class="shortcut-key ' + key.toLowerCase() + '" title="' + key + '">' + key + '</span>';
                 });
                 html += '</span>';
                 html += '<span class="description">' + description + '</span>';

ui/nav.js

@@ -15,7 +15,7 @@ KityMinder.registerUI('nav', function(minder) {
     var $commandbutton = minder.getUI('widget/commandbutton');
 
     var $zoomIn = $commandbutton.generate('zoom-in').appendTo($navBar[0]);
-    var $zoomPan = createZoomPan().appendTo($navBar);
+    var $zoomPan = createZoomPan($navBar);
     var $zoomOut = $commandbutton.generate('zoom-out').appendTo($navBar[0]);
 
     var $previewNavigator = createViewNavigator();
@@ -27,31 +27,36 @@ KityMinder.registerUI('nav', function(minder) {
 
     var $previewTrigger = createPreviewTrigger($previewNavigator).appendTo($navBar);
 
-    function createZoomPan() {
-        var $pan = $('<div>').addClass('zoom-pan');
+    function createZoomPan($parent) {
+        var $pan = $('<div>').addClass('zoom-pan').appendTo($parent);
         var zoomStack = minder.getOptions('zoom');
         var minValue = zoomStack[0];
         var maxValue = zoomStack[zoomStack.length - 1];
         var valueRange = maxValue - minValue;
 
+        var totalHeight = $pan.height();
         function getHeight(value) {
-            return (100 - (value - minValue) / valueRange * 100) + '%';
+            return (1 - (value - minValue) / valueRange) * totalHeight;
         }
 
         var $origin = $('<div>')
             .addClass('origin')
             .appendTo($pan)
-            .css('top', getHeight(100));
+            .css('y', getHeight(100));
 
         var $indicator = $('<div>')
             .addClass('indicator')
             .appendTo($pan)
-            .css('top', getHeight(100));
+            .css('y', getHeight(100));
 
-        minder.on('zoom', function(e) {
+        function indicate(value) {
             $indicator.animate({
-                'top': getHeight(e.zoom)
-            }, 100);
+                'y': getHeight(value)
+            }, 200);
+        }
+
+        minder.on('zoom', function(e) {
+            indicate(e.zoom);
         });
 
         $origin.click(function() {

ui/theme/default/css/_public.less

@@ -182,6 +182,15 @@ input[type=url] {
     text-transform: capitalize;
     box-shadow: inset 0 -2px hsl(0, 0%, 92%), inset 0 -3px hsl(0, 100%, 100%), 0 1px 2px rgba(255, 255, 255, 0.3);
     
+    &:active {
+        padding-top: 4px;
+        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));
+        }
+    }
+
     .mac &.ctrl,
     .mac &.shift,
     .mac &.alt,

ui/theme/default/css/default.all.css

@@ -742,6 +742,18 @@ input[type=url]:focus {
   text-transform: capitalize;
   box-shadow: inset 0 -2px #ebebeb, inset 0 -3px #ffffff, 0 1px 2px rgba(255, 255, 255, 0.3);
 }
+.shortcut-key:active {
+  padding-top: 4px;
+  padding-bottom: 4px;
+  box-shadow: inset 0 -1px #ebebeb, inset 0 -2px #ffffff, 0 1px 1px rgba(255, 255, 255, 0.3);
+}
+.shortcut-key:active:after {
+  -webkit-transform: translate(0, 1px);
+  -moz-transform: translate(0, 1px);
+  -ms-transform: translate(0, 1px);
+  -o-transform: translate(0, 1px);
+  tranform: translate(0, 1px);
+}
 .mac .shortcut-key.ctrl,
 .mac .shortcut-key.shift,
 .mac .shortcut-key.alt,