Skip to content

UXUI 21 Pull 2 #1

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.

Sign up for GitHub

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

Open
simongamester wants to merge 27 commits into
base: develop
Choose a base branch
from
Open

UXUI 21 Pull 2 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
6bb7ac7
Fixed Home Search box and Header Search Box
Jul 14, 2016
e975fb9
MPV Tabs converted to dropdown on mobile
Jul 14, 2016
d947125
Gaps and margins fixed
Jul 15, 2016
18019d6
Revert "Gaps and margins fixed"
Jul 15, 2016
b7b0ba1
Gaps and Margins Fixed
Jul 15, 2016
456b571
Patient Summary on mobile
Jul 15, 2016
30e3b13
Responsive Tables
Jul 15, 2016
bc72021
Applied responsive tables throughout
Jul 19, 2016
603b757
Stacking sub header below 300px
Jul 19, 2016
eb5bc15
Collapsable navbar in SPV
Jul 19, 2016
b494001
New Mobile Toolbar
Jul 19, 2016
bf8475c
Tabs for notifications, profile and search
Jul 19, 2016
44428e6
Minor amends
Jul 20, 2016
30053b1
Added count to Notifications
Jul 20, 2016
53c8871
Added ng switch / toggle
Jul 21, 2016
13bba75
Set active class
Jul 21, 2016
87b01da
Merge pull request #4 from simongamester/UXUI-20
mcajhill Jul 28, 2016
e56c5bd
Merge pull request #7 from simongamester/UXUI-23
mcajhill Jul 28, 2016
d0a7361
Merge pull request #9 from simongamester/UXUI-22
mcajhill Jul 28, 2016
221cbb9
Merge remote-tracking branch 'RippleOSI/develop' into UXUI-21
Jul 28, 2016
ab0604d
Merged with Develop
Jul 28, 2016
8ad46b2
Merge pull request #10 from simongamester/UXUI-24
mcajhill Jul 28, 2016
c05a8e0
Merged full patient list
Jul 28, 2016
bdf99eb
Merge remote-tracking branch 'RippleOSI/develop' into UXUI-21
Jul 28, 2016
551bf5b
Merge remote-tracking branch 'RippleOSI/develop' into UXUI-21
Jul 28, 2016
f8a647c
Merged
Jul 28, 2016
97a13c7
Merge remote-tracking branch 'RippleOSI/develop' into UXUI-21
Jul 28, 2016
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
272 changes: 163 additions & 109 deletions webapp/app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,38 +176,48 @@

<!-- Header -->
<div class="row header-background hidden-xs">
<div class="col-md-4 col-sm-4 header-left">
<div class="col-sm-4 header-left">
<div class="glyphs g">
<p class="header-title-1" ng-if="title"><img alt="Ripple Icon" class="header-icon" ng-click="goHome()"> {{title}}</p>
</div>
</div>

<div class="col-md-4 col-sm-4 hidden-xs header-search ng-cloak" ng-cloak ng-class="{'searchBarHidden' : !searchBarEnabled }">
<div class="search-left-inner-addon">
<div ng-show="searchMode" class="ng-cloak" ng-cloak>
<span ng-cloak ng-show="searchMode" class="label ng-cloak report-label">
<div ng-if="reportMode">Reports&nbsp;</div>
<div ng-if="settingsMode">Setting&nbsp;</div>
<div ng-if="patientMode">Patients&nbsp;</div>
<i ng-show="searchMode" ng-click="cancelSearchMode()" class="fa fa-times"></i></span>
</div>
<div ng-show="reportTypeSet" class="ng-cloak" ng-cloak>
<span ng-cloak ng-show="reportTypeSet" class="label ng-cloak reportType-label">
<div ng-if="reportTypeSet" class="reportTypeSet">
{{reportTypeString}}&nbsp;
<i ng-show="reportTypeSet" ng-click="cancelReportType()" class="fa cancel-reportType fa-times"></i>
<div class="col-md-5 col-sm-8 hidden-xs header-search ng-cloak" ng-cloak ng-class="{'searchBarHidden' : !searchBarEnabled }">

<div class="header-search-inner">

