Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added branding changes #1072

Merged
merged 1 commit into from
Sep 26, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,10 @@ gulp.task("jsLibraries", function() {
"node_modules/angular-patternfly/node_modules/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js",
"node_modules/datatables/media/js/jquery.dataTables.js",
"node_modules/angular-patternfly/node_modules/angularjs-datatables/dist/angular-datatables.js",
"node_modules/bootstrap-select/dist/js/bootstrap-select.js"
"node_modules/bootstrap-select/dist/js/bootstrap-select.js",
"node_modules/re-tree/re-tree.min.js",
"node_modules/ua-device-detector/ua-device-detector.min.js",
"node_modules/ng-device-detector/ng-device-detector.min.js"
])
.pipe(uglify())
.pipe(concat("libraries.js"))
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"font-awesome": "^4.7.0",
"idb-wrapper": "~1.7.1",
"jquery": "~3.1.1",
"ng-device-detector": "^5.1.2",
"numeral": "~1.5.3",
"patternfly": "~3.51.1"
},
Expand Down
2 changes: 1 addition & 1 deletion src/commons/js/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
//# sourceURL=storage-management-plugin.js
(function() {

var storageModule = angular.module("TendrlModule", ["ui.router", "ui.bootstrap", "frapontillo.bootstrap-switch", "patternfly.charts", "patternfly.card", "patternfly.form", "patternfly.notification", "patternfly.table", "patternfly.filters", "patternfly.modals"]);
var storageModule = angular.module("TendrlModule", ["ui.router", "ui.bootstrap", "frapontillo.bootstrap-switch", "patternfly.charts", "patternfly.card", "patternfly.form", "patternfly.notification", "patternfly.table", "patternfly.filters", "patternfly.modals", "ng.deviceDetector"]);

/* Setting up provider for getting config data */
storageModule.provider("config", function() {
Expand Down
35 changes: 35 additions & 0 deletions src/commons/scss/_base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -208,4 +208,39 @@
.toolbar-pf-actions .toolbar-pf-filter {
width: 25%;
}
}


/* About modal styles */

.about-modal-pf {
background-image: url(/images/bg-modal-about-pf.png) !important;

.about-modal-footer-logo {
height: 35px;
}
}

@media screen and (max-width: 768px) {
#aboutModal .modal-dialog {
width: 460px;

.modal-body {
padding: 0 40px;
}

.about-modal-footer-logo {
height: 27px;
}
}
}

@media screen and (max-width: 480px) {
#aboutModal .modal-dialog {
width: 444px;
}

.about-modal-footer-logo {
height: 25px;
}
}
3 changes: 2 additions & 1 deletion src/config.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,6 @@
"msgRefreshIntervalTime": 5,
"statusRefreshIntervalTime": 30,
"eventsRefreshIntervalTime": 20,
"volumeRefreshInterval": 10
"volumeRefreshInterval": 10,
"releaseVersion": "1.6.3"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Neha can we anyhow import the package.json file to use the release version. I think it will be a headache for us while building the UI package to change it every time. Just a thought!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cloudbehl Agreed. But since the package.json file doesn't get copied to the dist folder and its not a good idea to keep the package manager configuration file in the production environment, I need to make it configurable here. In future, this version number should be available from the API.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea to make it configurable for now.

}
Binary file added src/images/bg-modal-about-pf.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
</head>

