nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #4982 from Flaburgan/add-icon-in-dropdown-aspect

Browse source 
Add visibility icons in publisher dropdown aspect
This commit is contained in:
Jonne Haß 2014-08-27 09:50:09 +02:00
commit 8867023592
9 changed files with 104 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Changelog.md
View file

@ -26,6 +26,7 @@ The default for including jQuery from a CDN has changed. If you want to continue
* Remember whether a AccountDeletion was performed [#5156](https://github.com/diaspora/diaspora/pull/5156)
* Increased the number of notifications shown in drop down bar to 15 [#5129](https://github.com/diaspora/diaspora/pull/5129)
* Increase possible captcha length [#5169](https://github.com/diaspora/diaspora/pull/5169)
* Display visibility icon in publisher aspects dropdown [#4982](https://github.com/diaspora/diaspora/pull/4982)
# 0.4.1.0

17
app/assets/javascripts/app/views/aspects_dropdown_view.js
View file

@ -14,12 +14,11 @@ app.views.AspectsDropdown = app.views.Base.extend({
// select aspects in the dropdown by a given list of ids
_selectAspects: function(ids) {
this.$('.dropdown-menu > li').each(function(){
this.$('.dropdown-menu > li').each(function() {
var el = $(this);
if(_.contains(ids, el.data('aspect_id'))){
if (_.contains(ids, el.data('aspect_id'))) {
el.addClass('selected');
}
else {
} else {
el.removeClass('selected');
}
});
@ -31,16 +30,14 @@ app.views.AspectsDropdown = app.views.Base.extend({
selectedAspects = this.$(".dropdown-menu > li.selected").length,
buttonText;
if(selectedAspects == 0){
if (selectedAspects == 0) {
button.removeClass(inAspectClass).addClass('btn-default');
buttonText = Diaspora.I18n.t("aspect_dropdown.select_aspects");
}
else{
} else {
button.removeClass('btn-default').addClass(inAspectClass);
if(selectedAspects == 1){
if (selectedAspects == 1) {
buttonText = this.$(".dropdown-menu > li.selected .text").first().text();
}
else{
} else {
buttonText = Diaspora.I18n.t("aspect_dropdown.toggle", { count: selectedAspects.toString() });
}
}

1
app/assets/javascripts/app/views/publisher/aspect_selector_blueprint_view.js
View file

@ -30,7 +30,6 @@ app.views.PublisherAspectSelectorBlueprint = Backbone.View.extend({
// update the selection summary
this._updateAspectsNumber(el);
this._updateSelectedAspectIds();
},

15
app/assets/javascripts/app/views/publisher/aspect_selector_view.js
View file

@ -20,10 +20,9 @@ app.views.PublisherAspectSelector = app.views.AspectsDropdown.extend({
var target = $(evt.target).closest('li');
// visually toggle the aspect selection
if( target.is('.radio') ) {
if (target.is('.radio')) {
this._toggleRadio(target);
}
else if( target.is('.aspect_selector') ) {
} else if (target.is('.aspect_selector')) {
// don't close the dropdown
evt.stopPropagation();
this._toggleCheckbox(target);
@ -31,6 +30,16 @@ app.views.PublisherAspectSelector = app.views.AspectsDropdown.extend({
this._updateSelectedAspectIds();
this._updateButton('btn-default');
// update the globe or lock icon
var icon = this.$('#visibility-icon');
if (target.find('.text').text().trim() == Diaspora.I18n.t('stream.public')) {
icon.removeClass('lock');
icon.addClass('globe');
} else {
icon.removeClass('globe');
icon.addClass('lock');
}
},
// select a (list of) aspects in the dropdown selector by the given list of ids

28
app/assets/javascripts/aspects-dropdown.js
View file

@ -7,11 +7,12 @@ var AspectsDropdown = {
var button = dropdown.parents(".dropdown").children('.button.toggle'),
selectedAspects = dropdown.children(".selected").length,
allAspects = dropdown.children().length,
replacement;
replacement,
isInPublisher = dropdown.closest('#publisher').length;
if (number == 0) {
button.removeClass(inAspectClass);
if( dropdown.closest('#publisher').length ) {
if (isInPublisher) {
replacement = Diaspora.I18n.t("aspect_dropdown.select_aspects");
} else {
replacement = Diaspora.I18n.t("aspect_dropdown.add_to_aspect");
@ -19,21 +20,34 @@ var AspectsDropdown = {
var message = Diaspora.I18n.t("aspect_dropdown.stopped_sharing_with", {name: dropdown.data('person-short-name')});
Diaspora.page.flashMessages.render({success: true, notice: message});
}
}else if (selectedAspects == allAspects) {
} else if (selectedAspects == allAspects) {
replacement = Diaspora.I18n.t('aspect_dropdown.all_aspects');
}else if (number == 1) {
} else if (number == 1) {
button.addClass(inAspectClass);
replacement = dropdown.find(".selected").first().text();
/* flash message prompt */
if( dropdown.closest('#publisher').length == 0 ) {
if (!isInPublisher) {
var message = Diaspora.I18n.t("aspect_dropdown.started_sharing_with", {name: dropdown.data('person-short-name')});
Diaspora.page.flashMessages.render({success: true, notice: message});
}
}else {
} else {
replacement = Diaspora.I18n.t('aspect_dropdown.toggle', { count: number.toString()})
}
button.text(replacement + ' ▼');
// if we are in the publisher, we add the visibility icon
if (isInPublisher) {
var icon = $('#visibility-icon');
if (replacement.trim() == Diaspora.I18n.t('stream.public')) {
icon.removeClass('lock');
icon.addClass('globe');
} else {
icon.removeClass('globe');
icon.addClass('lock');
}
button.find('.text').text(replacement);
} else {
button.text(replacement + ' ▼');
}
},
toggleCheckbox: function(check) {

1
app/assets/stylesheets/publisher_blueprint.css.scss
View file

@ -64,6 +64,7 @@
.public_toggle {
text-align: right;
.dropdown {
text-align: left;
}

20
app/views/publisher/_aspect_dropdown.html.haml
View file

@ -1,14 +1,18 @@
.btn-group.aspect_dropdown
%button.btn.btn-default.dropdown-toggle{ ! current_user.getting_started? ? {'data-toggle' => 'dropdown'} : {'data-toggle' => 'dropdown', :title => popover_with_close_html("2. #{t('shared.public_explain.control_your_audience')}"), 'data-content'=> t('shared.public_explain.visibility_dropdown')} }
%span.text
- if publisher_public
- if publisher_public
%i#visibility-icon.entypo.small.globe
%span.text
= t('public')
- elsif all_aspects_selected?(selected_aspects)
= t('all_aspects')
- elsif selected_aspects.size == 1
= selected_aspects.first.name
- else
= t('shared.aspect_dropdown.toggle', :count => selected_aspects.size)
- else
%i#visibility-icon.entypo.small.lock
%span.text
- if all_aspects_selected?(selected_aspects)
= t('all_aspects')
- elsif selected_aspects.size == 1
= selected_aspects.first.name
- else
= t('shared.aspect_dropdown.toggle', count: selected_aspects.size)
%span.caret
%ul.dropdown-menu.pull-right{ :unSelectable => 'on' }

17
app/views/publisher/_publisher_blueprint.html.haml
View file

@ -66,13 +66,18 @@
.dropdown{ ! current_user.getting_started? ? {:class => "hang_right"} : { :class => "hang_right", :title => popover_with_close_html("2. #{t('shared.public_explain.control_your_audience')}"), 'data-content'=> t('shared.public_explain.visibility_dropdown')} }
.button.toggle.publisher
- if publisher_public
= t('public')
- elsif all_aspects_selected?(selected_aspects)
= t('all_aspects')
- elsif selected_aspects.size == 1
= selected_aspects.first.name
%i#visibility-icon.entypo.small.globe
%span.text
= t('public')
- else
= t('shared.aspect_dropdown.toggle', :count => selected_aspects.size)
%i#visibility-icon.entypo.small.lock
%span.text
- if all_aspects_selected?(selected_aspects)
= t('all_aspects')
- elsif selected_aspects.size == 1
= selected_aspects.first.name
- else
= t('shared.aspect_dropdown.toggle', :count => selected_aspects.size)
▼
.wrapper

44
spec/javascripts/app/views/publisher_view_spec.js
View file

@ -6,7 +6,7 @@
describe("app.views.Publisher", function() {
describe("standalone", function() {
beforeEach(function() {
// should be jasmine helper
// TODO should be jasmine helper
loginAs({name: "alice", avatar : {small : "http://avatar.com/photo.jpg"}});
spec.loadFixture("aspects_index");
@ -26,7 +26,7 @@ describe("app.views.Publisher", function() {
context("plain publisher", function() {
beforeEach(function() {
// should be jasmine helper
// TODO should be jasmine helper
loginAs({name: "alice", avatar : {small : "http://avatar.com/photo.jpg"}});
spec.loadFixture("aspects_index");
@ -245,9 +245,11 @@ describe("app.views.Publisher", function() {
context("aspect selection", function(){
beforeEach( function(){
spec.loadFixture('status_message_new');
Diaspora.I18n.load({ stream: { public: 'Public' }});
this.radio_els = $('#publisher .dropdown li.radio');
this.check_els = $('#publisher .dropdown li.aspect_selector');
this.visibility_icon = $('#visibility-icon');
this.view = new app.views.Publisher();
this.view.open();
@ -260,17 +262,50 @@ describe("app.views.Publisher", function() {
_.each(this.check_els, function(el){
expect($(el).hasClass('selected')).toBeFalsy();
});
expect(this.visibility_icon.hasClass('globe')).toBeFalsy();
expect(this.visibility_icon.hasClass('lock')).toBeTruthy();
});
it("toggles the selected entry visually", function(){
// click on the last aspect
this.check_els.last().trigger('click');
// public and "all aspects" are deselected
_.each(this.radio_els, function(el){
expect($(el).hasClass('selected')).toBeFalsy();
});
// the first aspect is not selected
expect(this.check_els.first().hasClass('selected')).toBeFalsy();
// the last aspect is selected
expect(this.check_els.last().hasClass('selected')).toBeTruthy();
// visibility icon is set to the lock icon
expect(this.visibility_icon.hasClass('globe')).toBeFalsy();
expect(this.visibility_icon.hasClass('lock')).toBeTruthy();
// click on public
this.radio_els.first().trigger('click');
// public is selected, "all aspects" is deselected
expect(this.radio_els.first().hasClass('selected')).toBeTruthy();
expect(this.radio_els.last().hasClass('selected')).toBeFalsy();
// the aspects are deselected
_.each(this.check_els, function(el){
expect($(el).hasClass('selected')).toBeFalsy();
});
// visibility icon is set to the globe icon
expect(this.visibility_icon.hasClass('globe')).toBeTruthy();
expect(this.visibility_icon.hasClass('lock')).toBeFalsy();
// click on "all aspects"
this.radio_els.last().trigger('click');
// public is deselected, "all aspects" is selected
expect(this.radio_els.first().hasClass('selected')).toBeFalsy();
expect(this.radio_els.last().hasClass('selected')).toBeTruthy();
// the aspects are deselected
_.each(this.check_els, function(el){
expect($(el).hasClass('selected')).toBeFalsy();
});
// visibility icon is set to the lock icon
expect(this.visibility_icon.hasClass('globe')).toBeFalsy();
expect(this.visibility_icon.hasClass('lock')).toBeTruthy();
});
describe("hidden form elements", function(){
@ -312,7 +347,6 @@ describe("app.views.Publisher", function() {
expect(this.view.$('input[name="aspect_ids[]"][value="99"]').length).toBe(1);
});
});
});
context("locator", function() {