added a sidenav toggle button when the sidenav is hidden.

Signed-off-by: Ken Fukuyama <kenfdev@gmail.com>
This commit is contained in:
Ken Fukuyama 2017-09-21 22:48:34 +09:00 committed by Alex Ellis
parent 296b173c7f
commit ac3e91cbdc
4 changed files with 28 additions and 3 deletions

View File

@ -0,0 +1,4 @@
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
</svg>

After

Width:  |  Height:  |  Size: 224 B

View File

@ -0,0 +1,4 @@
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
</svg>

After

Width:  |  Height:  |  Size: 209 B

View File

@ -19,11 +19,24 @@
<body ng-controller="home">
<div layout="column" ng-cloak>
<md-toolbar class="md-theme-indigo" hide-gt-sm>
<div class="md-toolbar-tools">
<md-button ng-click="toggleSideNav()" class="md-icon-button" aria-label="Menu">
<md-icon md-svg-icon="img/icons/ic_menu_white.svg"></md-icon>
</md-button>
</div>
</md-toolbar>
<section id="popupContainer" layout="row" flex>
<md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')" md-whiteframe="4" layout="column">
<md-toolbar class="md-theme-indigo">
<h1 class="md-toolbar-tools"><img src="icon.png" alt="OpenFaaS Icon" width="60px" height="60px" class="md-avatar"/>&nbsp; OpenFaaS Portal</h1>
<div class="md-toolbar-tools">
<img src="icon.png" alt="OpenFaaS Icon" width="60px" height="60px" class="md-avatar"/>
<h1 style="flex: 1 1 auto;">&nbsp; OpenFaaS Portal</h1>
<md-button ng-click="toggleSideNav()" class="md-icon-button" aria-label="Back" hide-gt-sm>
<md-icon md-svg-icon="img/icons/ic_arrow_back_white.svg"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-content layout-padding>

View File

@ -4,8 +4,8 @@
var app = angular.module('faasGateway', ['ngMaterial']);
app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$mdDialog', '$mdToast',
function($scope, $log, $http, $location, $timeout, $mdDialog, $mdToast) {
app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$mdDialog', '$mdToast', '$mdSidenav',
function($scope, $log, $http, $location, $timeout, $mdDialog, $mdToast, $mdSidenav) {
$scope.functions = [];
$scope.invocationRequest = "";
$scope.invocationResponse = "";
@ -14,6 +14,10 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
contentType: "text"
};
$scope.toggleSideNav = function() {
$mdSidenav('left').toggle();
};
$scope.functionTemplate = {
image: "",
envProcess: "",