<body class="tendrl-app">
<header ng-if="isHeaderShow"></header>
<tendrl-header ng-if="isHeaderShow"></tendrl-header>
<tendrl-nav></tendrl-nav>
<div class="container-fluid container-cards-pf container-pf-nav-pf-vertical container-pf-nav-pf-vertical-with-secondary margin-fix">
<div class="row">
Expand Down
47 changes: 37 additions & 10 deletions src/modules/base/header/header.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,11 @@
<pf-toast-notification-list notifications="$root.notification" html-content="header.htmlContent" show-close="true" close-callback="header.notificationClose" update-viewing="header.updateViewing"></pf-toast-notification-list>
</span>
<ul class="nav navbar-nav navbar-right navbar-iconic" ng-if="!notification.message.length">
<li dropdown routerLinkActive="active" class="dropdown">
<button class="btn btn-link nav-item-iconic" id="aboutModalDropdown" data-toggle="modal" data-target="#aboutModal">
<span title="Help" class="fa pficon-help dropdown-title"></span>
</button>
</li>
<li class="dropdown admin" ng-if="header.getUserRole() === 'admin'">
<a data-toggle="dropdown" class="dropdown-toggle nav-item-iconic" href="" data-template="" data-animation="am-fade-and-slide-top" bs-dropdown="dropdown" title="User Management" id="usermanagement" data-toggle="admin-dropdown">
<i class="fa fa-gear"></i>
Expand All @@ -43,15 +48,7 @@
<i class="pficon pficon-user"></i>
<span class="headerName">{{ header.currentUser }}</span>
</a>
<pf-modal-overlay
show-modal="header.showUserSetting"
on-close="header.closeUserSetting(dismissCause)"
modal-id="header.userSettingId"
modal-title="header.userSettingTitle"
modal-body-template="header.userSettingTemplate"
action-buttons="header.userSettingActionButtons"
is-form="header.isForm"
modal-body-scope="header.userScope">
<pf-modal-overlay show-modal="header.showUserSetting" on-close="header.closeUserSetting(dismissCause)" modal-id="header.userSettingId" modal-title="header.userSettingTitle" modal-body-template="header.userSettingTemplate" action-buttons="header.userSettingActionButtons" is-form="header.isForm" modal-body-scope="header.userScope">
</pf-modal-overlay>
<ul class="dropdown-menu" role="menu" aria-labelledby="usermenu">
<li role="presentation"><a href="" role="menuitem" tabindex="-1" ng-click="header.userSetting()">My Settings</a></li>
Expand Down Expand Up @@ -115,4 +112,34 @@ <h1>No Alerts Detected</h1>
</div>
</div>
</div>
</nav>
</nav>
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content about-modal-pf">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<span class="pficon pficon-close"></span>
</button>
</div>
<div class="modal-body">
<h1>Tendrl Unified Storage Manager</h1>
<div class="product-versions-pf">
<ul class="list-unstyled">
<li><strong>Version</strong>{{header.releaseVersion}}</li>
<li><strong>User</strong> {{ header.currentUser }}</li>
<li><strong>User Role</strong> {{header.getUserRole()}}</li>
<li class="text-capitalize"><strong>Browser</strong> {{header.device.browser}}</li>
<li><strong>Browser Version</strong> {{header.device.browser_version}}</li>
<li class="text-capitalize"><strong>Browser OS</strong> {{header.device.os}}</li>
</ul>
</div>
<div class="trademark-pf">
<div class="pull-left">http://www.tendrl.org</div>
</div>
</div>
<div class="modal-footer">
<img class="pull-right about-modal-footer-logo" src="../images/logo.png" alt="tendrl | Unified Storage Manager" />
</div>
</div>
</div>
</div>
6 changes: 4 additions & 2 deletions src/modules/base/header/header.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@

