Commit 207b6c61 authored by Augier's avatar Augier Committed by Jonne Haß

Port to Bootstrap 3

correcting images display on stream sidebar

Corrections on profile page
parent e39d024b
......@@ -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() {
......
......@@ -78,10 +78,10 @@ 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="<%= img_class %>" title="<%= title %>" alt="<%= title %>" />')({
src: avatar[size],
img_class: 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) {
......
......@@ -13,8 +13,7 @@ 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"
"keypress ul.aspect_membership.dropdown-menu > li.aspect_selector": "_clickHandler"
},
initialize: function() {
......@@ -147,10 +146,6 @@ app.views.AspectMembership = app.views.AspectsDropdown.extend({
updateSummary: function(target) {
this._toggleCheckbox(target);
this._updateButton('green');
},
showModal: function() {
this.$("#newAspectModal").modal("show");
}
});
// @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");
......
......@@ -10,18 +10,20 @@ 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);
});
});
......
......@@ -20,7 +20,7 @@ app.views.Notifications = Backbone.View.extend({
else { this.setUnread(note.data("guid")); }
},
getAllUnread: function(){ return $('.media.stream_element.unread'); },
getAllUnread: function(){ return $(".media.stream_element.unread"); },
setRead: function(guid) { this.setUnreadStatus(guid, false); },
......@@ -37,7 +37,7 @@ app.views.Notifications = Backbone.View.extend({
},
clickSuccess: function(data) {
var type = $('.stream_element[data-guid=' + data["guid"] + ']').data('type');
var type = $(".stream_element[data-guid=" + data["guid"] + "]").data("type");
this.updateView(data["guid"], type, data["unread"]);
},
......@@ -51,43 +51,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 = $("ul.list-group > a:eq(0) .badge"),
typeNotes = $("ul.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.addClass("badge-important").removeClass("badge-default");
}
else {
badge.removeClass('badge-important').addClass('badge-default');
badge.removeClass("badge-important").addClass("badge-default");
}
});
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');
......
......@@ -19,58 +19,58 @@ app.views.PublisherGettingStarted = Backbone.View.extend({
// initiate all the popover message boxes
show: function() {
this._addPopover(this.el_first_msg, {
trigger: 'manual',
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',
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',
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.el_visibility.popover("hide");
this.el_first_msg.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);
......
......@@ -324,7 +324,7 @@ app.views.Publisher = Backbone.View.extend({
"title" : serializedForm["status_message[text]"],
"address" : $("#location_address").val(),
"interactions" : {"likes":[],"reshares":[],"comments_count":0,"likes_count":0,"reshares_count":0},
'poll': poll,
'poll': poll
};
if(app.stream) {
this.removePostPreview();
......
......@@ -45,8 +45,5 @@
//= require view
//= require aspects-dropdown
//= require mentions
//= require bootstrap-tooltip
//= require bootstrap-popover
//= require bootstrap-dropdown
//= require bootstrap-modal
//= require bootstrap
//= require osmlocator
......@@ -37,6 +37,7 @@ var View = {
Diaspora.page.directionDetector.updateBinds();
});
$("a.new_aspect").click(function(){
$("input#aspect_name").focus();
});
......
......@@ -13,7 +13,7 @@
debug: false,
donetext: Diaspora.I18n.t("infinite_scroll.no_more"),
loadingText: "",
loadingImg: ImagePaths.get("ajax-loader.gif"),
loadingImg: ImagePaths.get("ajax-loader2.gif"),
navSelector: "#pagination",
nextSelector: ".paginate",
itemSelector: ".stream_element",
......
......@@ -40,12 +40,20 @@ body > div.container {
height: 50px;
}
.actions li {
margin-top: .3em;
}
.actions{ width: 150px; }
.pull-right .label{ display: inline-block; }
}
}
/** Invites panel **/
.more_invites{
#add-invites-section{
line-height: 34px;
margin-bottom: 15px;
}
}
/** reported posts **/
@import 'report'
@import 'report';
......@@ -6,17 +6,17 @@
height: 14px;
display: inline-block;
}
.icon-ok, .icon-refresh {
.glyphicon-ok, .icon-refresh {
padding-right: 5px;
display: none;
}
&.selected {
.icon-ok { display: inline-block;}
.glyphicon-ok { display: inline-block;}
.icon-refresh { display: none;}
}
&.loading {
.icon-refresh { display: inline-block;}
.icon-ok { display: none;}
.glyphicon-ok { display: none;}
}
a {
.text {
......
......@@ -26,7 +26,7 @@
}
cursor: default;
display: block;
height: 37px;
height: 45px;
position: relative;
// if width will be 100% horizontal scrollbar will apear
// when scroll mode will be used
......@@ -42,7 +42,7 @@
}
.ac_loading {
background: white image-url('ajax-loader.gif') right center no-repeat;
background: white image-url('ajax-loader2.gif') right center no-repeat;
}
.ac_odd {
......
// Calling this file bootstrap would cause an infinite recursion during asset compilation.
@import 'bootstrap';
@import 'bootstrap-responsive';
// according to the docs, this is part of bootstrap 2.3.x
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
@import "bootstrap-sprockets";
@import "bootstrap";
......@@ -26,8 +26,8 @@ header {
}
#global_search {
form {
top: -3px;
input {
height: 15px;
color: black;
}
}
......
body > .container-fluid.chat-roster-shown {
body > .container.chat-roster-shown {
padding-right: 224px;
#back-to-top { right: 244px; }
}
body > .container-fluid.chat-roster-hidden {
body > .container.chat-roster-hidden {
#back-to-top { right: 54px; }
}
......@@ -10,9 +10,8 @@
}
.comments > .comment, .comment.new_comment_form_wrapper {
.avatar {
margin-top: 5px;
height: 30px;
width: 30px;
height: 35px;
width: 35px;
}
margin: 0;
border-top: 1px dotted $border-grey;
......@@ -30,6 +29,7 @@
}
}
.submit_button {
margin-top: 10px;
input {
float: right;
}
......@@ -39,10 +39,12 @@
}
.comment_box {
width: 95%;
height: 30px;
height: 35px;
}
textarea.comment_box:focus, textarea.comment_box:valid, textarea.comment_box:active {
border-color: $border-dark-grey;
& + .submit_button { display: block; }
min-height: 35px;
box-shadow: none;
}
}