Skip to content

Commit

Permalink
Merge pull request #3059 from SEED-platform/3052-refactor/top-right-n…
Browse files Browse the repository at this point in the history 
…av-update

3052 refactor/top right nav update
  • Loading branch information
@macintoshpie
macintoshpie committed Jan 6, 2022
2 parents 8d838f1 + 25e3d5f commit 072a1f1
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 8 deletions.
32 changes: 32 additions & 0 deletions seed/static/seed/js/controllers/menu_controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ angular.module('BE.seed.controller.menu', [])
'$uibModal',
'$log',
'urls',
'auth_service',
'organization_service',
'user_service',
'dataset_service',
Expand All @@ -26,6 +27,7 @@ angular.module('BE.seed.controller.menu', [])
$uibModal,
$log,
urls,
auth_service,
organization_service,
user_service,
dataset_service,
Expand Down Expand Up @@ -192,12 +194,40 @@ angular.module('BE.seed.controller.menu', [])
* @param {obj} org
*/
$scope.set_user_org = function (org) {
$scope.mouseout_org()
user_service.set_organization(org);
$scope.menu.user.organization = org;
console.log($scope.menu.user.organization);
$state.reload();
init();
};
// set authorization and organization data to $scope
set_auth = function (org_id) {
auth_service.is_authorized(org_id, ['requires_owner'])
.then(function (data) {
$scope.auth = data.auth.requires_owner ? data.auth : 'not authorized'
}, function (data) {
$scope.auth = data.message;
})
};
set_org = function (org_id) {
organization_service.get_organization(org_id)
.then(function(data) {
$scope.org = data.organization
})
};
$scope.mouseover_org = function(org_id) {
$scope.show_org_id = true
$scope.hover_org_id = org_id
};
$scope.mouseout_org = function() {
$scope.show_org_id = false
}
$scope.track_mouse = function(e) {
let xpos = `${e.view.window.innerWidth - e.clientX - 105}px`
let ypos = `${e.clientY - 25}px`
$scope.hover_style = `right: ${xpos}; top: ${ypos};`
}