angular
.module("TendrlModule")
.component("header", {
.component("tendrlHeader", {

templateUrl: "/modules/base/header/header.html",
controller: headerController,
controllerAs: "header"
});

/*@ngInject*/
function headerController($rootScope, $state, $scope, $uibModal, AuthManager, utils, Notifications, userStore) {
function headerController($rootScope, $state, $scope, $uibModal, AuthManager, utils, Notifications, userStore, deviceDetector, config) {

var vm = this,
currentUser;
Expand All @@ -20,6 +20,7 @@
vm.searchBy = {};
vm.filterBy = "";
vm.severity = "";
vm.releaseVersion = config.releaseVersion;

vm.notificationClose = notificationClose;
vm.logout = logout;
Expand All @@ -35,6 +36,7 @@
vm.toggleNav = toggleNav;
vm.getUserRole = getUserRole;
vm.updateViewing = updateViewing;
vm.device = deviceDetector;

$rootScope.notification = Notifications.data;
vm.htmlContent = true;
Expand Down
4 changes: 4 additions & 0 deletions src/modules/base/header/header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,10 @@
visibility: hidden;
}

.dropdown-title {
line-height: 1.2 !important;
}

@media screen and (max-width: 992px) {
.navbar-brand {
display: none;
Expand Down
97 changes: 47 additions & 50 deletions src/modules/login/login.html
Original file line number Diff line number Diff line change
@@ -1,59 +1,56 @@
<div class="tendrl-login-view-container">
<img src="/images/bg-login.jpg" alt="" class="adjusted">
<div class="login-page">
<span id="badge">
<img src="/images/logo.png" alt="Tendrl logo">
</span>
<div class="container">
<div class="login-pf-page">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div id="brand">
<img class="nav-brand-name brand-name-img" src="/images/name.png" alt="tendrl | Unified Storage Manager" />
</div>
<!--/#brand-->
</div>
<!--/.col-*-->
<div class="col-sm-6 col-md-5 col-lg-3 login">
<div class="alert alert-danger" ng-if="loginCntrl.errorMsg.length > 0">
<span class="pficon pficon-error-circle-o"></span>
<label ng-bind="loginCntrl.errorMsg"></label>
</div>
<form class="form-horizontal" name="loginCntrl.signInForm" ng-submit="loginCntrl.login()">
<div class="form-group" ng-class="{'has-error': loginCntrl.signInForm.username.$dirty && loginCntrl.signInForm.username.$error.required }">
<label for="inputUsername" class="col-sm-3 col-md-3">Username</label>
<div class="col-sm-8 col-md-8">
<input class="form-control" id="username" tabindex="1" type="text" ng-model="loginCntrl.user.username" ng-trim="false" name="username" placeholder="Username" required />
</div>
<div>
<div class="col-sm-3 col-md-3"></div>
<span class="col-sm-8 col-md-8 help-block" ng-show="loginCntrl.signInForm.username.$dirty && loginCntrl.signInForm.username.$error.required">Username is required</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': loginCntrl.signInForm.username.$dirty && loginCntrl.signInForm.username.$error.required }">
<label for="inputPassword" class="col-sm-3 col-md-3">Password</label>
<div class="col-sm-8 col-md-8">
<input class="form-control" type="password" name="password" id="password" tabindex="2" placeholder="Password" ng-model="loginCntrl.user.password" required />
</div>
<div>
<div class="col-sm-3 col-md-3"></div>
<span class="col-sm-8 col-md-8 help-block" ng-show="loginCntrl.signInForm.password.$dirty && loginCntrl.signInForm.password.$error.required">Password is required</span>
<div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3">
<header class="login-pf-page-header">
<img class="login-pf-brand" src="/images/name.png" alt="tendrl | Unified Storage Manager" />
</header>
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
<div class="card-pf">
<header class="login-pf-header">
<select class="selectpicker">
<option>English</option>
</select>
<h1>Log In to Your Account</h1>
</header>
<div class="text-danger validation-msg" ng-if="loginCntrl.errorMsg.length > 0">
<label ng-bind="loginCntrl.errorMsg"></label>
</div>
<form name="loginCntrl.signInForm" ng-submit="loginCntrl.login()" novalidate>
<div class="form-group form-group has-feedback" ng-class="{'has-error': (loginCntrl.signInForm.$submitted || loginCntrl.signInForm.username.$dirty) && loginCntrl.signInForm.username.$invalid }">
<label class="sr-only" for="username">Username</label>
<input class="form-control" name="username" id="username" tabindex="1" type="text" placeholder="Username" ng-model="loginCntrl.user.username" ng-trim="false" required autofocus>
<div class="help-block" ng-show="(loginCntrl.signInForm.$submitted || loginCntrl.signInForm.username.$dirty) && loginCntrl.signInForm.username.$invalid">Enter your Username</div>
</div>
<div class="form-group" class="form-group has-feedback" ng-class="{ 'has-error': (loginCntrl.signInForm.$submitted || loginCntrl.signInForm.password.$dirty) && loginCntrl.signInForm.password.$invalid }">
<label class="sr-only" for="password">Password
</label>
<input class="form-control" id="password" name="password" type="password" tabindex="2" placeholder="Password" ng-model="loginCntrl.user.password" required>
<div class="help-block" ng-show="(loginCntrl.signInForm.$submitted || loginCntrl.signInForm.password.$dirty) && loginCntrl.signInForm.password.$invalid">Enter your password
</div>
</div>
<button type="submit" class="btn btn-primary btn-block btn-lg">
<i class="glyphicon glyphicon-refresh glyphicon-refresh-animate hidden" data-ng-class="{'hidden': loginCntrl.formSubmitInProgress !== true }">
</i>
<span class="submit-button-text">Log In</span>
</button>
</form>
<p class="login-pf-signup"></p>
</div>
</div>
<div class="form-group">
<div class="col-xs-4 col-md-offset-7 col-xs-offset-7 col-sm-offset-7 col-sm-4 col-md-4 submit">
<button type="submit" class="btn btn-primary btn-lg">
<i class="glyphicon glyphicon-refresh glyphicon-refresh-animate hidden" data-ng-class="{'hidden': loginCntrl.formSubmitInProgress !== true }">
</i>
<span class="submit-button-text">Log In</span>
</button>
</div>
</div>
</form>
<!-- col -->
</div>
<!-- row -->
</div>
<!--/.col-*-->
<!-- col -->
</div>
<!--/.row-->
<!-- row -->
</div>
<!--/.container-->
<!-- container -->
</div>
</div>
<!-- login-pf-page -->
<!-- login-pf-page -->
</div>
Loading