Commit 432f99e0 authored by Jonne Haß's avatar Jonne Haß

Merge pull request #6055 from jhass/bootstrap3

Port to Bootstrap3 (rebased)
parents e39d024b f3938a17
......@@ -22,6 +22,7 @@ Ruby 2.0 is no longer officially supported.
## Refactor
* Improve bookmarklet [#5904](https://github.com/diaspora/diaspora/pull/5904)
* Update listen configuration to listen on unix sockets by default [#5974](https://github.com/diaspora/diaspora/pull/5974)
* Port to Bootstrap 3 [#6015](https://github.com/diaspora/diaspora/pull/6015)
## Bug fixes
* Destroy Participation when removing interactions with a post [#5852](https://github.com/diaspora/diaspora/pull/5852)
......
......@@ -53,7 +53,7 @@ gem "rack-cors", "0.4.0", require: "rack/cors"
# CSS
gem "bootstrap-sass", "2.3.2.2"
gem "bootstrap-sass", "3.3.4.1"
gem "compass-rails", "2.0.4"
gem "sass-rails", "5.0.1"
gem "autoprefixer-rails", "5.1.11"
......
......@@ -70,8 +70,9 @@ GEM
jquery-rails
railties
bcrypt (3.1.10)
bootstrap-sass (2.3.2.2)
sass (~> 3.2)
bootstrap-sass (3.3.4.1)
autoprefixer-rails (>= 5.0.0.1)
sass (>= 3.2.19)
builder (3.2.2)
byebug (4.0.5)
columnize (= 0.9.0)
......@@ -629,7 +630,7 @@ GEM
ruby-progressbar (1.7.5)
rubyzip (1.1.7)
safe_yaml (1.0.4)
sass (3.4.13)
sass (3.4.14)
sass-rails (5.0.1)
railties (>= 4.0.0, < 5.0)
sass (~> 3.1)
......@@ -735,7 +736,7 @@ DEPENDENCIES
asset_sync (= 1.1.0)
autoprefixer-rails (= 5.1.11)
backbone-on-rails (= 1.1.2.1)
bootstrap-sass (= 2.3.2.2)
bootstrap-sass (= 3.3.4.1)
capybara (= 2.4.4)
carrierwave (= 0.10.0)
compass-rails (= 2.0.4)
......
......@@ -127,7 +127,7 @@ var app = {
$("a.disabled").click(function(event) {
event.preventDefault();
});
},
}
};
$(function() {
......
......@@ -60,11 +60,8 @@ Handlebars.registerHelper('sharingMessage', function(person) {
// allow hovercards for users that are not the current user.
// returns the html class name used to trigger hovercards.
Handlebars.registerHelper('hovercardable', function(person) {
if( app.currentUser.get('guid') !== person.guid ) {
return 'hovercardable';
}
return '';
Handlebars.registerHelper("hovercardable", function(person) {
return app.currentUser.get("guid") === person.guid ? "" : "hovercardable";
});
Handlebars.registerHelper('personImage', function(person, size, imageClass) {
......@@ -78,10 +75,11 @@ Handlebars.registerHelper('personImage', function(person, size, imageClass) {
size = ( !_.isString(size) ) ? "small" : size;
imageClass = ( !_.isString(imageClass) ) ? size : imageClass;
return _.template('<img src="<%= src %>" class="avatar <%= img_class %>" title="<%= title %>" alt="<%= title %>" />')({
'src': avatar[size],
'img_class': imageClass,
'title': _.escape(name)
return _.template("<img src=\"<%= src %>\" class=\"<%= imageClass %>\" " +
"title=\"<%= title %>\" alt=\"<%= title %>\" />")({
src: avatar[size],
imageClass: imageClass + " avatar img-responsive center-block",
title: _.escape(name)
});
});
......
(function(){
app.helpers.showModal = function(id){
$(id).modal();
var modalBody = $(id).find(".modal-body");
var url = $(id).attr("href");
modalBody.load(url, function(){
$(id).find("#modalWaiter").remove();
});
};
})();
......@@ -78,8 +78,8 @@ app.pages.Contacts = Backbone.View.extend({
},
setupAspectSorting: function() {
$("#aspect_nav .nav").sortable({
items: "li.aspect[data-aspect-id]",
$("#aspect_nav .list-group").sortable({
items: "a.aspect[data-aspect-id]",
update: function() {
$("#aspect_nav .ui-sortable").removeClass("synced");
var data = JSON.stringify({ ordered_aspect_ids: $(this).sortable("toArray", { attribute: "data-aspect-id" }) });
......
......@@ -48,11 +48,11 @@ app.Router = Backbone.Router.extend({
contacts: function() {
app.aspect = new app.models.Aspect(gon.preloads.aspect);
app.contacts = new app.collections.Contacts(app.parsePreload('contacts'));
app.contacts = new app.collections.Contacts(app.parsePreload("contacts"));
var stream = new app.views.ContactStream({
collection: app.contacts,
el: $('.stream.contacts #contact_stream'),
el: $(".stream.contacts #contact_stream"),
});
app.page = new app.pages.Contacts({stream: stream});
......@@ -80,7 +80,7 @@ app.Router = Backbone.Router.extend({
app.page.render();
if( !$.contains(document, app.page.el) ) {
// view element isn't already attached to the DOM, insert it
// view element isn"t already attached to the DOM, insert it
$("#container").empty().append(app.page.el);
}
},
......@@ -96,7 +96,7 @@ app.Router = Backbone.Router.extend({
var streamFacesView = new app.views.StreamFaces({collection : app.stream.items});
$("#main_stream").html(app.page.render().el);
$('#selected_aspect_contacts .content').html(streamFacesView.render().el);
$("#selected_aspect_contacts .content").html(streamFacesView.render().el);
this._hideInactiveStreamLists();
},
......@@ -104,7 +104,7 @@ app.Router = Backbone.Router.extend({
this.renderPage(function() {
return new app.pages.Profile({
person_id: guid,
el: $('body > .container-fluid'),
el: $("body > #profile_container"),
streamCollection: app.collections.Photos,
streamView: app.views.Photos
});
......@@ -132,14 +132,14 @@ app.Router = Backbone.Router.extend({
},
aspects : function(){
app.aspects = new app.collections.Aspects(app.currentUser.get('aspects'));
app.aspects = new app.collections.Aspects(app.currentUser.get("aspects"));
this.aspects_list = new app.views.AspectsList({ collection: app.aspects });
this.aspects_list.render();
this.aspects_stream();
},
aspects_stream : function(){
var ids = app.aspects.selectedAspects('id');
var ids = app.aspects.selectedAspects("id");
app.stream = new app.models.StreamAspects([], { aspects_ids: ids });
app.stream.fetch();
......@@ -150,7 +150,7 @@ app.Router = Backbone.Router.extend({
var streamFacesView = new app.views.StreamFaces({collection : app.stream.items});
$("#main_stream").html(app.page.render().el);
$('#selected_aspect_contacts .content').html(streamFacesView.render().el);
$("#selected_aspect_contacts .content").html(streamFacesView.render().el);
this._hideInactiveStreamLists();
},
......@@ -165,13 +165,13 @@ app.Router = Backbone.Router.extend({
bookmarklet: function() {
var contents = (window.gon) ? gon.preloads.bookmarklet : {};
app.bookmarklet = new app.views.Bookmarklet(
_.extend({}, {el: $('#bookmarklet')}, contents)
_.extend({}, {el: $("#bookmarklet")}, contents)
).render();
},
profile: function() {
this.renderPage(function() { return new app.pages.Profile({
el: $('body > .container-fluid')
el: $("body > #profile_container")
}); });
}
});
......
......@@ -4,7 +4,7 @@ app.views.AspectCreate = app.views.Base.extend({
templateName: "aspect_create_modal",
events: {
"click .btn.creation": "createAspect"
"click .btn.btn-primary": "createAspect"
},
initialize: function(opts) {
......
......@@ -12,9 +12,10 @@
app.views.AspectMembership = app.views.AspectsDropdown.extend({
events: {
"click ul.aspect_membership.dropdown-menu > li.aspect_selector": "_clickHandler",
"keypress ul.aspect_membership.dropdown-menu > li.aspect_selector": "_clickHandler",
"click ul.aspect_membership.dropdown-menu > li.newItem": "showModal"
"click ul.aspect_membership.dropdown-menu > li.aspect_selector"
: "_clickHandler",
"keypress ul.aspect_membership.dropdown-menu > li.aspect_selector"
: "_clickHandler"
},
initialize: function() {
......@@ -146,11 +147,7 @@ app.views.AspectMembership = app.views.AspectsDropdown.extend({
// refresh the button text to reflect the current aspect selection status
updateSummary: function(target) {
this._toggleCheckbox(target);
this._updateButton('green');
},
showModal: function() {
this.$("#newAspectModal").modal("show");
this._updateButton("btn-success");
}
});
// @license-end
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
/*
/*
* Aspects view for the publishers aspect dropdown and the aspect membership dropdown.
*/
app.views.AspectsDropdown = app.views.Base.extend({
......@@ -31,7 +31,7 @@ app.views.AspectsDropdown = app.views.Base.extend({
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");
......
......@@ -7,9 +7,9 @@ app.views.Bookmarklet = Backbone.View.extend({
// init a standalone publisher
app.publisher = new app.views.Publisher({standalone: true});
app.publisher.on('publisher:add', this._postSubmit, this);
app.publisher.on('publisher:sync', this._postSuccess, this);
app.publisher.on('publisher:error', this._postError, this);
app.publisher.on("publisher:add", this._postSubmit, this);
app.publisher.on("publisher:sync", this._postSuccess, this);
app.publisher.on("publisher:error", this._postError, this);
this.param_contents = opts;
},
......@@ -35,18 +35,18 @@ app.views.Bookmarklet = Backbone.View.extend({
},
_postSubmit: function() {
this.$('h4').text(Diaspora.I18n.t('bookmarklet.post_submit'));
this.$("h4").text(Diaspora.I18n.t("bookmarklet.post_submit"));
},
_postSuccess: function() {
this.$('h4').text(Diaspora.I18n.t('bookmarklet.post_success'));
this.$("h4").text(Diaspora.I18n.t("bookmarklet.post_success"));
app.publisher.close();
this.$("#publisher").addClass("hidden");
_.delay(window.close, 2000);
},
_postError: function() {
this.$('h4').text(Diaspora.I18n.t('bookmarklet.post_something'));
this.$("h4").text(Diaspora.I18n.t("bookmarklet.post_something"));
}
});
// @license-end
......
......@@ -10,18 +10,24 @@ app.views.Location = Backbone.View.extend({
},
render: function(){
$(this.el).append('<img alt="ajax-loader" src="'+ImagePaths.get('ajax-loader.gif')+'">');
$("<img/>", { alt: "ajax-loader", src: ImagePaths.get("ajax-loader2.gif") }).appendTo(this.el);
},
getLocation: function(){
var element = this.el;
var element = this.el ;
var locator = new OSM.Locator();
locator.getAddress(function(address, latlng){
$(element).html('<input id="location_address" type="text" class="input-block-level" value="' + address + '"/>');
$('#location_coords').val(latlng.latitude + "," + latlng.longitude);
$(element).empty();
$("<input/>",
{ id: "location_address",
value: address,
type: "text",
class: "input-block-level form-control"
}).appendTo($(element));
$("#location_coords").val(latlng.latitude + "," + latlng.longitude);
});
},
}
});
// @license-end
......@@ -86,7 +86,7 @@ app.views.NotificationDropdown = app.views.Base.extend({
hideAjaxLoader: function(){
var self = this;
this.ajaxLoader.find('img').fadeTo(200, 0, function(){
self.ajaxLoader.hide(300, function(){
self.ajaxLoader.hide(200, function(){
self.ajaxLoader.find('img').css('opacity', 1);
});
});
......
......@@ -15,12 +15,12 @@ app.views.Notifications = Backbone.View.extend({
toggleUnread: function(evt) {
var note = $(evt.target).closest(".stream_element");
var unread = note.hasClass("unread");
if (unread){ this.setRead(note.data("guid")); }
else { this.setUnread(note.data("guid")); }
var guid = note.data("guid");
if (unread){ this.setRead(guid); }
else { this.setUnread(guid); }
},
getAllUnread: function(){ return $('.media.stream_element.unread'); },
getAllUnread: function(){ return $(".media.stream_element.unread"); },
setRead: function(guid) { this.setUnreadStatus(guid, false); },
......@@ -37,8 +37,9 @@ app.views.Notifications = Backbone.View.extend({
},
clickSuccess: function(data) {
var type = $('.stream_element[data-guid=' + data["guid"] + ']').data('type');
this.updateView(data["guid"], type, data["unread"]);
var guid = data.guid;
var type = $(".stream_element[data-guid=" + guid + "]").data("type");
this.updateView(guid, type, data.unread);
},
markAllRead: function(evt){
......@@ -51,43 +52,43 @@ app.views.Notifications = Backbone.View.extend({
updateView: function(guid, type, unread) {
var change = unread ? 1 : -1,
all_notes = $('ul.nav > li:eq(0) .badge'),
type_notes = $('ul.nav > li[data-type=' + type + '] .badge'),
header_badge = $('#notification_badge .badge_count'),
note = $('.stream_element[data-guid=' + guid + ']'),
markAllReadLink = $('a#mark_all_read_link'),
translationKey = unread ? 'notifications.mark_read' : 'notifications.mark_unread';
allNotes = $(".list-group > a:eq(0) .badge"),
typeNotes = $(".list-group > a[data-type=" + type + "] .badge"),
headerBadge = $("#notification_badge .badge_count"),
note = $(".stream_element[data-guid=" + guid + "]"),
markAllReadLink = $("a#mark_all_read_link"),
translationKey = unread ? "notifications.mark_read" : "notifications.mark_unread";
if(unread){ note.removeClass("read").addClass("unread"); }
else { note.removeClass("unread").addClass("read"); }
$(".unread-toggle .entypo", note)
.tooltip('destroy')
.tooltip("destroy")
.removeAttr("data-original-title")
.attr('title',Diaspora.I18n.t(translationKey))
.attr("title",Diaspora.I18n.t(translationKey))
.tooltip();
[all_notes, type_notes, header_badge].forEach(function(element){
[allNotes, typeNotes, headerBadge].forEach(function(element){
element.text(function(i, text){
return parseInt(text) + change });
});
[all_notes, type_notes].forEach(function(badge) {
[allNotes, typeNotes].forEach(function(badge) {
if(badge.text() > 0) {
badge.addClass('badge-important').removeClass('badge-default');
badge.removeClass("hidden");
}
else {
badge.removeClass('badge-important').addClass('badge-default');
badge.addClass("hidden");
}
});
if(header_badge.text() > 0){
header_badge.removeClass('hidden');
markAllReadLink.removeClass('disabled');
if(headerBadge.text() > 0){
headerBadge.removeClass("hidden");
markAllReadLink.removeClass("disabled");
}
else{
header_badge.addClass('hidden');
markAllReadLink.addClass('disabled');
headerBadge.addClass("hidden");
markAllReadLink.addClass("disabled");
}
}
});
......
......@@ -3,6 +3,11 @@
app.views.ProfileHeader = app.views.Base.extend({
templateName: 'profile_header',
events: {
"click #mention_button": "showMentionModal",
"click #message_button": "showMessageModal"
},
initialize: function(opts) {
app.events.on('aspect:create', this.postRenderTemplate, this);
this.photos = _.has(opts, 'photos') ? opts.photos : null;
......@@ -40,6 +45,14 @@ app.views.ProfileHeader = app.views.Base.extend({
return (this.contacts && this.contacts.count > 0);
},
showMentionModal: function(){
app.helpers.showModal("#mentionModal");
},
showMessageModal: function(){
app.helpers.showModal("#conversationModal");
},
postRenderTemplate: function() {
var self = this;
var dropdownEl = this.$('.aspect_membership_dropdown.placeholder');
......
......@@ -11,66 +11,66 @@
app.views.PublisherGettingStarted = Backbone.View.extend({
initialize: function(opts) {
this.el_first_msg = opts.el_first_msg;
this.el_visibility = opts.el_visibility;
this.el_stream = opts.el_stream;
this.firstMessage = opts.firstMessageEl;
this.visibility = opts.visibilityEl;
this.stream = opts.streamEl;
},
// initiate all the popover message boxes
show: function() {
this._addPopover(this.el_first_msg, {
trigger: 'manual',
this._addPopover(this.firstMessage, {
trigger: "manual",
offset: 30,
id: 'first_message_explain',
placement: 'right',
id: "first_message_explain",
placement: "right",
html: true,
container: 'body'
container: "body"
}, 600);
this._addPopover(this.el_visibility, {
trigger: 'manual',
this._addPopover(this.visibility, {
trigger: "manual",
offset: 10,
id: 'message_visibility_explain',
placement: 'bottom',
id: "message_visibility_explain",
placement: "bottom",
html: true,
container: 'body'
container: "body"
}, 1000);
this._addPopover(this.el_stream, {
trigger: 'manual',
this._addPopover(this.stream, {
trigger: "manual",
offset: -5,
id: 'stream_explain',
placement: 'left',
id: "stream_explain",
placement: "left",
html: true,
container: 'body'
container: "body"
}, 1400);
// hide some popovers when a post is created
this.$('.button.creation').click(function() {
this.el_visibility.popover('hide');
this.el_first_msg.popover('hide');
this.$("#submit").click(function() {
this.visibility.popover("hide");
this.firstMessage.popover("hide");
});
},
_addPopover: function(el, opts, timeout) {
el.popover(opts);
el.click(function() {
el.popover('hide');
el.popover("hide");
});
// show the popover after the given timeout
setTimeout(function() {
el.popover('show');
el.popover("show");
// disable 'getting started' when the last popover is closed
var popup = el.data('popover').$tip[0];
var close = $(popup).find('.close');
var popup = el.data("bs.popover").$tip[0];
var close = $(popup).find(".close");
close.click(function() {
if( $('.popover').length === 1 ) {
$.get('/getting_started_completed', {success: function() {
if( $(".popover").length <= 1 ) {
$.get("/getting_started_completed", {success: function() {
$("#welcome-to-diaspora, #welcome-to-diaspora~br").remove();
}});
}
el.popover('hide');
el.popover("hide");
return false;
});
}, timeout);
......
......@@ -6,7 +6,7 @@
app.views.PublisherUploader = Backbone.View.extend({
allowedExtensions: ['jpg', 'jpeg', 'png', 'gif', 'tif', 'tiff'],
allowedExtensions: ["jpg", "jpeg", "png", "gif", "tif", "tiff"],
sizeLimit: 4194304, // bytes
initialize: function(opts) {
......@@ -18,14 +18,14 @@ app.views.PublisherUploader = Backbone.View.extend({
//debug: true,
action: '/photos',
action: "/photos",
params: { photo: { pending: true }},
allowedExtensions: this.allowedExtensions,
sizeLimit: this.sizeLimit,
messages: {
typeError: Diaspora.I18n.t('photo_uploader.invalid_ext'),
sizeError: Diaspora.I18n.t('photo_uploader.size_error'),
emptyError: Diaspora.I18n.t('photo_uploader.empty')
typeError: Diaspora.I18n.t("photo_uploader.invalid_ext"),
sizeError: Diaspora.I18n.t("photo_uploader.size_error"),
emptyError: Diaspora.I18n.t("photo_uploader.empty")
},
onProgress: _.bind(this.progressHandler, this),
onSubmit: _.bind(this.submitHandler, this),
......@@ -33,22 +33,22 @@ app.views.PublisherUploader = Backbone.View.extend({
});
this.el_info = $('<div id="fileInfo" />');
this.publisher.el_wrapper.before(this.el_info);
this.info = $("<div id=\"fileInfo\" />");
this.publisher.wrapperEl.before(this.info);
this.publisher.el_photozone.on('click', '.x', _.bind(this._removePhoto, this));
this.publisher.photozoneEl.on("click", ".x", _.bind(this._removePhoto, this));
},
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 + '%');
this.info.text(fileName + " " + progress + "%").fadeTo(200, 1);