<div class="search-left-inner-addon">
<div ng-show="searchMode" class="ng-cloak" ng-cloak>
<span ng-cloak ng-show="searchMode" class="label ng-cloak report-label">
<div ng-if="reportMode">Reports&nbsp;</div>
<div ng-if="settingsMode">Setting&nbsp;</div>
<div ng-if="patientMode">Patients&nbsp;</div>
<i ng-show="searchMode" ng-click="cancelSearchMode()" class="fa fa-times"></i></span>
</div>
</span>
</div>
<div><i ng-show="searchExpression !== '' || searchMode" ng-click="cancelSearchMode()" class="clearAll fa fa-times-circle"></i></div>
<input key-bind="{ enter: 'searchFunction()', esc: 'cancelSearchMode()' }" class="form-control" placeholder="Search..." type="text" typeahead="report for report in reportTypes | filter:$viewValue" ng-model="searchExpression" ng-keyup="checkExpression()" ng-trim="false" ng-class="{'moveRight': searchMode && !reportTypeSet, 'moveFurtherRight': searchMode && reportTypeSet}" focus-element="searchFocused"/>
<div class="advanced-search-text pull-right">
<a ng-click="openAdvancedSearch()">Advanced search</a>
<div ng-show="reportTypeSet" class="ng-cloak" ng-cloak>
<span ng-cloak ng-show="reportTypeSet" class="label ng-cloak reportType-label">
<div ng-if="reportTypeSet" class="reportTypeSet">
{{reportTypeString}}&nbsp;
<i ng-show="reportTypeSet" ng-click="cancelReportType()" class="fa cancel-reportType fa-times"></i>
</div>
</span>
</div>
<div></div>
<input key-bind="{ enter: 'searchFunction()', esc: 'cancelSearchMode()' }" class="form-control" placeholder="Search..." type="text" typeahead="report for report in reportTypes | filter:$viewValue" ng-model="searchExpression" ng-keyup="checkExpression()" ng-trim="false" ng-class="{'moveRight': searchMode && !reportTypeSet, 'moveFurtherRight': searchMode && reportTypeSet}" focus-element="searchFocused"/>
</div>

<i ng-show="searchExpression !== '' || searchMode" ng-click="cancelSearchMode()" class="clearAll fa fa-times-circle"></i>
<button class="btn btn-info searchButton" ng-click="searchFunction();"><i class="fa fa-search"></i><span class="hidden-xs hidden-sm hidden-md"> Search</span></button>

</div>
<button class="btn btn-info searchButton" ng-click="searchFunction();"><i class="fa fa-search"></i> Search</button>

<div class="advanced-search-text pull-right">
<a ng-click="openAdvancedSearch()">Advanced search</a>
</div>

</div>
<div class="col-md-offset-1 col-sm-offset-1 col-md-3 col-sm-4 header-right">

<div class="col-md-3 col-sm-12 header-right">
<!-- User Profile -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
Expand Down Expand Up @@ -254,75 +264,102 @@
</div>
<!-- /.Header -->

<!-- Header mobile -->
<div class="row header-background-mobile visible-xs">
<div class="col-xs-12 header-left-mobile">
<div class="glyphs g">
<p class="header-title-1" ng-if="title"><img alt="Ripple Icon" class="header-icon" ng-click="goHome()"> {{title}}</p>
</div>
</div>

<div class="col-xs-12 header-right-mobile">
<!--<span class="glyphicon glyphicon-user"></span>
<span>Demonstration</span> -->
<!-- New Mobile Navbar -->
<nav class="navbar navbar-default header-nav visible-xs">
<div class="container-fluid">
<div class="navbar-header">
<a ng-if="title" class="navbar-brand" ng-click="goHome()"><img class="header-icon nav-logo" alt="{{title}}"> {{title}}</a>

<!-- User Profile -->
<div class="navbar-collapse">

<ul class="nav navbar-nav navbar-right">
<li class="dropdown-profile">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span>
<span class="header-title-3">Demonstration</span>
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
<ul class="dropdown-menu">
<ul class="nav nav-tabs pull-right" role="tablist">
<li ng-class="activeNavTab('notifications')"><a ng-click="changeNavTab('notifications')">
<i class="fa fa-bell-o"><span class="count">2</span></i></a>
</li>
<li ng-class="activeNavTab('user')"><a ng-click="changeNavTab('user')">
<i class="fa fa-user"></i></a>
</li>
<li ng-class="activeNavTab('search')"><a ng-click="changeNavTab('search')">
<i class="fa fa-search"></i></a>
</li>
</ul>
</div>

<!-- Tab panes -->
<div class="tab-content" ng-switch="currentNavTab">

