CocoRoboDesktop/kityminder-editor/ui/directive/navigator/navigator.html

<div class="nav-bar">
    <div class="nav-btn zoom-in"
         ng-click="minder.execCommand('zoomIn')"
         title="{{ 'zoom-in' | lang : 'ui' }}"
         ng-class="{ 'active' : getZoomRadio(zoom) == 0 }">
        <div class="icon"></div>
    </div>
    <div class="zoom-pan">
        <div class="origin"
             ng-style="{'transform': 'translate(0, ' + getHeight(100) + 'px)'}"
             ng-click="minder.execCommand('zoom', 100);"></div>
        <div class="indicator"
             ng-style="{
             'transform': 'translate(0, ' + getHeight(zoom) + 'px)',
             'transition': 'transform 200ms'
             }"></div>
    </div>
    <div class="nav-btn zoom-out"
         ng-click="minder.execCommand('zoomOut')"
         title="{{ 'zoom-out' | lang : 'ui' }}"
         ng-class="{ 'active' : getZoomRadio(zoom) == 1 }">
        <div class="icon"></div>
    </div>
    <div class="nav-btn hand"
         ng-click="minder.execCommand('hand')"
         title="{{ 'hand' | lang : 'ui' }}"
         ng-class="{ 'active' : minder.queryCommandState('hand') == 1 }">
        <div class="icon"></div>
    </div>
    <div class="nav-btn camera"
         ng-click="minder.execCommand('camera', minder.getRoot(), 600);"
         title="{{ 'camera' | lang : 'ui' }}">
        <div class="icon"></div>
    </div>
    <div class="nav-btn nav-trigger"
         ng-class="{'active' : isNavOpen}"
         ng-click="toggleNavOpen()"
         title="{{ 'navigator' | lang : 'ui' }}">
        <div class="icon"></div>
    </div>
</div>
<div class="nav-previewer" ng-show="isNavOpen"></div>