Initial commit
This commit is contained in:
zhongjin
@@ -0,0 +1,37 @@
|
||||
var $ = require('jquery');
|
||||
var CoreView = require('backbone/core-view');
|
||||
var IndustriesDropdown = require('./user-industries/dropdown-view');
|
||||
|
||||
/**
|
||||
* View to render the user settings section in the header.
|
||||
* Expected to be created from existing DOM element.
|
||||
*/
|
||||
module.exports = CoreView.extend({
|
||||
events: {
|
||||
'click .js-dropdown-target': '_createDropdown'
|
||||
},
|
||||
|
||||
_createDropdown: function (event) {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
var $target = $(event.target);
|
||||
|
||||
var view = new IndustriesDropdown({
|
||||
target: $target,
|
||||
verticalOffset: -10,
|
||||
horizontalOffset: $target.width() - 100,
|
||||
horizontalPosition: 'left',
|
||||
tick: 'center'
|
||||
});
|
||||
|
||||
view.render();
|
||||
|
||||
view.on('onDropdownHidden', function () {
|
||||
view.clean();
|
||||
}, this);
|
||||
|
||||
view.open();
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,24 @@
|
||||
var $ = require('jquery');
|
||||
var DropdownAdminView = require('dashboard/components/dropdown/dropdown-admin-view');
|
||||
var template = require('./dropdown.tpl');
|
||||
|
||||
/**
|
||||
* The content of the dropdown menu opened by the industries link in the header, e.g.:
|
||||
* CartoDB, Industries, Explore, Pricing
|
||||
* ______/\____
|
||||
* | |
|
||||
* | this |
|
||||
* |____________|
|
||||
*/
|
||||
module.exports = DropdownAdminView.extend({
|
||||
className: 'CDB-Text Dropdown Dropdown--public',
|
||||
|
||||
render: function () {
|
||||
this.$el.html(template());
|
||||
|
||||
// TODO: taken from existing code, how should dropdowns really be added to the DOM?
|
||||
$('body').append(this.el);
|
||||
|
||||
return this;
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,14 @@
|
||||
<ul class="SettingsDropdown CDB-Size-medium">
|
||||
<li class="SettingsDropdown-item SettingsDropdown-item--public">
|
||||
<p><a class="SettingsDropdown-itemLink SettingsDropdown-itemLink--public" href="https://carto.com/solutions/banking-and-finance/">Banking and Finance</a></p>
|
||||
<p><a class="SettingsDropdown-itemLink SettingsDropdown-itemLink--public" href="https://carto.com/solutions/business-intelligence-and-analytics/">BI and Analytics</a></p>
|
||||
<p><a class="SettingsDropdown-itemLink SettingsDropdown-itemLink--public" href="https://carto.com/solutions/government/">Government</a></p>
|
||||
<p><a class="SettingsDropdown-itemLink SettingsDropdown-itemLink--public" href="https://carto.com/solutions/real-estate/">Real Estate</a></p>
|
||||
<p><a class="SettingsDropdown-itemLink SettingsDropdown-itemLink--public" href="https://carto.com/solutions/web-mobile/">Web Development</a></p>
|
||||
<p><a class="SettingsDropdown-itemLink SettingsDropdown-itemLink--public" href="https://carto.com/solutions/journalism/">Journalism</a></p>
|
||||
<p><a class="SettingsDropdown-itemLink SettingsDropdown-itemLink--public" href="https://carto.com/solutions/natural-resources/">Natural Resources</a></p>
|
||||
<p><a class="SettingsDropdown-itemLink SettingsDropdown-itemLink--public" href="https://carto.com/solutions/earth-observation-and-space/">Earth Observation</a></p>
|
||||
<p><a class="SettingsDropdown-itemLink SettingsDropdown-itemLink--public" href="https://carto.com/solutions/non-profits/">Non-profits</a></p>
|
||||
<p><a class="SettingsDropdown-itemLink SettingsDropdown-itemLink--public" href="https://carto.com/solutions/education-and-research/">Education</a></p>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -0,0 +1,47 @@
|
||||
var $ = require('jquery');
|
||||
var CoreView = require('backbone/core-view');
|
||||
var SettingsDropdownView = require('./user-settings/dropdown-view');
|
||||
var userSettingsTemplate = require('./user-settings.tpl');
|
||||
|
||||
/**
|
||||
* View to render the user settings section in the header.
|
||||
* Expected to be created from existing DOM element.
|
||||
*/
|
||||
module.exports = CoreView.extend({
|
||||
|
||||
events: {
|
||||
'click .js-dropdown-target': '_createDropdown'
|
||||
},
|
||||
|
||||
render: function () {
|
||||
var dashboardUrl = this.model.viewUrl().dashboard();
|
||||
var datasetsUrl = dashboardUrl.datasets();
|
||||
var mapsUrl = dashboardUrl.maps();
|
||||
|
||||
this.$el.html(
|
||||
userSettingsTemplate({
|
||||
avatarUrl: this.model.get('avatar_url'),
|
||||
mapsUrl: mapsUrl,
|
||||
datasetsUrl: datasetsUrl
|
||||
})
|
||||
);
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
_createDropdown: function (event) {
|
||||
var view = new SettingsDropdownView({
|
||||
target: $(event.target),
|
||||
model: this.model, // user
|
||||
horizontalOffset: 18
|
||||
});
|
||||
view.render();
|
||||
|
||||
view.on('onDropdownHidden', function () {
|
||||
view.clean();
|
||||
}, this);
|
||||
|
||||
view.open();
|
||||
}
|
||||
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
<li class="Header-settingsItem u-hideOnTablet">
|
||||
<a href="<%- mapsUrl %>" class="Header-settingsLink Header-settingsLink--public">Maps</a>
|
||||
</li>
|
||||
|
||||
<li class="Header-settingsItem u-hideOnTablet">
|
||||
<a href="<%- datasetsUrl %>" class="Header-settingsLink Header-settingsLink--public">Datasets</a>
|
||||
</li>
|
||||
|
||||
<li class="Header-settingsItem Header-settingsItem--avatar">
|
||||
<button class="UserAvatar js-dropdown-target">
|
||||
<img src="<%- avatarUrl %>" class="UserAvatar-img UserAvatar-img--medium js-user-avatar-img" />
|
||||
</button>
|
||||
</li>
|
||||
@@ -0,0 +1,36 @@
|
||||
var $ = require('jquery');
|
||||
var template = require('./dropdown.tpl');
|
||||
var DropdownAdminView = require('dashboard/components/dropdown/dropdown-admin-view');
|
||||
|
||||
/**
|
||||
* The content of the dropdown menu opened by the user avatar in the top-right of the header, e.g.:
|
||||
* Explore, Learn, ♞
|
||||
* ______/\____
|
||||
* | |
|
||||
* | this |
|
||||
* |____________|
|
||||
*/
|
||||
|
||||
module.exports = DropdownAdminView.extend({
|
||||
className: 'CDB-Text Dropdown',
|
||||
|
||||
render: function () {
|
||||
var user = this.model;
|
||||
var userUrl = user.viewUrl();
|
||||
|
||||
this.$el.html(template({
|
||||
name: user.fullName() || user.get('username'),
|
||||
email: user.get('email'),
|
||||
isOrgOwner: user.isOrgOwner(),
|
||||
dashboardUrl: userUrl.dashboard(),
|
||||
publicProfileUrl: userUrl.publicProfile(),
|
||||
accountProfileUrl: userUrl.accountProfile(),
|
||||
logoutUrl: userUrl.logout()
|
||||
}));
|
||||
|
||||
// TODO: taken from existing code, how should dropdowns really be added to the DOM?
|
||||
$('body').append(this.el);
|
||||
|
||||
return this;
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,20 @@
|
||||
<ul class="SettingsDropdown">
|
||||
<li>
|
||||
<div class="SettingsDropdown-sameline">
|
||||
<p class="CDB-Text CDB-Size-medium"><%- name %></p>
|
||||
</div>
|
||||
<p class="CDB-Text CDB-Size-medium u-altTextColor u-tSpace u-ellipsis">
|
||||
<%- email %>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="BreadcrumbsDropdown-listItem is-dark CDB-Text CDB-Size-medium">
|
||||
<ul>
|
||||
<li class="u-bSpace--m"><a href="<%- dashboardUrl %>">Your dashboard</a></li>
|
||||
<li class="u-bSpace--m"><a href="<%- publicProfileUrl %>">Your public profile</a></li>
|
||||
<li class="u-bSpace--m"><a href="<%- accountProfileUrl %>">Account settings</a></li>
|
||||
<li><a href="<%- logoutUrl %>">Close session</a></li>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
Reference in New Issue
Block a user