shadowsocks-manager/plugins/webgui/public/views/admin/admin.html

A shadowsocks manager tool for multi user and traffic control.

<div ng-controller="AdminController" layout="column" ng-cloak layout-fill>
    <section layout="row" flex>
    <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="false" layout="column" layout-align="space-between stretch">
        <md-content>
            <div layout="column">
                <md-toolbar class="md-tall">
                    <span flex></span>
                    <div layout="column" class="md-toolbar-tools-bottom inset">
                        <user-avatar></user-avatar>
                        <span></span>
                        <div>Admin</div>
                    </div>
                </md-toolbar>
                <md-list>
                    <md-list-item ng-repeat-start="menu in menus" ng-if="menu.name !== 'divider'" ng-click="menuClick($index)" ng-hide="menu.hide">
                        <md-item-content md-ink-ripple layout="row" layout-align="start center">
                            <div class="inset">
                                <md-icon class="material-icons">{{menu.icon}}</md-icon>
                            </div>
                            <div class="inset">
                                {{ menu.name | translate }}
                            </div>
                        </md-item-content>
                    </md-list-item>
                    <md-divider ng-repeat-end ng-if="menu.name === 'divider'"></md-divider>
                </md-list>
            </div>
        </md-content>
        <div style="position: absolute; left: 5px; bottom: 5px; color:#555; font-size:12px;">{{ config.version }}</div>
    </md-sidenav>
    <div flex layout="column">
        <div>
            <md-toolbar>
                <div class="md-toolbar-tools" ng-if="!publicInfo.searchBar">
                    <md-button class="md-icon-button" aria-label="menu" ng-click="menuButton()" ng-if="!menuSearch.input">
                        <i class="material-icons">{{menuButtonIcon || 'menu'}}</i>
                    </md-button>
                    <md-button class="md-icon-button" aria-label="cancel search" ng-click="cancelSearch()" ng-if="menuSearch.input">
                        <i class="material-icons">arrow_back</i>
                    </md-button>
                    <div ng-if="!menuSearch.input">{{ title | translate }}</div>
                    <span flex ng-if="!menuSearch.input"></span>
                    <md-input-container class="search-input" flex ng-if="menuSearch.input">
                        <label>&nbsp;</label>
                        <input ng-model="menuSearch.text" focus-me="menuSearch.input">
                    </md-input-container>
                    <md-button class="md-icon-button" aria-label="menu right" ng-if="menuRightButtonIcon && !menuSearch.input" ng-click="menuRightButtonClick()">
                        <i class="material-icons">{{menuRightButtonIcon}}</i>
                    </md-button>
                    <md-button class="md-icon-button" aria-label="menu right search" ng-if="menuSearchButtonIcon && !menuSearch.input" ng-click="menuSearchButtonClick()">
                        <i class="material-icons">{{menuSearchButtonIcon}}</i>
                    </md-button>
                    <md-button aria-label="language menu" class="md-icon-button" ng-click="chooseLanguage()" ng-if="currentState === 'admin.index'">
                        <md-icon class="material-icons">language</md-icon>
                    </md-button>
                </div>
            </md-toolbar>
        </div>

        <div flex layout="row">
            <md-sidenav class="md-sidenav-left animate-show" md-component-id="innerLeft" md-is-locked-open="$mdMedia('gt-sm')" ng-show="!$mdMedia('gt-sm')" style="padding: 0px; background-color: #FAFAFA;" ng-style="sideNavWidth()" layout="column" layout-align="space-between stretch">
                <md-content style="background-color: #FAFAFA; overflow-x: hidden;">
                    <div layout="column" layout-align="center start">
                        <md-list style="width: 100%;">
                            <md-list-item ng-repeat-start="menu in menus" ng-if="menu.name !== 'divider'" ng-click="menuClick($index)" ng-hide="menu.hide">
                                <md-item-content style="padding-left: 0px;" md-ink-ripple layout="row" layout-align="start center">
                                    <div style="padding-left: 0px;" class="inset">
                                        <md-icon class="material-icons">{{menu.icon}}</md-icon>
                                    </div>
                                    <div class="inset" ng-show="innerSideNav">
                                        {{ menu.name | translate }}
                                    </div>
                                </md-item-content>
                            </md-list-item>
                            <md-divider ng-repeat-end ng-if="menu.name === 'divider'"></md-divider>
                        </md-list>
                    </div>
                </md-content>
                <div style="position: absolute; left: 5px; bottom: 5px; color:#555; font-size:12px;">{{ config.version }}</div>
            </md-sidenav>
            <md-content flex layout="row">
                <div ui-view flex autoscroll="true"></div>
            </md-content>
        </div>
    </div>
    </section>
    <md-button ng-show="fabButton" class="md-fab md-fab-bottom-right" ng-click="fabButtonClick()">
        <md-icon class="material-icons">{{ fabButtonIcon || 'add' }}</md-icon>
    </md-button>
</div>