Skip to content

GitLab

Commit 766c6f0a authored by Jonne Haß's avatar Jonne Haß
Browse files
Options

Merge pull request #4678 from svbergerem/port-publisher-bootstrap 

Port publisher and bookmarklet to bootstrap
parents 7fbf5081 0241d9c7
Hide whitespace changes
Inline Side-by-side
Showing with 1311 additions and 428 deletions
Changelog.md
View file @ 766c6f0a
......@@ -12,6 +12,7 @@
* Update forgot_password and reset_password pages [#4707](https://github.com/diaspora/diaspora/pull/4707)
* Change jQuery CDN to jquery.com from googleapis.com [#4765](https://github.com/diaspora/diaspora/pull/4765)
* Update to jQuery 10
* Port publisher and bookmarklet to Bootstrap [#4678](https://github.com/diaspora/diaspora/pull/4678)
## Bug fixes
* Improve time agos by updating the plugin [#4280](https://github.com/diaspora/diaspora/issues/4280)
......
app/assets/javascripts/app/views/aspects_dropdown_view.js 0 → 100644
View file @ 766c6f0a
/*
* Aspects view for the publishers aspect dropdown and the aspect membership dropdown.
*/
app.views.AspectsDropdown = app.views.Base.extend({
_toggleCheckbox: function(target) {
this.$('.dropdown-menu > li.radio').removeClass('selected');
target.toggleClass('selected');
},
_toggleRadio: function(target) {
this.$('.dropdown-menu > li').removeClass('selected');
target.toggleClass('selected');
},
// select aspects in the dropdown by a given list of ids
_selectAspects: function(ids) {
this.$('.dropdown-menu > li').each(function(){
var el = $(this);
if(_.contains(ids, el.data('aspect_id'))){
el.addClass('selected');
}
else {
el.removeClass('selected');
}
});
},
// change class and text of the dropdown button
_updateButton: function(inAspectClass) {
var button = this.$('.btn.dropdown-toggle'),
selectedAspects = this.$(".dropdown-menu > li.selected").length,
buttonText;
if(selectedAspects == 0){
button.removeClass(inAspectClass).addClass('btn-default');
buttonText = Diaspora.I18n.t("aspect_dropdown.select_aspects");
}
else{
button.removeClass('btn-default').addClass(inAspectClass);
if(selectedAspects == 1){
buttonText = this.$(".dropdown-menu > li.selected .text").first().text();
}
else{
buttonText = Diaspora.I18n.t("aspect_dropdown.toggle", { count: selectedAspects.toString() });
}
}
button.find('.text').text(buttonText);
}
});
app/assets/javascripts/app/views/location_view.js
View file @ 766c6f0a
......@@ -16,7 +16,7 @@ app.views.Location = Backbone.View.extend({
locator = new OSM.Locator();
locator.getAddress(function(address, latlng){
$(element).html('<input id="location_address" value="' + address + '"/>');
$(element).html('<input id="location_address" type="text" class="input-block-level" value="' + address + '"/>');
$('#location_coords').val(latlng.latitude + "," + latlng.longitude);
$(element).append('<a id="hide_location"><img alt="delete location" src="/assets/deletelabel.png"></a>');
});
......
app/assets/javascripts/app/views/publisher/aspect_selector_blueprint_view.js 0 → 100644
View file @ 766c6f0a
/* Copyright (c) 2010-2012, Diaspora Inc. This file is
* licensed under the Affero General Public License version 3 or later. See
* the COPYRIGHT file.
*/
// Aspects view for the publisher.
// Provides the ability to specify the visibility of posted content as public
// or limited to selected aspects
app.views.PublisherAspectSelectorBlueprint = Backbone.View.extend({
events: {
"click .dropdown_list > li": "toggleAspect"
},
initialize: function(opts) {
this.form = opts.form;
},
// event handler for aspect selection
toggleAspect: function(evt) {
var el = $(evt.target);
var btn = el.parent('.dropdown').find('.button');
// visually toggle the aspect selection
if( el.is('.radio') ) {
AspectsDropdown.toggleRadio(el);
} else {
AspectsDropdown.toggleCheckbox(el);
}
// update the selection summary
this._updateAspectsNumber(el);
this._updateSelectedAspectIds();
},
// select a (list of) aspects in the dropdown selector by the given list of ids
updateAspectsSelector: function(ids){
var el = this.$("ul.dropdown_list");
this.$('.dropdown_list > li').each(function(){
var el = $(this);
var aspectId = el.data('aspect_id');
if (_.contains(ids, aspectId)) {
el.addClass('selected');
}
else {
el.removeClass('selected');
}
});
this._updateAspectsNumber(el);
this._updateSelectedAspectIds();
},
// take care of the form fields that will indicate the selected aspects
_updateSelectedAspectIds: function() {
var self = this;
// remove previous selection
this.form.find('input[name="aspect_ids[]"]').remove();
// create fields for current selection
this.$('.dropdown_list li.selected').each(function() {
var el = $(this);
var aspectId = el.data('aspect_id');
self._addHiddenAspectInput(aspectId);
// close the dropdown when a radio item was selected
if( el.is('.radio') ) {
el.closest('.dropdown').removeClass('active');
}
});
},
_updateAspectsNumber: function(el){
AspectsDropdown.updateNumber(
el.closest(".dropdown_list"),
null,
el.parent().find('li.selected').length,
''
);
},
_addHiddenAspectInput: function(id) {
var uid = _.uniqueId('aspect_ids_');
this.form.append(
'<input id="'+uid+'" name="aspect_ids[]" type="hidden" value="'+id+'">'
);
}
});
app/assets/javascripts/app/views/publisher/aspect_selector_view.js
View file @ 766c6f0a
/* Copyright (c) 2010-2012, Diaspora Inc. This file is
* licensed under the Affero General Public License version 3 or later. See
* the COPYRIGHT file.
*/
// require ../aspects_dropdown_view
// Aspects view for the publisher.
// Provides the ability to specify the visibility of posted content as public
// or limited to selected aspects
app.views.PublisherAspectSelector = Backbone.View.extend({
/*
* Aspects view for the publisher.
* Provides the ability to specify the visibility of posted content as public
* or limited to selected aspects
*/
app.views.PublisherAspectSelector = app.views.AspectsDropdown.extend({
events: {
"click .dropdown_list > li": "toggleAspect"
"click .dropdown-menu > li": "toggleAspect"
},
initialize: function(opts) {
......@@ -18,38 +17,27 @@ app.views.PublisherAspectSelector = Backbone.View.extend({
// event handler for aspect selection
toggleAspect: function(evt) {
var el = $(evt.target);
var btn = el.parent('.dropdown').find('.button');
var target = $(evt.target).closest('li');
// visually toggle the aspect selection
if( el.is('.radio') ) {
AspectsDropdown.toggleRadio(el);
} else {
AspectsDropdown.toggleCheckbox(el);
if( target.is('.radio') ) {
this._toggleRadio(target);
}
else if( target.is('.aspect_selector') ) {
// don't close the dropdown
evt.stopPropagation();
this._toggleCheckbox(target);
}
// update the selection summary
this._updateAspectsNumber(el);
this._updateSelectedAspectIds();
this._updateButton('btn-default');
},
// select a (list of) aspects in the dropdown selector by the given list of ids
updateAspectsSelector: function(ids){
var el = this.$("ul.dropdown_list");
this.$('.dropdown_list > li').each(function(){
var el = $(this);
var aspectId = el.data('aspect_id');
if (_.contains(ids, aspectId)) {
el.addClass('selected');
}
else {
el.removeClass('selected');
}
});
this._updateAspectsNumber(el);
this._selectAspects(ids);
this._updateSelectedAspectIds();
this._updateButton('btn-default');
},
// take care of the form fields that will indicate the selected aspects
......@@ -60,32 +48,12 @@ app.views.PublisherAspectSelector = Backbone.View.extend({
this.form.find('input[name="aspect_ids[]"]').remove();
// create fields for current selection
this.$('.dropdown_list li.selected').each(function() {
var el = $(this);
var aspectId = el.data('aspect_id');
self._addHiddenAspectInput(aspectId);
// close the dropdown when a radio item was selected
if( el.is('.radio') ) {
el.closest('.dropdown').removeClass('active');
}
this.$('li.selected').each(function() {
var uid = _.uniqueId('aspect_ids_');
var id = $(this).data('aspect_id');
self.form.append(
'<input id="'+uid+'" name="aspect_ids[]" type="hidden" value="'+id+'">'
);
});
},
_updateAspectsNumber: function(el){
AspectsDropdown.updateNumber(
el.closest(".dropdown_list"),
null,
el.parent().find('li.selected').length,
''
);
},
_addHiddenAspectInput: function(id) {
var uid = _.uniqueId('aspect_ids_');
this.form.append(
'<input id="'+uid+'" name="aspect_ids[]" type="hidden" value="'+id+'">'
);
}
});
app/assets/javascripts/app/views/publisher/services_view.js
View file @ 766c6f0a
......@@ -23,7 +23,7 @@ app.views.PublisherServices = Backbone.View.extend({
// visually toggle the icon and handle all other actions for cross-posting
toggleService: function(evt) {
var el = $(evt.target);
var el = $(evt.target).closest('.service_icon');
var provider = el.attr('id');
el.toggleClass("dim");
......
app/assets/javascripts/app/views/publisher/uploader_view.js
View file @ 766c6f0a
......@@ -41,6 +41,9 @@ app.views.PublisherUploader = Backbone.View.extend({
progressHandler: function(id, fileName, loaded, total) {
var progress = Math.round(loaded / total * 100);
this.el_info.text(fileName + ' ' + progress + '%').fadeTo(200, 1);
this.publisher.el_photozone
.find('li.loading').first().find('.bar')
.width(progress + '%');
},
submitHandler: function(id, fileName) {
......@@ -56,7 +59,8 @@ app.views.PublisherUploader = Backbone.View.extend({
publisher.el_wrapper.addClass('with_attachments');
publisher.el_photozone.append(
'<li class="publisher_photo loading" style="position:relative;">' +
' <img src="'+Handlebars.helpers.imageUrl('ajax-loader2.gif')+'" alt="" />'+
' <div class="progress progress-striped active"><div class="bar"></div></div>' +
' <img src="'+Handlebars.helpers.imageUrl('ajax-loader2.gif')+'" class="ajax-loader" alt="" />'+
'</li>'
);
},
......@@ -74,6 +78,11 @@ app.views.PublisherUploader = Backbone.View.extend({
this._cancelPhotoUpload();
this.trigger('change');
this.el_info.text(Diaspora.I18n.t('photo_uploader.error', {file: fileName}));
this.publisher.el_wrapper.find('#photodropzone_container').first().after(
'<div id="upload_error">' +
Diaspora.I18n.t('photo_uploader.error', {file: fileName}) +
'</div>'
);
}
},
......@@ -91,11 +100,13 @@ app.views.PublisherUploader = Backbone.View.extend({
var placeholder = publisher.el_photozone.find('li.loading').first();
placeholder
.removeClass('loading')
.append(
'<div class="x">X</div>'+
.prepend(
'<div class="x"></div>'+
'<div class="circle"></div>'
)
.find('img').attr({'src': url, 'data-id': id});
.find('img').attr({'src': url, 'data-id': id}).removeClass('ajax-loader');
placeholder
.find('div.progress').remove();
// no more placeholders? enable buttons
if( publisher.el_photozone.find('li.loading').length == 0 ) {
......
app/assets/javascripts/app/views/publisher_view.js
View file @ 766c6f0a
......@@ -5,6 +5,7 @@
//= require ./publisher/services_view
//= require ./publisher/aspect_selector_view
//= require ./publisher/aspect_selector_blueprint_view
//= require ./publisher/getting_started_view
//= require ./publisher/uploader_view
//= require jquery.textchange
......@@ -18,6 +19,7 @@ app.views.Publisher = Backbone.View.extend({
"focus textarea" : "open",
"click #hide_publisher" : "clear",
"submit form" : "createStatusMessage",
"click #submit" : "createStatusMessage",
"click .post_preview_button" : "createPostPreview",
"textchange #status_message_fake_text": "handleTextchange",
"click #locator" : "showLocation",
......@@ -32,7 +34,7 @@ app.views.Publisher = Backbone.View.extend({
this.el_input = this.$('#status_message_fake_text');
this.el_hiddenInput = this.$('#status_message_text');
this.el_wrapper = this.$('#publisher_textarea_wrapper');
this.el_submit = this.$('input[type=submit]');
this.el_submit = this.$('input[type=submit], button#submit');
this.el_preview = this.$('button.post_preview_button');
this.el_photozone = this.$('#photodropzone');
......@@ -81,6 +83,11 @@ app.views.Publisher = Backbone.View.extend({
});
this.view_aspect_selector = new app.views.PublisherAspectSelector({
el: this.$('.public_toggle .aspect_dropdown'),
form: form
});
this.view_aspect_selector_blueprint = new app.views.PublisherAspectSelectorBlueprint({
el: this.$('.public_toggle > .dropdown'),
form: form
});
......@@ -102,6 +109,7 @@ app.views.Publisher = Backbone.View.extend({
// set the selected aspects in the dropdown by their ids
setSelectedAspects: function(ids) {
this.view_aspect_selector.updateAspectsSelector(ids);
this.view_aspect_selector_blueprint.updateAspectsSelector(ids);
},
// show the "getting started" popups around the publisher
......@@ -148,7 +156,8 @@ app.views.Publisher = Backbone.View.extend({
// creates the location
showLocation: function(){
if($('#location').length == 0){
$('#publisher_textarea_wrapper').after('<div id="location"></div>');
$('#location_container').append('<div id="location"></div>');
this.el_wrapper.addClass('with_location');
this.view_locator = new app.views.Location();
}
},
......@@ -157,6 +166,7 @@ app.views.Publisher = Backbone.View.extend({
destroyLocation: function(){
if(this.view_locator){
this.view_locator.remove();
this.el_wrapper.removeClass('with_location');
delete this.view_locator;
}
},
......
app/assets/stylesheets/application.css.sass
View file @ 766c6f0a
......@@ -12,7 +12,7 @@
@import 'opengraph'
@import 'help'
@import 'profile'
@import 'publisher'
@import 'publisher_blueprint'
@import 'facebox'
@import 'aspects'
@import 'popover'
......
app/assets/stylesheets/aspects.css.scss
View file @ 766c6f0a
.aspect_dropdown {
li {
.status_indicator {
width: 19px;
height: 14px;
display: inline-block;
}
.icon-ok, .icon-refresh {
padding-right: 5px;
display: none;
}
&.selected {
.icon-ok { display: inline-block;}
.icon-refresh { display: none;}
}
&.loading {
.icon-refresh { display: inline-block;}
.icon-ok { display: none;}
}
a { cursor: pointer; }
}
}
/* -- Used in contacts/index.html.haml -- */
#aspect_controls {
......
app/assets/stylesheets/bookmarklet.css.scss 0 → 100644
View file @ 766c6f0a
#bookmarklet { padding:10px 10px 30px 10px; margin-top: 0; }
app/assets/stylesheets/buttons.css.scss 0 → 100644
View file @ 766c6f0a
.btn.creation {
$button-border-color: #aaa;
@include button-gradient($creation-blue);
color: #fff;
border: 1px solid darken($button-border-color,20%);
&:hover {
@include button-gradient-hover($creation-blue);
background: $creation-blue;
border: 1px solid darken($button-border-color,35%);
}
}
app/assets/stylesheets/entypo.css.scss
View file @ 766c6f0a
......@@ -3,30 +3,6 @@
font-style: normal;
color: black;
&.heart:before {
content: '\2665';
}
&.heart-empty:before {
content: '\2661';
}
&.retweet:before {
content: '\e717';
}
&.comment:before {
content: '\e718';
}
&.globe:before {
content: '\1f30e';
}
&.lock:before {
content: '\1f512';
}
&.red {
color: #A40802;
}
......@@ -51,4 +27,296 @@
&.small {
font-size: 1.2em;
}
/* main icon map */
&.add-to-list:before { content: '\e003'; } /* e003 */
&.add-user:before { content: '\e700'; } /* e700 */
&.address:before { content: '\e723'; } /* e723 */
&.adjust:before { content: '\25d1'; } /* 25d1 */
&.air:before { content: '\e753'; } /* e753 */
&.airplane:before { content: '\2708'; } /* 2708 */
&.archive:before { content: '\e738'; } /* e738 */
&.area-graph:before { content: '\1f53e'; } /* 1f53e */
&.arrow-combo:before { content: '\e74f'; } /* e74f */
&.attach:before { content: '\1f4ce'; } /* 1f4ce */
&.back-in-time:before { content: '\e771'; } /* e771 */
&.back:before { content: '\1f519'; } /* 1f519 */
&.bag:before { content: '\1f45c'; } /* 1f45c */
&.bar-graph:before { content: '\1f4ca '; } /* 1f4ca */
&.battery:before { content: '\1f50b'; } /* 1f50b */
&.beamed-note:before { content: '\266b'; } /* 266b */
&.bell:before { content: '\1f514'; } /* 1f514 */
&.block:before { content: '\1f6ab'; } /* 1f6ab */
&.book:before { content: '\1f4d5 '; } /* 1f4d5 */
&.bookmark:before { content: '\1f516'; } /* 1f516 */
&.bookmarks:before { content: '\1f4d1'; } /* 1f4d1 */
&.box:before { content: '\1f4e6'; } /* 1f4e6 */
&.briefcase:before { content: '\1f4bc'; } /* 1f4bc */
&.browser:before { content: '\e74e'; } /* e74e */
&.brush:before { content: '\e79a'; } /* e79a */
&.bucket:before { content: '\e756'; } /* e756 */
&.calendar:before { content: '\1f4c5'; } /* 1f4c5 */
&.camera:before { content: '\1f4f7'; } /* 1f4f7 */
&.cart:before { content: '\e73d'; } /* e73d */
&.cc-by:before { content: '\e7a6'; } /* e7a6 */
&.cc-nc-eu:before { content: '\e7a8'; } /* e7a8 */
&.cc-nc-jp:before { content: '\e7a9'; } /* e7a9 */
&.cc-nc:before { content: '\e7a7'; } /* e7a7 */
&.cc-nd:before { content: '\e7ab'; } /* e7ab */
&.cc-pd:before { content: '\e7ac'; } /* e7ac */
&.cc-remix:before { content: '\e7af'; } /* e7af */
&.cc-sa:before { content: '\e7aa'; } /* e7aa */
&.cc-share:before { content: '\e7ae'; } /* e7ae */
&.cc-zero:before { content: '\e7ad'; } /* e7ad */
&.cc:before { content: '\e7a5'; } /* e7a5 */
&.ccw:before { content: '\27f2'; } /* 27f2 */
&.cd:before { content: '\1f4bf'; } /* 1f4bf */
&.chat:before { content: '\e720'; } /* e720 */
&.check:before { content: '\2713'; } /* 2713 */
&.chevron-down:before { content: '\e75c'; } /* e75c */
&.chevron-left:before { content: '\e75d'; } /* e75d */
&.chevron-right:before { content: '\e75e'; } /* e75e */
&.chevron-small-down:before { content: '\e760'; } /* e760 */
&.chevron-small-left:before { content: '\e761'; } /* e761 */
&.chevron-small-right:before { content: '\e762'; } /* e762 */
&.chevron-small-up:before { content: '\e763'; } /* e763 */
&.chevron-thin-down:before { content: '\e764'; } /* e764 */
&.chevron-thin-left:before { content: '\e765'; } /* e765 */
&.chevron-thin-right:before { content: '\e766'; } /* e766 */
&.chevron-thin-up:before { content: '\e767'; } /* e767 */
&.chevron-up:before { content: '\e75f'; } /* e75f */
&.circled-cross:before { content: '\2716'; } /* 2716 */
&.circled-down:before { content: '\e758'; } /* e758 */
&.circled-help:before { content: '\e704'; } /* e704 */
&.circled-info:before { content: '\e705'; } /* e705 */
&.circled-left:before { content: '\e759'; } /* e759 */
&.circled-minus:before { content: '\2796'; } /* 2796 */
&.circled-plus:before { content: '\2795'; } /* 2795 */
&.circled-right:before { content: '\e75a'; } /* e75a */
&.circled-up:before { content: '\e75b'; } /* e75b */
&.clipboard:before { content: '\1f4cb'; } /* 1f4cb */
&.clock:before { content: '\1f554'; } /* 1f554 */
&.cloud:before { content: '\2601'; } /* 2601 */
&.code:before { content: '\e714'; } /* e714 */
&.cog:before { content: '\2699'; } /* 2699 */
&.comment:before { content: '\e718'; } /* e718 */
&.compass:before { content: '\e728'; } /* e728 */
&.credit-card:before { content: '\1f4b3'; } /* 1f4b3 */
&.cross-hair:before { content: '\1f3af'; } /* 1f3af */
&.cross:before { content: '\2715'; } /* 2715 */
&.cup:before { content: '\2615'; } /* 2615 */
&.cw:before { content: '\27f3'; } /* 27f3 */
&.cycle:before { content: '\1f504'; } /* 1f504 */
&.database:before { content: '\e754'; } /* e754 */
&.db-logo:before { content: '\f603'; } /* f603 */
&.db-shape:before { content: '\f600'; } /* f600 */
&.direction:before { content: '\27a2'; } /* 27a2 */
&.doc:before { content: '\e730'; } /* e730 */
&.docs:before { content: '\e736'; } /* e736 */
&.dot:before { content: '\e78b'; } /* e78b */
&.down-1:before { content: '\2b07'; } /* 2b07 */
&.down-bold:before { content: '\e4b0'; } /* e4b0 */
&.down-thin:before { content: '\2193'; } /* 2193 */