<!-- Notification -->
<div ng-switch-when="notifications" class="pane row" id="tab-notifications">
<div class="notifications-header">
Notifications (2)
</div>
<div class="notifications-body">
<ul>
<li>
<div class="navbar-login">
<div class="row">
<div class="col-xs-4">
<div class="user-profile-image"><i class="glyphicon glyphicon-user"></i></div>
</div>
<div class="col-xs-8">
<p class="dropdown-profile-text"><b>User Name</b></p>
<p class="dropdown-profile-text"><b>{{currentUser.role}}</b></p>
<p class="dropdown-profile-text"> {{currentUser.email}} </p>
<p class="dropdown-profile-text">10/05/2099</p>
</div>
</div>
</div>
<div class="notification-info">Information from Liquid Logic (Social Care) is currently unavailable.</div>
<div class="notification-time">5 minutes ago</div>
</li>
<li class="divider"></li>
<li>
<div class="navbar-login navbar-login-session">
<div class="row">
<div class="col-lg-12">
<p>
<a href="https://ripple-identity-uat.answerappcloud.com/signout" class="btn btn-danger btn-block">Sign Out</a>
</p>
</div>
</div>
</div>
<div class="notification-info">Information from Liquid Logic (Social Care) is currently unavailable.</div>
<div class="notification-time">5 minutes ago</div>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.User Profile -->
</div>

<div class="col-xs-12 header-search-mobile">
<div class="search-left-inner-addon">
<div ng-show="reportMode" class="ng-cloak" ng-cloak><span ng-cloak ng-show="reportMode" class="label ng-cloak report-label">Reports&nbsp;<i ng-show="reportMode" ng-click="cancelSearchMode()" class="fa fa-times"></i></span></div>
<div><i ng-show="searchExpression !== '' || reportMode" ng-click="cancelReportMode()" class="clearAll fa fa-times-circle"></i></div>
<input class="form-control" placeholder="Search..." type="text" typeahead="report for report in reportTypes | filter:$viewValue" ng-model="searchExpression" ng-keyup="checkExpression()" ng-trim="false" ng-class="{moveRight: reportMode}" />
</div>
</div>
<!-- /.Notification -->

<!-- User Profile -->
<div ng-switch-when="user" class="pane row" id="tab-user">
<div class="col-xs-12">

<div class="user-type superuser">Super User</div>
<!--<div class="user-type clinician">Clinician</div>-->
<!--<div class="user-type patient">Patient</div>-->

<div class="user-profile-image"><i class="fa fa-user"></i></div>
<p><strong>User Name:</strong> {{currentUser.role}}</p>
<p>{{currentUser.email}}</p>
<p>10/05/2099</p>
</div>
<div class="col-xs-12 options">
<ul>
<li><a href="" class="btn">Settings</a></li>
<li><a href="" class="btn">Admin Console</a></li>
</ul>
<ul>
<li><a href="https://ripple-identity-uat.answerappcloud.com/signout" class="signout btn">SIGN OUT <i class="fa fa-sign-out"></i></a></li>
</ul>
</div>
</div>
<!-- /.User Profile -->

<!-- Mobile Nav Search -->
<div ng-switch-when="search" class="pane row" id="tab-search">

<div id="mobile-nav-search">
<div class="col-xs-12 header-search-mobile">

<button class="btn btn-info" ng-click="searchFunction();"><i class="fa fa-search"></i></button>

<div class="search-left-inner-addon">
<div ng-show="reportMode" class="ng-cloak" ng-cloak><span ng-cloak ng-show="reportMode" class="label ng-cloak report-label">Reports&nbsp;<i ng-show="reportMode" ng-click="cancelSearchMode()" class="fa fa-times"></i></span></div>
<div><i ng-show="searchExpression !== '' || reportMode" ng-click="cancelReportMode()" class="clearAll fa fa-times-circle"></i></div>
<input class="form-control" placeholder="Search..." type="text" typeahead="report for report in reportTypes | filter:$viewValue" ng-model="searchExpression" ng-keyup="checkExpression()" ng-trim="false" ng-class="{moveRight: reportMode}" />
</div>

</div>

</div>

</div>
<!-- /.Mobile Nav Search -->

</div>
</div>
<div class="col-xs-12 header-search-mobile">
<button class="btn btn-info" ng-click="searchFunction();"><i class="fa fa-search"></i> Search</button>
</div>
</div>
<!-- /.Header mobile -->
<!-- /.Tab panes -->



</div><!-- /.container-fluid -->
</nav>
<!-- /.New Mobile Navbar -->

