diff --git a/Changelog.md b/Changelog.md index 2da62fdb6..80ae85b39 100644 --- a/Changelog.md +++ b/Changelog.md @@ -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) diff --git a/app/assets/javascripts/app/views/aspects_dropdown_view.js b/app/assets/javascripts/app/views/aspects_dropdown_view.js new file mode 100644 index 000000000..76ecb5878 --- /dev/null +++ b/app/assets/javascripts/app/views/aspects_dropdown_view.js @@ -0,0 +1,50 @@ +/* + * 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); + } +}); diff --git a/app/assets/javascripts/app/views/location_view.js b/app/assets/javascripts/app/views/location_view.js index a01f2709d..20a7e580a 100644 --- a/app/assets/javascripts/app/views/location_view.js +++ b/app/assets/javascripts/app/views/location_view.js @@ -16,7 +16,7 @@ app.views.Location = Backbone.View.extend({ locator = new OSM.Locator(); locator.getAddress(function(address, latlng){ - $(element).html(''); + $(element).html(''); $('#location_coords').val(latlng.latitude + "," + latlng.longitude); $(element).append('delete location'); }); diff --git a/app/assets/javascripts/app/views/publisher/aspect_selector_blueprint_view.js b/app/assets/javascripts/app/views/publisher/aspect_selector_blueprint_view.js new file mode 100644 index 000000000..9d21e43f6 --- /dev/null +++ b/app/assets/javascripts/app/views/publisher/aspect_selector_blueprint_view.js @@ -0,0 +1,91 @@ +/* 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( + '' + ); + } +}); diff --git a/app/assets/javascripts/app/views/publisher/aspect_selector_view.js b/app/assets/javascripts/app/views/publisher/aspect_selector_view.js index 27b9eccc3..4f9d53803 100644 --- a/app/assets/javascripts/app/views/publisher/aspect_selector_view.js +++ b/app/assets/javascripts/app/views/publisher/aspect_selector_view.js @@ -1,15 +1,14 @@ -/* 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( + '' + ); }); - }, - - _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( - '' - ); } }); diff --git a/app/assets/javascripts/app/views/publisher/services_view.js b/app/assets/javascripts/app/views/publisher/services_view.js index a788cadbd..757a8f369 100644 --- a/app/assets/javascripts/app/views/publisher/services_view.js +++ b/app/assets/javascripts/app/views/publisher/services_view.js @@ -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"); diff --git a/app/assets/javascripts/app/views/publisher/uploader_view.js b/app/assets/javascripts/app/views/publisher/uploader_view.js index 399021813..60b1ef8af 100644 --- a/app/assets/javascripts/app/views/publisher/uploader_view.js +++ b/app/assets/javascripts/app/views/publisher/uploader_view.js @@ -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( '
  • ' + - ' '+ + '
    ' + + ' '+ '
    • ' ); }, @@ -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( + '
    ' + + Diaspora.I18n.t('photo_uploader.error', {file: fileName}) + + '
    ' + ); } }, @@ -91,11 +100,13 @@ app.views.PublisherUploader = Backbone.View.extend({ var placeholder = publisher.el_photozone.find('li.loading').first(); placeholder .removeClass('loading') - .append( - '
    X
    '+ + .prepend( + '
    '+ '
    ' ) - .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 ) { diff --git a/app/assets/javascripts/app/views/publisher_view.js b/app/assets/javascripts/app/views/publisher_view.js index 1ef5b7cef..5a124b5c3 100644 --- a/app/assets/javascripts/app/views/publisher_view.js +++ b/app/assets/javascripts/app/views/publisher_view.js @@ -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 @@ -81,6 +82,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 +108,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 +155,8 @@ app.views.Publisher = Backbone.View.extend({ // creates the location showLocation: function(){ if($('#location').length == 0){ - $('#publisher_textarea_wrapper').after('
    '); + $('#location_container').append('
    '); + this.el_wrapper.addClass('with_location'); this.view_locator = new app.views.Location(); } }, @@ -157,6 +165,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; } }, diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass index edbf99578..d0fb8cb92 100644 --- a/app/assets/stylesheets/application.css.sass +++ b/app/assets/stylesheets/application.css.sass @@ -12,7 +12,7 @@ @import 'opengraph' @import 'help' @import 'profile' -@import 'publisher' +@import 'publisher_blueprint' @import 'facebox' @import 'aspects' @import 'popover' diff --git a/app/assets/stylesheets/aspects.css.scss b/app/assets/stylesheets/aspects.css.scss index 32f710e6b..1ffed3318 100644 --- a/app/assets/stylesheets/aspects.css.scss +++ b/app/assets/stylesheets/aspects.css.scss @@ -1,3 +1,27 @@ +.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 { diff --git a/app/assets/stylesheets/bookmarklet.css.scss b/app/assets/stylesheets/bookmarklet.css.scss new file mode 100644 index 000000000..773eabfd1 --- /dev/null +++ b/app/assets/stylesheets/bookmarklet.css.scss @@ -0,0 +1 @@ +#bookmarklet { padding:10px 10px 30px 10px; margin-top: 0; } diff --git a/app/assets/stylesheets/buttons.css.scss b/app/assets/stylesheets/buttons.css.scss new file mode 100644 index 000000000..be77288d9 --- /dev/null +++ b/app/assets/stylesheets/buttons.css.scss @@ -0,0 +1,12 @@ +.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%); + } +} diff --git a/app/assets/stylesheets/entypo.css.scss b/app/assets/stylesheets/entypo.css.scss index ea49b3ccf..a2d2a3774 100644 --- a/app/assets/stylesheets/entypo.css.scss +++ b/app/assets/stylesheets/entypo.css.scss @@ -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 */ + &.down:before { content: '\261f'; } /* 261f */ + &.download:before { content: '\1f4e5'; } /* 1f4e5 */ + &.drive:before { content: '\e755'; } /* e755 */ + &.droplet:before { content: '\1f4a7'; } /* 1f4a7 */ + &.erase:before { content: '\232b'; } /* 232b */ + &.export:before { content: '\e715'; } /* e715 */ + &.eye:before { content: '\e70a'; } /* e70a */ + &.fb:before { content: '\23ea'; } /* 23ea */ + &.feather:before { content: '\2712'; } /* 2712 */ + &.ff:before { content: '\23e9'; } /* 23e9 */ + &.flag:before { content: '\2691'; } /* 2691 */ + &.flash:before { content: '\26a1'; } /* 26a1 */ + &.flashlight:before { content: '\1f526'; } /* 1f526 */ + &.flow-branch:before { content: '\e791'; } /* e791 */ + &.flow-cascade:before { content: '\e790'; } /* e790 */ + &.flow-line:before { content: '\e793'; } /* e793 */ + &.flow-parallel:before { content: '\e794'; } /* e794 */ + &.flow-tree:before { content: '\e792'; } /* e792 */ + &.folder:before { content: '\1f4c1 '; } /* 1f4c1 */ + &.forward:before { content: '\27a6'; } /* 27a6 */ + &.gauge:before { content: '\e7a2'; } /* e7a2 */ + &.globe:before { content: '\1f30e'; } /* 1f30e */ + &.graduation-cap:before { content: '\1f393 '; } /* 1f393 */ + &.heart-empty:before { content: '\2661'; } /* 2661 */ + &.heart:before { content: '\2665'; } /* 2665 */ + &.help:before { content: '\2753'; } /* 2753 */ + &.home:before { content: '\2302'; } /* 2302 */ + &.hourglass:before { content: '\23f3'; } /* 23f3 */ + &.inbox:before { content: '\e777'; } /* e777 */ + &.infinity:before { content: '\221e'; } /* 221e */ + &.info:before { content: '\2139'; } /* 2139 */ + &.install:before { content: '\e778'; } /* e778 */ + &.key:before { content: '\1f511'; } /* 1f511 */ + &.keyboard:before { content: '\2328'; } /* 2328 */ + &.landscape-doc:before { content: '\e737'; } /* e737 */ + &.language:before { content: '\e752'; } /* e752 */ + &.layout:before { content: '\268f'; } /* 268f */ + &.leaf:before { content: '\1f342 '; } /* 1f342 */ + &.left-1:before { content: '\2b05'; } /* 2b05 */ + &.left-bold:before { content: '\e4ad'; } /* e4ad */ + &.left-thin:before { content: '\2190'; } /* 2190 */ + &.left:before { content: '\261c'; } /* 261c */ + &.level-down:before { content: '\21b3'; } /* 21b3 */ + &.level-up:before { content: '\21b0'; } /* 21b0 */ + &.lifebuoy:before { content: '\e788'; } /* e788 */ + &.light-bulb:before { content: '\1f4a1'; } /* 1f4a1 */ + &.light-down:before { content: '\1f505'; } /* 1f505' */ + &.light-up:before { content: '\1f506'; } /* 1f506 */ + &.line-graph:before { content: '\1f4c8'; } /* 1f4c8 */ + &.link:before { content: '\1f517'; } /* 1f517 */ + &.list:before { content: '\2630'; } /* 2630 */ + &.location:before { content: '\e724'; } /* e724 */ + &.lock-open:before { content: '\1f513'; } /* 1f513 */ + &.lock:before { content: '\1f512'; } /* 1f512 */ + &.login:before { content: '\e740'; } /* e740 */ + &.logout:before { content: '\e741'; } /* e741 */ + &.loop:before { content: '\1f501'; } /* 1f501 */ + &.magnet:before { content: '\e7a1'; } /* e7a1 */ + &.mail:before { content: '\2709'; } /* 2709 */ + &.map:before { content: '\e727'; } /* e727 */ + &.megaphone:before { content: '\1f4e3'; } /* 1f4e3 */ + &.mic:before { content: '\1f3a4'; } /* 1f3a4 */ + &.minus:before { content: '\2d'; } /* 2d */ + &.mobile:before { content: '\1f4f1'; } /* 1f4f1 */ + &.monitor:before { content: '\1f4bb'; } /* 1f4bb */ + &.moon:before { content: '\263d'; } /* 263d */ + &.mouse:before { content: '\e789'; } /* e789 */ + &.music:before { content: '\1f3b5'; } /* 1f3b5 */ + &.mute:before { content: '\1f507'; } /* 1f507 */ + &.network:before { content: '\e776'; } /* e776 */ + &.new:before { content: '\1f4a5'; } /* 1f4a5 */ + &.newspaper:before { content: '\1f4f0'; } /* 1f4f0 */ + &.note:before { content: '\266a'; } /* 266a */ + &.numbered-list:before { content: '\e005'; } /* e005 */ + &.open-book:before { content: '\1f4d6'; } /* 1f4d6 */ + &.palette:before { content: '\1f3a8'; } /* 1f3a8 */ + &.paper-plane:before { content: '\e79b'; } /* e79b */ + &.paus:before { content: '\2389'; } /* 2389 */ + &.pencil:before { content: '\270e'; } /* 270e */ + &.phone:before { content: '\1f4de'; } /* 1f4de */ + &.picture:before { content: '\1f304'; } /* 1f304 */ + &.pie-chart:before { content: '\e751'; } /* e751 */ + &.play:before { content: '\25b6'; } /* 25b6 */ + &.plus:before { content: '\2b'; } /* 2b */ + &.popup:before { content: '\e74c'; } /* e74c */ + &.print:before { content: '\e716'; } /* e716 */ + &.progress-0:before { content: '\e768'; } /* e768 */ + &.progress-1:before { content: '\e769'; } /* e769 */ + &.progress-2:before { content: '\e76a'; } /* e76a */ + &.progress-3:before { content: '\e76b'; } /* e76b */ + &.publish:before { content: '\e74d'; } /* e74d */ + &.quote:before { content: '\275e'; } /* 275e */ + &.record:before { content: '\26ab'; } /* 26ab */ + &.reply-all:before { content: '\e713'; } /* e713 */ + &.reply:before { content: '\e712'; } /* e712 */ + &.resize-full:before { content: '\e744'; } /* e744 */ + &.resize-small:before { content: '\e746'; } /* e746 */ + &.retweet:before { content: '\e717'; } /* e717 */ + &.right-1:before { content: '\27a1'; } /* 27a1 */ + &.right-bold:before { content: '\e4ae'; } /* e4ae */ + &.right-thin:before { content: '\2192'; } /* 2192 */ + &.right:before { content: '\261e'; } /* 261e */ + &.rocket:before { content: '\1f680'; } /* 1f680 */ + &.rss:before { content: '\e73a'; } /* e73a */ + &.save:before { content: '\1f4be'; } /* 1f4be */ + &.search:before { content: '\1f50d'; } /* 1f50d */ + &.share:before { content: '\e73c'; } /* e73c */ + &.shareable:before { content: '\e73e'; } /* e73e */ + &.shuffle:before { content: '\1f500'; } /* 1f500 */ + &.signal:before { content: '\1f4f6'; } /* 1f4f6 */ + &.sound:before { content: '\1f50a'; } /* 1f50a */ + &.squared-cross:before { content: '\274e'; } /* 274e */ + &.squared-minus:before { content: '\229f'; } /* 229f */ + &.squared-plus:before { content: '\229e'; } /* 229e */ + &.star-empty:before { content: '\2606'; } /* 2606 */ + &.star:before { content: '\2605'; } /* 2605 */ + &.stop:before { content: '\25a0'; } /* 25a0 */ + &.suitcase:before { content: '\e78e'; } /* e78e */ + &.sweden:before { content: '\f601'; } /* f601 */ + &.switch:before { content: '\21c6'; } /* 21c6 */ + &.tag:before { content: '\e70c'; } /* e70c */ + &.text-doc-inverted:before { content: '\e731'; } /* e731 */ + &.text-doc:before { content: '\1f4c4'; } /* 1f4c4 */ + &.thermometer:before { content: '\e757'; } /* e757 */ + &.three-dots:before { content: '\e78d'; } /* e78d */ + &.thumbs-down:before { content: '\1f44e'; } /* 1f44e */ + &.thumbs-up:before { content: '\1f44d'; } /* 1f44d */ + &.thunder-cloud:before { content: '\26c8'; } /* 26c8 */ + &.ticket:before { content: '\1f3ab'; } /* 1f3ab */ + &.to-end:before { content: '\23ed'; } /* 23ed */ + &.to-start:before { content: '\23ee'; } /* 23ee */ + &.tools:before { content: '\2692'; } /* 2692 */ + &.traffic-cone:before { content: '\e7a3'; } /* e7a3 */ + &.trash:before { content: '\e729'; } /* e729 */ + &.triangle-down:before { content: '\25be'; } /* 25be */ + &.triangle-left:before { content: '\25c2'; } /* 25c2 */ + &.triangle-right:before { content: '\25b8'; } /* 25b8 */ + &.triangle-up:before { content: '\25b4'; } /* 25b4 */ + &.trophy:before { content: '\1f3c6'; } /* 1f3c6 */ + &.two-dots:before { content: '\e78c'; } /* e78c */ + &.up-1:before { content: '\2b06'; } /* 2b06 */ + &.up-bold:before { content: '\e4af'; } /* e4af */ + &.up-thin:before { content: '\2191'; } /* 2191 */ + &.up:before { content: '\261d'; } /* 261d */ + &.upload-cloud:before { content: '\e711'; } /* e711 */ + &.upload:before { content: '\1f4e4'; } /* 1f4e4 */ + &.user:before { content: '\1f464'; } /* 1f464 */ + &.users:before { content: '\1f465'; } /* 1f465 */ + &.vcard:before { content: '\e722'; } /* e722 */ + &.video:before { content: '\1f3ac'; } /* 1f3ac */ + &.voicemail:before { content: '\2707'; } /* 2707 */ + &.volume:before { content: '\e742'; } /* e742 */ + &.warning:before { content: '\26a0'; } /* 26a0 */ + &.water:before { content: '\1f4a6'; } /* 1f4a6 */ + + /* social extention map */ + &.behance:before { content: '\f34e'; } /* f34e */ + &.c-dribbble:before { content: '\f31c'; } /* f31c */ + &.c-facebook:before { content: '\f30d'; } /* f30d */ + &.c-flickr:before { content: '\f304'; } /* f304 */ + &.c-google+:before { content: '\f310'; } /* f310 */ + &.c-lastfm:before { content: '\f322'; } /* f322 */ + &.c-linkedin:before { content: '\f319'; } /* f319 */ + &.c-pinterest:before { content: '\f313'; } /* f313 */ + &.c-rdio:before { content: '\f325'; } /* f325 */ + &.c-skype:before { content: '\f33a'; } /* f33a */ + &.c-spotify:before { content: '\f328'; } /* f328 */ + &.c-stumbleupon:before { content: '\f31f'; } /* f31f */ + &.c-tumblr:before { content: '\f316'; } /* f316 */ + &.c-twitter:before { content: '\f30a'; } /* f30a */ + &.c-vimeo:before { content: '\f307'; } /* f307 */ + &.dribbble:before { content: '\f31b'; } /* f31b */ + &.dropbox:before { content: '\f330'; } /* f330 */ + &.evernote:before { content: '\f333'; } /* f333 */ + &.facebook:before { content: '\f30c'; } /* f30c */ + &.flattr:before { content: '\f336'; } /* f336 */ + &.flickr:before { content: '\f303'; } /* f303 */ + &.github:before { content: '\f300'; } /* f300 */ + &.google+:before { content: '\f30f'; } /* f30f */ + &.google-circles:before { content: '\f351'; } /* f351 */ + &.instagram:before { content: '\f32d'; } /* f32d */ + &.lastfm:before { content: '\f321'; } /* f321 */ + &.linkedin:before { content: '\f318'; } /* f318 */ + &.mixi:before { content: '\f34b'; } /* f34b */ + &.paypal:before { content: '\f342'; } /* f342 */ + &.picasa:before { content: '\f345'; } /* f345 */ + &.pinterest:before { content: '\f312'; } /* f312 */ + &.qq:before { content: '\f32a'; } /* f32a */ + &.rdio:before { content: '\f324'; } /* f324 */ + &.renren:before { content: '\f33c'; } /* f33c */ + &.s-facebook:before { content: '\f30e'; } /* f30e */ + &.sina-weibo:before { content: '\f33f'; } /* f33f */ + &.skype:before { content: '\f339'; } /* f339 */ + &.smashing:before { content: '\f357'; } /* f357 */ + &.social-c-github:before { content: '\f301'; } /* f301 */ + &.soundcloud:before { content: '\f348'; } /* f348 */ + &.spotify:before { content: '\f327'; } /* f327 */ + &.stumbleupon:before { content: '\f31e'; } /* f31e */ + &.tumblr:before { content: '\f315'; } /* f315 */ + &.twitter:before { content: '\f309'; } /* f309 */ + &.vimeo:before { content: '\f306'; } /* f306 */ + &.vk:before { content: '\f354'; } /* f354 */ } diff --git a/app/assets/stylesheets/new-templates.css.scss b/app/assets/stylesheets/new-templates.css.scss index 72ec0ad1d..620638da8 100644 --- a/app/assets/stylesheets/new-templates.css.scss +++ b/app/assets/stylesheets/new-templates.css.scss @@ -9,6 +9,7 @@ @import 'new_styles/base'; @import 'new_styles/viewer_nav'; +@import 'buttons'; /* font overrides */ @import 'new_styles/typography'; @@ -30,3 +31,10 @@ /* conversations */ @import 'conversations'; @import 'facebox'; + +/* publisher */ +@import 'publisher'; +@import 'aspects'; + +/* bookmarklet */ +@import 'bookmarklet'; diff --git a/app/assets/stylesheets/publisher.css.scss b/app/assets/stylesheets/publisher.css.scss index f7f3a0e39..f56d374db 100644 --- a/app/assets/stylesheets/publisher.css.scss +++ b/app/assets/stylesheets/publisher.css.scss @@ -1,313 +1,217 @@ #publisher { z-index: 1; color: $text-grey; - position: relative; - margin-top: 0; - margin-bottom: 0; - padding: 0 12px 22px 12px; - top: 0; - border-bottom: 1px #eee solid; - - form { - textarea { - resize: none; - height: 50px; - margin: 0; - } - } - - &.mention_popup { - padding: 1px 12px; - margin-bottom: 0; - border-bottom: none; - } - + &.closed { + #button_container, + #location_container, + #hide_publisher, + #photodropzone_container, .options_and_submit { display: none !important; } - - .counter { - display: none; - } - } - - &:not(.closed) { - textarea { - margin-bottom: 30px; - } + + #publisher_textarea_wrapper { border: 1px solid $border-grey !important; } } - .mentions-autocomplete-list ul { - width: 483px; - } - - .options_and_submit { - min-height: 21px; - clear: both; - position: relative; - padding-top: 6px; - margin-bottom: -2px; - - input { - display: inline; - } - - .public_toggle { - text-align: right; - .dropdown { - text-align: left; - } - - .icons-monotone_wrench_settings { - display: inline-block; - width: 16px; - height: 16px; - } - - a.question_mark { - text-decoration: none; - } - } - - #publisher_service_icons { - position: relative; - top: 3px; - margin-right: 10px; - - .social_media_logos-facebook-16x16, - .social_media_logos-twitter-16x16, - .social_media_logos-tumblr-16x16, - .social_media_logos-wordpress-16x16, - .social_media_logos-email-16x16, - .social_media_logos-feed-16x16, - .social_media_logos-website-16x16 { - display: inline-block; - height: 16px; - width: 16px; - } - } - - #fileInfo { - display: inline; - position: relative; - top: -2px; - } - } - - #status_message_fake_text { - min-height: 20px; - } - - .content_creation { - margin-top: 1em; - } - - #file-upload { - bottom: 1px !important; - display: inline-block; + .mentions-autocomplete-list ul { width: 100% !important; } + + form { margin: 0; - padding: .3em .3em 3px; - position: absolute !important; - right: 6px; - cursor: pointer; - - input[type='file'] { - cursor: pointer; - right: initial !important; - height: 100%; - width: 100%; - &::-webkit-file-upload-button { - cursor: pointer; - } + #fileInfo { display: none !important; } + #hide_publisher { + margin-top: 10px; } - - img { - @include opacity(0.4); - vertical-align: bottom; - } - - &:hover { - color: $text-dark-grey; - cursor: pointer; - - img { - @include opacity(0.8); - } - } - - &:active { - color: #444; - text-shadow: 0 1px 0 #fafafa; - - img { - @include opacity(1); - } - } - - &.loading { - @include opacity(0.5); - } - } -} - -#publisher_textarea_wrapper { - #hide_publisher { - @include opacity(0.3); - z-index: 5; - padding: 3px; - position: absolute; - right: 6px; - margin-top: 9px; - - .icons-deletelabel { - height: 14px; - width: 14px; - } - - &:hover { - @include opacity(1); - } - } - - .markdownIndications { - position: absolute; - bottom: 0px; - } - - @include border-radius(2px); - - border: 1px solid #ccc; - background: #fff; - - &.active { - border: 1px solid $border-dark-grey; - } - - position: relative; - padding-right: 10px; - - textarea { - z-index: 2; - border: none; - - &:focus { - outline: 0; - background: transparent; - } - } - - &.with_attachments { - padding-bottom: 38px; - } - - #photodropzone { - z-index: 3; - position: absolute; - bottom: 15px; - right: 35px; - width: 430px; - left: 5px; - padding: 0; - - li { - display: inline-block; - margin-right: 4px; - img { - width: 50px; - max-height: 55px; - } - .circle { - @include border-radius(20px); - - display: none; - z-index: 1; - position: absolute; - right: -7px; - top: -5px; - background-color: #333; - - width: 20px; - max-width: 20px; - height: 20px; - max-height: 20px; - border: 1px solid #fff; - } - - .x { - display: none; - z-index: 2; - position: absolute; - top: -3px; - right: -1px; - font-size: small; - font-weight: bold; - } - - &:hover { - cursor: default; - .circle { - display: block; + + .options_and_submit { + #publisher_service_icons { + .btn-link { text-decoration: none; } + .btn-link.question_mark .entypo { color: $text-grey; } + .btn-link.question_mark:hover .entypo { color: $black; } + .btn-link.service_icon { + padding-left: 5px; + padding-right: 5px; } - .x { - display: block; + .dim { @include opacity(0.3); } + .social_media_logos-wordpress-16x16 { + display: inline-block; + height: 16px; + width: 16px; } } } - } + + #publisher_textarea_wrapper { + background-color: white; + border-radius: 3px; + border: 1px solid $border-dark-grey; - .counter { - position: absolute; - font-size: 13px; - padding: 12px 0 0 5px; - } - .warning { - color: orange; - } - .exceeded { - color: red; - } -} - -#publisher.closed { - #publisher_textarea_wrapper #hide_publisher, - .markdownIndications { - display: none; - } -} - -#publisher_photo_upload { - position: absolute; - display: inline; - left: 600px; - top: 0; - z-index: 10; -} - -#publisher-images { - padding-left: 5px; - - #locator { - bottom: 1px !important; - display: inline-block; - margin: 0; - position: absolute !important; - right: 30px; - cursor: pointer; - img { - padding-top: 2px; - @include opacity(0.4); - } - &:hover { - color: $text-dark-grey; - cursor: pointer; - img { - @include opacity(0.8); + input[type='text'] { + border: none; + box-shadow: none; + margin: none; } + + textarea { + border: none; + margin: 0; + box-shadow: none; + resize: none; + height: 50px; + } + + &.active textarea { + min-height: 70px; + } + + .help-block { + font-size: 13px; + line-height: 30px; + padding-left: 10px; + margin-bottom: 0; + color: lighten($text-grey,20%); + a { color: lighten($blue,20%); } + } + + .mentions-input-box .mentions { + padding: 4px 6px !important; + line-height: 20px !important; + width: 100% !important; + } + + &.with_attachments .row-fluid#photodropzone_container { + border-top: 1px dashed $border-grey; + } + &.with_location .row-fluid#location_container { + height: 30px; + #hide_location { display: none !important; } + border-top: 1px dashed $border-grey; + input[type='text'] { + margin-bottom: 0; + color: $text-grey; + } + } + &.active .row-fluid#button_container { + border-top: 1px solid $border-grey; + } + + #photodropzone { + margin: 0; + > li.publisher_photo { + list-style: none; + float: left; + margin: 10px; + height: 100px; + width: 100px; + overflow: hidden; + line-height: 100px; + vertical-align: middle; + + img { + vertical-align: middle; + width: 100px; + } + + .x { + display: none; + width: 70px; + height: 70px; + border-radius: 35px; + text-align: center; + background-color: white; + color: black; + font-size: 70px; + line-height: 70px; + font-style: bold; + position: absolute; + z-index: 2; + @include opacity(0.85); + cursor: pointer; + top: 15px; + left: 15px; + + &:before { + content: '\2716'; + font-family: 'entypo'; + } + } + + &:hover .x { + display: inline-block; + } + + .progress { + width: 100%; + height: 20px; + margin: 40px 0; + } + + .ajax-loader { display: none; } + } + } + + #upload_error { + color: white; + font-style: bold; + border-top: 1px solid white; + background-color: $red; + text-align: center; + } + + #publisher-images { + margin-right: 5px; + #file-upload, + #locator, + #hide_location { + text-decoration: none !important; + font-size: 16px; + padding: 4px 5px; + i { + color: $text-grey; + } + &:hover{ + i { color: black; } + } + input[type='file'] { + cursor: pointer; + &::-webkit-file-upload-button { + cursor: pointer; + } + } + } + #hide_location { + display: none; + } + } + &.with_location #publisher-images { + #hide_location { display: inline-block; } + #locator { display: none; } + } + + .counter { + height: 30px; + line-height: 30px; + position: absolute; + right: 70px; + bottom: -31px; + font-size: 13px; + } + &.with_location .counter { + bottom: -62px; + } + .warning { + color: orange; + } + .exceeded { + color: red; + } + } + } + + .aspect_dropdown { + .radio { + min-height: 0px; + padding-left: 0px; } } - .btn { - height: 19px; - width: 19px; - } } diff --git a/app/assets/stylesheets/publisher_blueprint.css.scss b/app/assets/stylesheets/publisher_blueprint.css.scss new file mode 100644 index 000000000..23e3a94ca --- /dev/null +++ b/app/assets/stylesheets/publisher_blueprint.css.scss @@ -0,0 +1,316 @@ +#publisher { + z-index: 1; + color: $text-grey; + position: relative; + margin-top: 0; + margin-bottom: 0; + padding: 0 12px 22px 12px; + top: 0; + border-bottom: 1px #eee solid; + + form { + textarea { + resize: none; + height: 50px; + margin: 0; + } + } + + &.mention_popup { + padding: 1px 12px; + margin-bottom: 0; + border-bottom: none; + } + + &.closed { + .options_and_submit { + display: none !important; + } + + .counter { + display: none; + } + } + + &:not(.closed) { + textarea { + margin-bottom: 30px; + } + } + + .mentions-autocomplete-list ul { + width: 483px; + } + + .options_and_submit { + min-height: 21px; + clear: both; + position: relative; + padding-top: 6px; + margin-bottom: -2px; + + input { + display: inline; + } + + .public_toggle { + text-align: right; + .dropdown { + text-align: left; + } + + .icons-monotone_wrench_settings { + display: inline-block; + width: 16px; + height: 16px; + } + + a.question_mark { + text-decoration: none; + } + } + + #publisher_service_icons { + position: relative; + top: 3px; + margin-right: 10px; + + .social_media_logos-facebook-16x16, + .social_media_logos-twitter-16x16, + .social_media_logos-tumblr-16x16, + .social_media_logos-wordpress-16x16, + .social_media_logos-email-16x16, + .social_media_logos-feed-16x16, + .social_media_logos-website-16x16 { + display: inline-block; + height: 16px; + width: 16px; + } + } + + #fileInfo { + display: inline; + position: relative; + top: -2px; + } + } + + #status_message_fake_text { + min-height: 20px; + } + + .content_creation { + margin-top: 1em; + } + + #file-upload { + bottom: 1px !important; + display: inline-block; + margin: 0; + padding: .3em .3em 3px; + position: absolute !important; + right: 6px; + cursor: pointer; + + input[type='file'] { + cursor: pointer; + right: initial !important; + height: 100%; + width: 100%; + &::-webkit-file-upload-button { + cursor: pointer; + } + } + + img { + @include opacity(0.4); + vertical-align: bottom; + } + + &:hover { + color: $text-dark-grey; + cursor: pointer; + + img { + @include opacity(0.8); + } + } + + &:active { + color: #444; + text-shadow: 0 1px 0 #fafafa; + + img { + @include opacity(1); + } + } + + &.loading { + @include opacity(0.5); + } + } +} + +#publisher_textarea_wrapper { + #hide_publisher { + @include opacity(0.3); + z-index: 5; + padding: 3px; + position: absolute; + right: 6px; + margin-top: 9px; + + .icons-deletelabel { + height: 14px; + width: 14px; + } + + &:hover { + @include opacity(1); + } + } + + .markdownIndications { + position: absolute; + bottom: 0px; + } + + @include border-radius(2px); + + border: 1px solid #ccc; + background: #fff; + + &.active { + border: 1px solid $border-dark-grey; + } + + position: relative; + padding-right: 10px; + + textarea { + z-index: 2; + border: none; + + &:focus { + outline: 0; + background: transparent; + } + } + + &.with_attachments { + padding-bottom: 38px; + } + + #photodropzone { + z-index: 3; + position: absolute; + bottom: 15px; + right: 35px; + width: 430px; + left: 5px; + padding: 0; + + li { + display: inline-block; + margin-right: 4px; + img { + width: 50px; + max-height: 55px; + } + .circle { + @include border-radius(20px); + + display: none; + z-index: 1; + position: absolute; + right: -7px; + top: -5px; + background-color: #333; + + width: 20px; + max-width: 20px; + height: 20px; + max-height: 20px; + border: 1px solid #fff; + } + + .x { + display: none; + z-index: 2; + position: absolute; + top: -3px; + right: -1px; + font-size: small; + font-weight: bold; + &:before { + content: 'X'; + } + } + + &:hover { + cursor: default; + .circle { + display: block; + } + .x { + display: block; + } + } + } + } + + .counter { + position: absolute; + font-size: 13px; + padding: 12px 0 0 5px; + } + .warning { + color: orange; + } + .exceeded { + color: red; + } +} + +#publisher.closed { + #publisher_textarea_wrapper #hide_publisher, + .markdownIndications { + display: none; + } +} + +#publisher_photo_upload { + position: absolute; + display: inline; + left: 600px; + top: 0; + z-index: 10; +} + +#publisher-images { + padding-left: 5px; + + #locator { + bottom: 1px !important; + display: inline-block; + margin: 0; + position: absolute !important; + right: 30px; + cursor: pointer; + img { + padding-top: 2px; + @include opacity(0.4); + } + &:hover { + color: $text-dark-grey; + cursor: pointer; + img { + @include opacity(0.8); + } + } + } + .btn { + height: 19px; + width: 19px; + } +} diff --git a/app/assets/templates/aspects-dropdown_tpl.jst.hbs b/app/assets/templates/aspects-dropdown_tpl.jst.hbs deleted file mode 100644 index d5d74a482..000000000 --- a/app/assets/templates/aspects-dropdown_tpl.jst.hbs +++ /dev/null @@ -1,27 +0,0 @@ -
    - - - - -
    - - - diff --git a/app/controllers/status_messages_controller.rb b/app/controllers/status_messages_controller.rb index 119442805..772a80c2a 100644 --- a/app/controllers/status_messages_controller.rb +++ b/app/controllers/status_messages_controller.rb @@ -7,6 +7,8 @@ class StatusMessagesController < ApplicationController before_filter :remove_getting_started, :only => [:create] + before_filter -> { @css_framework = :bootstrap }, :only => [:bookmarklet] + respond_to :html, :mobile, :json diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 312b63fda..354c09fed 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -25,7 +25,7 @@ module ApplicationHelper raw_bookmarklet end - def raw_bookmarklet( height = 250, width = 620) + def raw_bookmarklet( height = 400, width = 620) "javascript:(function(){f='#{AppConfig.pod_uri.to_s}bookmarklet?url='+encodeURIComponent(window.location.href)+'&title='+encodeURIComponent(document.title)+'¬es='+encodeURIComponent(''+(window.getSelection?window.getSelection():document.getSelection?document.getSelection():document.selection.createRange().text))+'&v=1&';a=function(){if(!window.open(f+'noui=1&jump=doclose','diasporav1','location=yes,links=no,scrollbars=no,toolbar=no,width=#{width},height=#{height}'))location.href=f+'jump=yes'};if(/Firefox/.test(navigator.userAgent)){setTimeout(a,0)}else{a()}})()" end diff --git a/app/views/conversations/_show.haml b/app/views/conversations/_show.haml index 8a21e4fda..4609379fd 100644 --- a/app/views/conversations/_show.haml +++ b/app/views/conversations/_show.haml @@ -27,4 +27,4 @@ .bd = form_for [conversation, Message.new] do |message| = message.text_area :text, :class => 'span12', :rows => 5, :tabindex => 1 - = message.submit t('.reply').capitalize, 'data-disable-with' => t('.replying'), :class => 'btn btn-primary', :tabindex => 2 + = message.submit t('.reply').capitalize, 'data-disable-with' => t('.replying'), :class => 'btn btn-primary creation', :tabindex => 2 diff --git a/app/views/shared/_publisher.html.haml b/app/views/shared/_publisher.html.haml index bfcb82c02..4fe878732 100644 --- a/app/views/shared/_publisher.html.haml +++ b/app/views/shared/_publisher.html.haml @@ -8,86 +8,190 @@ if( app.publisher ) app.publisher.triggerGettingStarted(); }); -#publisher{:class => ((aspect == :profile || publisher_open) ? "mention_popup" : "closed")} - .content_creation - = form_for(StatusMessage.new) do |status| - = status.error_messages - %div +-unless defined?(bootstrap).nil? + .row-fluid#publisher{:class => ((aspect == :profile || publisher_open) ? "mention_popup" : "closed")} + .content_creation + = form_for(StatusMessage.new) do |status| + = status.error_messages %params #publisher_textarea_wrapper - = link_to(content_tag(:div, nil, :class => 'icons-deletelabel'), "#", :id => "hide_publisher", :title => t('.discard_post')) - %ul#photodropzone - if current_user.getting_started? = status.text_area :fake_text, :rows => 2, :value => h(publisher_formatted_text), :tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}...", - :title => popover_with_close_html( '1. ' + t('shared.public_explain.share') ), + 'data-title' => popover_with_close_html( '1. ' + t('shared.public_explain.share') ), 'data-content' => t('shared.public_explain.new_user_welcome_message') - else = status.text_area :fake_text, :rows => 2, :value => h(publisher_formatted_text), :tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}..." = status.hidden_field :text, :value => h(publisher_hidden_text), :class => 'clear_on_submit' - #publisher-images - %span.markdownIndications + .row-fluid#photodropzone_container + %ul#photodropzone + .row-fluid#location_container + = hidden_field :location, :coords + .row-fluid#button_container + #publisher-images.pull-right + #file-upload.btn.btn-link{:title => t('.upload_photos')} + %i.entypo.camera.publisher_image + #locator.btn.btn-link{:title => t('.get_location')} + %i.entypo.location.publisher_image + #hide_location.btn.btn-link{:title => t('.remove_location')} + %i.entypo.cross.publisher_image + %span.help-block.markdownIndications != t('.formatWithMarkdown', markdown_link: link_to(t('help.markdown'), 'https://diasporafoundation.org/formatting', target: :blank)) - #locator.btn{:title => t('.get_location')} - = image_tag 'icons/marker.png', :alt => t('.get_location').titleize, :class => 'publisher_image' - #file-upload.btn{:title => t('.upload_photos')} - = image_tag 'icons/camera.png', :alt => t('.upload_photos').titleize, :class => 'publisher_image' - = hidden_field :location, :coords - - if publisher_public - = hidden_field_tag 'aspect_ids[]', "public" - - elsif all_aspects_selected?(selected_aspects) - = hidden_field_tag 'aspect_ids[]', "all_aspects" - - else - - for aspect_id in aspect_ids - = hidden_field_tag 'aspect_ids[]', aspect_id.to_s + - if publisher_public + = hidden_field_tag 'aspect_ids[]', "public" + - elsif all_aspects_selected?(selected_aspects) + = hidden_field_tag 'aspect_ids[]', "all_aspects" + - else + - for aspect_id in aspect_ids + = hidden_field_tag 'aspect_ids[]', aspect_id.to_s - .options_and_submit - .public_toggle - %span#publisher_service_icons - - if current_user.services - - for service in current_user.services - = content_tag :div, nil, - :title => "#{service.provider.titleize} (#{service.nickname})", - :class => "social_media_logos-#{service.provider}-16x16 service_icon dim", - :id => "#{service.provider}", - :maxchar => "#{service.class::MAX_CHARACTERS}", - :data => {:toggle=>'tooltip', :placement=>'bottom'} - %a{ :href => "#question_mark_pane", :class => 'question_mark', :rel => 'facebox', :title => t('shared.public_explain.manage') } - .icons-monotone_wrench_settings + .row-fluid.options_and_submit + .public_toggle + %button.btn.btn-default.pull-left#hide_publisher{:title => t('.discard_post')} + =t('cancel') + + .btn-toolbar.pull-right + %span#publisher_service_icons + - if current_user.services + - for service in current_user.services + .btn.btn-link.service_icon.dim{ :title => "#{service.provider.titleize} (#{service.nickname})", :id => "#{service.provider}", :maxchar => "#{service.class::MAX_CHARACTERS}", :data => {:toggle=>'tooltip', :placement=>'bottom'} } + -if service.provider == 'wordpress' + %span.social_media_logos-wordpress-16x16 + -else + %i.entypo.small{ :class => service.provider } + %a.btn.btn-link{ :href => "#question_mark_pane", :class => 'question_mark', :rel => 'facebox', :title => t('shared.public_explain.manage') } + %i.entypo.small.cog + .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 + = 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) + %span.caret + %ul.dropdown-menu.pull-right{:unSelectable => 'on', 'data-person_id' => (person.id if defined?(person) && person), 'data-service_uid' => (service_uid if defined?(service_uid))} + + %li.public.radio{"data-aspect_id" => "public", :class => ("selected" if publisher_public)} + %a + %span.status_indicator + %i.icon-ok + %span.text + = t('public') + %li.all_aspects.radio{"data-aspect_id" => "all_aspects", :class => ("selected" if (!publisher_public && all_aspects_selected?(selected_aspects)))} + %a + %span.status_indicator + %i.icon-ok + %span.text + = t('all_aspects') + %li.divider + - for aspect in all_aspects + %li.aspect_selector{ 'data-aspect_id' => aspect.id, :class => !all_aspects_selected?(selected_aspects) && selected_aspects.include?(aspect) ? "selected" : "" } + %a + %span.status_indicator + %i.icon-ok + %span.text + = aspect.name - .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 + %button{ :disabled => ("disabled" if publisher_hidden_text.blank?), :class => 'btn btn-default post_preview_button'} + = t('.preview') + + = status.submit t('.share'), :disabled => publisher_hidden_text.blank?, :class => 'btn btn-primary creation', :tabindex => 2 + + .facebox_content + #question_mark_pane + = render 'shared/public_explain' + = link_to '', contacts_path(:aspect_ids => aspect_ids), :class => 'selected_contacts_link hidden' + + + #publisher_photo_upload + +- else + #publisher{:class => ((aspect == :profile || publisher_open) ? "mention_popup" : "closed")} + .content_creation + = form_for(StatusMessage.new) do |status| + = status.error_messages + %div + %params + #publisher_textarea_wrapper + = link_to(content_tag(:div, nil, :class => 'icons-deletelabel'), "#", :id => "hide_publisher", :title => t('.discard_post')) + %ul#photodropzone + - if current_user.getting_started? + = status.text_area :fake_text, :rows => 2, :value => h(publisher_formatted_text), :tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}...", + :title => popover_with_close_html( '1. ' + t('shared.public_explain.share') ), + 'data-content' => t('shared.public_explain.new_user_welcome_message') - else - = t('shared.aspect_dropdown.toggle', :count => selected_aspects.size) - ▼ + = status.text_area :fake_text, :rows => 2, :value => h(publisher_formatted_text), :tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}..." + = status.hidden_field :text, :value => h(publisher_hidden_text), :class => 'clear_on_submit' - .wrapper - %ul.dropdown_list{:unSelectable => 'on', 'data-person_id' => (person.id if defined?(person) && person), 'data-service_uid' => (service_uid if defined?(service_uid))} - %li.public.radio{"data-aspect_id" => "public", :class => ("selected" if publisher_public)} + #publisher-images + %span.markdownIndications + != t('.formatWithMarkdown', markdown_link: link_to(t('help.markdown'), 'https://diasporafoundation.org/formatting', target: :blank)) + #locator.btn{:title => t('.get_location')} + = image_tag 'icons/marker.png', :alt => t('.get_location').titleize, :class => 'publisher_image' + #file-upload.btn{:title => t('.upload_photos')} + = image_tag 'icons/camera.png', :alt => t('.upload_photos').titleize, :class => 'publisher_image' + = hidden_field :location, :coords + #location_container + + - if publisher_public + = hidden_field_tag 'aspect_ids[]', "public" + - elsif all_aspects_selected?(selected_aspects) + = hidden_field_tag 'aspect_ids[]', "all_aspects" + - else + - for aspect_id in aspect_ids + = hidden_field_tag 'aspect_ids[]', aspect_id.to_s + + .options_and_submit + .public_toggle + %span#publisher_service_icons + - if current_user.services + - for service in current_user.services + = content_tag :div, nil, + :title => "#{service.provider.titleize} (#{service.nickname})", + :class => "social_media_logos-#{service.provider}-16x16 service_icon dim", + :id => "#{service.provider}", + :maxchar => "#{service.class::MAX_CHARACTERS}", + :data => {:toggle=>'tooltip', :placement=>'bottom'} + %a{ :href => "#question_mark_pane", :class => 'question_mark', :rel => 'facebox', :title => t('shared.public_explain.manage') } + .icons-monotone_wrench_settings + + .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') - - %li.divider.all_aspects.radio{:style => "padding-bottom: 5px; border-bottom: 1px solid #ddd;", "data-aspect_id" => "all_aspects", :class => ("selected" if (!publisher_public && all_aspects_selected?(selected_aspects)))} + - 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) + ▼ - - for aspect in all_aspects - = aspect_dropdown_list_item(aspect, !all_aspects_selected?(selected_aspects) && selected_aspects.include?(aspect) ) + .wrapper + %ul.dropdown_list{:unSelectable => 'on', 'data-person_id' => (person.id if defined?(person) && person), 'data-service_uid' => (service_uid if defined?(service_uid))} + %li.public.radio{"data-aspect_id" => "public", :class => ("selected" if publisher_public)} + = t('public') - %button{ :disabled => ("disabled" if publisher_hidden_text.blank?), :class => 'button post_preview_button'} - = t('.preview') + %li.divider.all_aspects.radio{:style => "padding-bottom: 5px; border-bottom: 1px solid #ddd;", "data-aspect_id" => "all_aspects", :class => ("selected" if (!publisher_public && all_aspects_selected?(selected_aspects)))} + = t('all_aspects') - = status.submit t('.share'), :disabled => publisher_hidden_text.blank?, :class => 'button creation', :tabindex => 2 + - for aspect in all_aspects + = aspect_dropdown_list_item(aspect, !all_aspects_selected?(selected_aspects) && selected_aspects.include?(aspect) ) - .facebox_content - #question_mark_pane - = render 'shared/public_explain' - = link_to '', contacts_path(:aspect_ids => aspect_ids), :class => 'selected_contacts_link hidden' + %button{ :disabled => ("disabled" if publisher_hidden_text.blank?), :class => 'button post_preview_button'} + = t('.preview') + + = status.submit t('.share'), :disabled => publisher_hidden_text.blank?, :class => 'button creation', :tabindex => 2 + + .facebox_content + #question_mark_pane + = render 'shared/public_explain' + = link_to '', contacts_path(:aspect_ids => aspect_ids), :class => 'selected_contacts_link hidden' - #publisher_photo_upload + #publisher_photo_upload diff --git a/app/views/status_messages/bookmarklet.html.haml b/app/views/status_messages/bookmarklet.html.haml index 485c8fa4a..1abb4eb93 100644 --- a/app/views/status_messages/bookmarklet.html.haml +++ b/app/views/status_messages/bookmarklet.html.haml @@ -4,11 +4,11 @@ = javascript_include_tag :home -#new_status_message_pane - .span-15.last +.container-fluid#bookmarklet + .row-fluid %h4 =t('bookmarklet.post_something') - = render :partial => 'shared/publisher', :locals => { :aspect => :profile, :selected_aspects => @aspects, :aspect_ids => @aspect_ids } + = render :partial => 'shared/publisher', :locals => { :aspect => :profile, :selected_aspects => @aspects, :aspect_ids => @aspect_ids, :bootstrap => 'true' } :javascript app.publisher = new app.views.Publisher({ @@ -36,11 +36,5 @@ $("#publisher #status_message_fake_text").val(contents); $("#publisher #status_message_text").val(contents); $('input.button')[0].removeAttribute('disabled'); + $('#publisher #publisher_textarea_wrapper').addClass('active'); }); - -- content_for(:head) do - :css - body { padding:0; margin-top: 0; } - .container { width: auto; } - #new_status_message_pane { margin: 1em 0 0; } - #new_status_message_pane h4 { margin: 0 0 0 1em; } diff --git a/config/locales/diaspora/en.yml b/config/locales/diaspora/en.yml index 3c578062b..da034df9b 100644 --- a/config/locales/diaspora/en.yml +++ b/config/locales/diaspora/en.yml @@ -1015,6 +1015,7 @@ en: all: "all" upload_photos: "Upload photos" get_location: "Get your location" + remove_location: "Remove location" all_contacts: "all contacts" share_with: "share with" whats_on_your_mind: "What's on your mind?" diff --git a/spec/javascripts/app/views/aspects_dropdown_view_spec.js b/spec/javascripts/app/views/aspects_dropdown_view_spec.js new file mode 100644 index 000000000..aa79c32da --- /dev/null +++ b/spec/javascripts/app/views/aspects_dropdown_view_spec.js @@ -0,0 +1,137 @@ +describe("app.views.AspectsDropdown", function(){ + beforeEach(function() { + spec.content().html( + '
    '+ + ' '+ + ' '+ + '
    ' + ); + + this.view = new app.views.AspectsDropdown({el: spec.content()}); + }); + + context('_toggleCheckbox', function() { + beforeEach(function() { + this.view.$('li.selected').removeClass('selected'); + this.view.$('li.all_aspects.radio').addClass('selected'); + }); + + it('deselects all radio buttons', function() { + this.view._toggleCheckbox(this.view.$('li.aspect_selector:eq(0)')); + expect(this.view.$('li.all_aspects.radio').hasClass('selected')).toBeFalsy(); + }); + + it('selects the clicked aspect', function() { + this.view._toggleCheckbox(this.view.$('li.aspect_selector:eq(0)')); + expect(this.view.$('li.aspect_selector:eq(0)').hasClass('selected')).toBeTruthy(); + }); + + it('selects multiple aspects', function() { + this.view._toggleCheckbox(this.view.$('li.aspect_selector:eq(0)')); + this.view._toggleCheckbox(this.view.$('li.aspect_selector:eq(1)')); + expect(this.view.$('li.aspect_selector:eq(0)').hasClass('selected')).toBeTruthy(); + expect(this.view.$('li.aspect_selector:eq(1)').hasClass('selected')).toBeTruthy(); + }); + }); + + context('_toggleRadio', function(){ + beforeEach(function() { + this.view.$('li.selected').removeClass('selected'); + this.view.$('li.aspect_selector:eq(0)').addClass('selected'); + this.view.$('li.aspect_selector:eq(1)').addClass('selected'); + }); + + it('deselects all checkboxes', function() { + this.view._toggleRadio(this.view.$('li.all_aspects.radio')); + expect(this.view.$('li.aspect_selector:eq(0)').hasClass('selected')).toBeFalsy(); + expect(this.view.$('li.aspect_selector:eq(1)').hasClass('selected')).toBeFalsy(); + }); + + it('toggles the clicked radio buttons', function() { + this.view._toggleRadio(this.view.$('li.all_aspects.radio')); + expect(this.view.$('li.all_aspects.radio').hasClass('selected')).toBeTruthy(); + expect(this.view.$('li.public.radio').hasClass('selected')).toBeFalsy(); + this.view._toggleRadio(this.view.$('li.public.radio')); + expect(this.view.$('li.all_aspects.radio').hasClass('selected')).toBeFalsy(); + expect(this.view.$('li.public.radio').hasClass('selected')).toBeTruthy(); + this.view._toggleRadio(this.view.$('li.all_aspects.radio')); + expect(this.view.$('li.all_aspects.radio').hasClass('selected')).toBeTruthy(); + expect(this.view.$('li.public.radio').hasClass('selected')).toBeFalsy(); + }); + }); + + context('_selectAspects', function(){ + beforeEach(function() { + this.view.$('li.selected').removeClass('selected'); + this.view.$('li.aspect_selector:eq(0)').addClass('selected'); + }); + + it('select aspects in the dropdown by a given list of ids', function() { + this.ids = [12,'public']; + this.view._selectAspects(this.ids); + expect(this.view.$('li.all_aspects.radio').hasClass('selected')).toBeFalsy(); + expect(this.view.$('li.public.radio').hasClass('selected')).toBeTruthy(); + expect(this.view.$('li.aspect_selector:eq(0)').hasClass('selected')).toBeFalsy(); + expect(this.view.$('li.aspect_selector:eq(1)').hasClass('selected')).toBeTruthy(); + }); + }); + + context('_updateButton', function() { + beforeEach(function() { + this.view.$('li.selected').removeClass('selected'); + }); + + it('shows "Select aspects" when nothing is selected', function() { + this.view._updateButton('inAspectClass'); + expect(this.view.$('.btn.dropdown-toggle > .text').text()).toContain(Diaspora.I18n.t('aspect_dropdown.select_aspects')); + }); + + it('shows the name of the selected radio button', function() { + this.view.$('li.all_aspects.radio').addClass('selected'); + this.view._updateButton('inAspectClass'); + expect(this.view.$('.btn.dropdown-toggle > .text').text()).toContain(Diaspora.I18n.t('aspect_dropdown.all_aspects')); + }); + + it('shows the name of the selected aspect ( == 1 )', function() { + this.view.$('li.aspect_selector:eq(1)').addClass('selected'); + this.view._updateButton('inAspectClass'); + expect(this.view.$('.btn.dropdown-toggle > .text').text()).toContain("Aspect 12"); + }); + + it('shows the number of selected aspects ( > 1)', function() { + this.view.$('li.aspect_selector:eq(0)').addClass('selected'); + this.view.$('li.aspect_selector:eq(1)').addClass('selected'); + this.view._updateButton('inAspectClass'); + expect(this.view.$('.btn.dropdown-toggle > .text').text()).toContain(Diaspora.I18n.t('aspect_dropdown.toggle', { 'count':2 })); + }); + }); +}); diff --git a/spec/javascripts/app/views/publisher_view_spec.js b/spec/javascripts/app/views/publisher_view_spec.js index 02b3ac2bb..fb753f01f 100644 --- a/spec/javascripts/app/views/publisher_view_spec.js +++ b/spec/javascripts/app/views/publisher_view_spec.js @@ -290,7 +290,7 @@ describe("app.views.Publisher", function() { it("Show location", function(){ // inserts location to the DOM; it is the location's view element - setFixtures('
    '); + setFixtures('
    '); // creates a fake Locator OSM = {};