//DMcQ: Set up watch statements to keep nav updated with latest datasets_count, etc.
// This isn't the best solution but most expedient. This approach should be refactored later by
Expand Down Expand Up @@ -238,6 +268,8 @@ angular.module('BE.seed.controller.menu', [])
$scope.menu.user.organizations = data.organizations;
// get the default org for the user
$scope.menu.user.organization = _.find(data.organizations, {id: _.toInteger(user_service.get_organization().id)});
set_auth($scope.menu.user.organization.id)
set_org($scope.menu.user.organization.id)
}).catch(function (error) {
// user does not have an org
$rootScope.route_load_error = true;
Expand Down
25 changes: 25 additions & 0 deletions seed/static/seed/scss/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -367,6 +367,22 @@ a:not([href]) {
height: 54px;
border-bottom: 1px solid $gray_lighter;

.hover-org-container {
position: absolute;
background: none;
z-index: 10000;
width: 100px;
}

.hover-org-id {
font-size: 10px;
background:rgba(255, 255, 255, 0.8);
border: 1px solid gray;
border-radius: 3px;
color: gray;
padding:2px;
}

.logo_container {

.logo {
Expand Down Expand Up @@ -427,6 +443,10 @@ a:not([href]) {
}
}

ul.justify-left a {
text-align: left;
}

ul.dropdown-menu {

text-align: center;
Expand All @@ -445,6 +465,11 @@ a:not([href]) {
text-align: center;
}

.active {
background-color: $gray_lightest;
text-decoration: none;
}

a {
padding: 8px 40px 8px 8px;
position: relative;
Expand Down
37 changes: 29 additions & 8 deletions seed/templates/seed/_header.html
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,26 @@
<div class="header">
<div class="hover-org-container" ng-if="show_org_id" style="{$ hover_style $}">
<span class='hover-org-id'>
ID: {$ hover_org_id $}
</span>
</div>
<div class="add_menu_container">
<div class="btn-group org-dropdown" uib-dropdown is-open="status.isopen">
<button id="btnUserOrgs" type="button" class="btn btn-default" uib-dropdown-toggle ng-disabled="disabled">
{$ menu.user.organization.name $} <span class="caret"></span>
<span style="color:gray">Current Organization:</span> {$ menu.user.organization.name $} <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btnUserOrgs">
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btnUserOrgs" ng-mousemove="track_mouse($event)">
<li ng-if="!menu.user.organizations.length" style="text-align: center;">
<span class="glyphicon glyphicon-refresh spinning"></span> <span translate>Loading...</span>
</li>
<li ng-repeat="org in menu.user.organizations">
<a href ng-click="set_user_org(org)" ng-class="{'pink-bg': !org.user_role}">{$ org.name $}
<a
href ng-click="set_user_org(org)"
ng-class="{'pink-bg': !org.user_role}"
ng-mouseover="mouseover_org(org.id)"
ng-mouseout="mouseout_org()"
>
{$ org.name $}
<i class="fa fa-check" ng-show="org.id == menu.user.organization.id"></i>
</a>
</li>
Expand All @@ -20,16 +31,26 @@
<i class="fa fa-plus"></i>
<span class="sr-only" translate>Toggle Dropdown</span>
</button>
<ul uib-dropdown-menu class="dropdown-menu pull-right" role="menu" aria-labelledby="btnCreateNew">
<li class="dropdown-header" translate>Create a new...</li>
<ul uib-dropdown-menu class="dropdown-menu pull-right justify-left" role="menu" aria-labelledby="btnCreateNew">
<li class="dropdown-header" translate>Organization Settings</li>
<li class="divider"></li>
<li><a ui-sref="organization_settings({organization_id: org.id})" ng-if="auth.requires_owner" ui-sref-active="active" translate>Settings</a></li>
<li><a ui-sref="organization_sharing({organization_id: org.id})" ng-if="org.is_parent && auth.requires_owner" ui-sref-active="active" translate>Sharing</a></li>
<li><a ui-sref="organization_column_settings({organization_id: org.id, inventory_type: 'properties'})" ng-if="auth.requires_owner" ui-sref-active="active" translate>Column Settings</a></li>
<li><a ui-sref="organization_column_mappings({organization_id: org.id, inventory_type: 'properties'})" ng-if="auth.requires_owner" ui-sref-active="active" translate>Column Mappings</a></li>
<li><a ui-sref="organization_data_quality({organization_id: org.id, inventory_type: 'properties'})" ng-if="org.is_parent && auth.requires_owner" ui-sref-active="active" translate>Data Quality</a></li>
<li><a ui-sref="organization_cycles({organization_id: org.id})" ng-if="org.is_parent && auth.requires_owner" ui-sref-active="active" translate>Cycles</a></li>
<li><a ui-sref="organization_labels({organization_id: org.id})" ng-if="auth.requires_owner" ui-sref-active="active" translate>Labels</a></li>
<li><a ui-sref="organization_sub_orgs({organization_id: org.id})" ng-if="org.is_parent && auth.requires_owner" ui-sref-active="active" translate>Sub-Organizations</a></li>
<li><a ui-sref="organization_members({organization_id: org.id})" ui-sref-active="active" translate>Members</a></li>
<li><a ui-sref="organization_email_templates({organization_id: org.id})" ui-sref-active="active" translate>Email Templates</a></li>
<li><a ui-sref="organization_derived_columns({organization_id: org.id, inventory_type: 'properties'})" ui-sref-active="active" translate>Derived Columns</a></li>


<!--<li>
<a data-toggle="modal" data-target="#newProjectModalIndex" ng-click="open_create_project_modal()">Project</a>
</li>
<li class="divider" ng-show="menu.user.organization.user_role !== 'viewer'"></li>-->
<li ng-show="menu.user.organization.user_role !== 'viewer'">
<a data-toggle="modal" data-target="#dataUploadModal" ng-click="open_data_upload_modal()" translate>Data Set</a>
</li>
</ul>
</div>
</div>
Expand Down

0 comments on commit 072a1f1

Please sign in to comment.