<!-- Header toolbar -->
<div class="row header-toolbar hidden-xs">
Expand All @@ -340,40 +377,57 @@
<!-- Header toolbar mobile -->
<div class="row header-toolbar visible-xs">
<div class="col-xs-2">
<span class="glyphicon glyphicon-arrow-left previous-page-arrow" ng-if="previousPage && currentUser.role=='idcr'" ng-click="goBack()"></span>
<div class="innner">
<span class="glyphicon glyphicon-arrow-left previous-page-arrow" ng-if="previousPage && currentUser.role=='idcr'" ng-click="goBack()"></span>
</div>
</div>
<div class="col-xs-8 current-page-title-mobile">
<span>{{pageHeader}}</span>
<div class="inner">
<span>{{pageHeader}}</span>
</div>
</div>
<div class="col-xs-2 text-right">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidebar-nav" aria-expanded="false" ng-if=(userContextViewExists)>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<!-- /.Header toolbar mobile-->

<!-- Sidebar-->
<div class="wrapper navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<div class="visible-xs mobile-sidebar navbar-default">
<div class="collapse navbar-collapse sidebar" id="sidebar-nav">
<ul side-menu class="nav" ui-view="actions"></ul>
</div>
</div>
<!-- /.Sidebar-->

<!-- /page-wrapper -->
<div ng-class="actionsExists ? 'page-wrapper' : 'page-wrapper-off'">
<div class="section-north" ui-view="user-context" ng-if=(userContextViewExists)></div>

<div class="section section-content">
<div class="row section-row">
<div class="col-md-{{mainWidth}} col-left">
<div class="section-main" ui-view="main"></div>
</div>
<div class="col-md-{{detailWidth}} col-right">
<div class="section-detail" ui-view="detail"></div>
<!-- /.Header toolbar mobile-->

<!-- Sidebar-->
<div class="wrapper navbar-default sidebar hidden-xs" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul side-menu class="nav" ui-view="actions"></ul>
</div>
</div>
<!-- /.Sidebar-->

<!-- /page-wrapper -->
<div ng-class="actionsExists ? 'page-wrapper' : 'page-wrapper-off'">
<div class="section-north" ui-view="user-context" ng-if=(userContextViewExists)></div>

<div class="section section-content">
<div class="row">
<div class="col-md-{{mainWidth}} col-left">
<div class="section-main" ui-view="main"></div>
</div>
<div class="col-md-{{detailWidth}} col-right">
<div class="section-detail" ui-view="detail"></div>
</div>
</div>
</div>
</div>
</div>
<!-- /.#page-wrapper -->
<!-- /.#page-wrapper -->

<!-- /.#page-wrapper -->
<!-- /.#page-wrapper -->

<div class="notifications" growl-notifications></div>

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
Expand Down
20 changes: 20 additions & 0 deletions webapp/app/scripts/controllers/header-controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -323,4 +323,24 @@ angular.module('rippleDemonstrator')
$scope.searchExpression = expression;
$scope.searchFocused = true;
});

// Mobile Nav (New)
$scope.currentNavTab = ''; // search, notifications or user

$scope.changeNavTab = function(newTab){

// Is tab already expanded?
if( $scope.currentNavTab == newTab ){
$scope.currentNavTab = '';
} else {
$scope.currentNavTab = newTab;
}
}

$scope.activeNavTab = function(thisTab){
if( thisTab == $scope.currentNavTab ){
return 'active';
}
}

});
4 changes: 4 additions & 0 deletions webapp/app/scripts/controllers/patient-list-full.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ angular.module('rippleDemonstrator')

$scope.noResults = '';
$scope.tab = 'patientInfo';
$scope.tabName = 'Patient Info';
$scope.patients = [];
$rootScope.searchMode = true;

Expand Down Expand Up @@ -168,14 +169,17 @@ angular.module('rippleDemonstrator')

$scope.viewPatients = function () {
$scope.tab = 'patientInfo';
$scope.tabName = 'Patient Info';
};

$scope.viewDateTime = function () {
$scope.tab = 'dateTime';
$scope.tabName = 'Date / Time';
};

$scope.viewCounts = function () {
$scope.tab = 'counts';
$scope.tabName = 'Counts';
};


Expand Down
3 changes: 2 additions & 1 deletion webapp/app/styles/sb-admin-2.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,14 @@ body {
padding: 0 15px;
min-height: 568px;
background-color: transparent;
padding-bottom: 50px;
}

@media(min-width:768px) {
.page-wrapper {
position: inherit;
margin: 0 0 0 250px;
padding: 0 30px;
padding: 0 30px 50px 30px; /* 50px added to bottom to avoid footer overlapping */
/* border-left: 1px solid #e7e7e7; */
}
}
Expand Down
Loading