Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: diaspora/diaspora
...
head fork: diaspora/diaspora
Checking mergeability… Don't worry, you can still create the pull request.
  • 10 commits
  • 22 files changed
  • 0 commit comments
  • 4 contributors
Showing with 945 additions and 868 deletions.
  1. +5 −3 app/assets/javascripts/app/models/post.js
  2. +19 −2 app/assets/javascripts/app/views/post/mood_view.js
  3. +10 −0 app/assets/javascripts/app/views/post_view.js
  4. +1 −1  app/assets/javascripts/app/views/template_picker_view.js
  5. +4 −836 app/assets/stylesheets/new-templates.css.scss
  6. +295 −0 app/assets/stylesheets/new_styles/_base.scss
  7. +27 −0 app/assets/stylesheets/new_styles/_composer.scss
  8. +311 −0 app/assets/stylesheets/new_styles/_interactions.scss
  9. +115 −0 app/assets/stylesheets/new_styles/_new_mixins.scss
  10. 0  app/assets/stylesheets/new_styles/_other.scss
  11. +71 −0 app/assets/stylesheets/new_styles/_viewer_nav.scss
  12. +0 −9 app/assets/templates/post-viewer/content/status-with-photo-backdrop.jst.hbs
  13. +8 −0 app/assets/templates/wallpaper-mood.jst.hbs
  14. +1 −1  app/views/layouts/application.mobile.haml
  15. +1 −2  app/views/shared/_post_info.mobile.haml
  16. +1 −1  app/views/users/public.atom.builder
  17. +1 −0  config/locales/diaspora/en.yml
  18. +29 −13 features/step_definitions/trumpeter_steps.rb
  19. +10 −0 features/trumpeter.feature
  20. +10 −0 spec/controllers/users_controller_spec.rb
  21. +12 −0 spec/javascripts/app/views/post/newspaper_spec.js
  22. +14 −0 spec/javascripts/app/views/post/wallpaper_view_spec.js
View
8 app/assets/javascripts/app/models/post.js
@@ -93,13 +93,13 @@ app.models.Post = Backbone.Model.extend({
headline : function() {
var headline = this.get("text").trim()
- , newlineIdx = headline.lastIndexOf("\n")
+ , newlineIdx = headline.indexOf("\n")
return (newlineIdx > 0 ) ? headline.substr(0, newlineIdx) : headline
},
body : function(){
var body = this.get("text").trim()
- , newlineIdx = body.lastIndexOf("\n")
+ , newlineIdx = body.indexOf("\n")
return (newlineIdx > 0 ) ? body.substr(newlineIdx+1, body.length) : ""
}
}, {
@@ -107,7 +107,9 @@ app.models.Post = Backbone.Model.extend({
frameMoods : [
"Day",
- "Night"
+ "Night",
+ "Wallpaper",
+ "Newspaper"
],
legacyTemplateNames : [
View
21 app/assets/javascripts/app/views/post/mood_view.js
@@ -33,5 +33,22 @@ app.views.Post.Day = app.views.Post.Mood.extend({
})
app.views.Post.Night = app.views.Post.Mood.extend({
- mood : "night"
-})
+ mood : "night",
+})
+
+app.views.Post.Newspaper = app.views.Post.Mood.extend({
+ mood : "newspaper"
+})
+
+app.views.Post.Wallpaper = app.views.Post.Mood.extend({
+ mood : "wallpaper",
+ templateName : "wallpaper-mood",
+
+
+ presenter : function(){
+ var backgroundPhoto = _.first(this.model.get("photos") || [])
+ return _.extend(app.views.Post.Mood.prototype.presenter.call(this), {
+ backgroundUrl : backgroundPhoto && backgroundPhoto.sizes.large
+ })
+ }
+})
View
10 app/assets/javascripts/app/views/post_view.js
@@ -21,6 +21,16 @@ app.views.Post = app.views.StreamObject.extend({
showFactory : function(model) {
var frameName = model.get("frame_name");
+ //translate obsolete template names to the new Moods, should be removed when template picker comes cliente side.
+ var map = {
+ 'status-with-photo-backdrop' : 'Wallpaper',
+ 'status' : 'Day',
+ 'note' : 'Newspaper',
+ 'photo-backdrop' : 'Day'
+ }
+
+ frameName = map[frameName] || frameName
+
if(_.include(app.models.Post.legacyTemplateNames, frameName)){
return legacyShow(model)
} else {
View
2  app/assets/javascripts/app/views/template_picker_view.js
@@ -19,7 +19,7 @@ app.views.TemplatePicker = app.views.Base.extend({
presenter : function() {
return _.extend(this.defaultPresenter(), {
- templates : _.union(app.models.Post.frameMoods, _.without(app.models.Post.legacyTemplateNames, ["status"]))
+ templates : _.union(app.models.Post.frameMoods, _.without(app.models.Post.legacyTemplateNames, ["status", "status-with-photo-backdrop", "photo-backdrop", "activity-streams-photo", "note"])) //subtract re-implemented templates
})
}
})
View
840 app/assets/stylesheets/new-templates.css.scss
@@ -1,836 +1,4 @@
-
-/* variables */
-
-$light-grey: #999;
-$pane-width: 420px;
-$night-background-color : #333;
-$night-text-color : #999;
-
-
-/* mixins */
-@mixin center($orient:vertical) {
- display: -webkit-box;
- -webkit-box-orient: $orient;
- -webkit-box-pack: center;
- -webkit-box-align: center;
-
- display: -moz-box;
- -moz-box-orient: $orient;
- -moz-box-pack: center;
- -moz-box-align: center;
-
- display: box;
- box-orient: $orient;
- box-pack: center;
- box-align: center;
-}
-
-@mixin box-shadow($left, $top, $blur, $color) {
- -webkit-box-shadow: $left $top $blur $color;
- -moz-box-shadow: $left $top $blur $color;
- box-shadow: $left $top $blur $color;
-}
-
-@mixin pane-width() {
- width: $pane-width;
- max-width: 100%;
-}
-
-@mixin background-cover() {
- background: no-repeat center center fixed;
- -webkit-background-size: cover;
- -moz-background-size: cover;
- -o-background-size: cover;
- background-size: cover;
-}
-
-@mixin opacity($val) {
- -moz-opacity: $val;
- filter:alpha(opacity=$val*100);
- opacity: $val;
-}
-
-@mixin border-radius($top:3px, $bottom:$top) {
- -webkit-border-radius: $top $top $bottom $bottom;
- -moz-border-radius: $top $top $bottom $bottom;
- border-radius: $top $top $bottom $bottom;
-}
-
-@mixin transition($type, $speed:0.2s) {
- -o-transition: $type $speed;
- -moz-transition: $type $speed;
- -webkit-transition: $type $speed;
- transition: $type $speed;
-}
-
-@mixin animation($name, $speed:0.2s, $easing:ease-in-out) {
- -webkit-animation: $name $speed $easing;
- -moz-animation: $name $speed $easing;
- -ms-animation: $name $speed $easing;
-}
-
-@mixin info-container() {
- @include box-shadow(0, 6px, 20px, #000);
- @include border-radius(3px, 0px);
- @include dark-hatched-bg();
- @include pane-width();
-
- display: inline-block;
- position: relative;
-
- border-top: 1px solid #555;
- border-right: 1px solid #444;
- border-left: 1px solid #444;
-
- padding-top: 25px;
-
- color: #ddd;
-
- /* webkit acceleration */
- -webkit-transform: translateZ(0);
-}
-
-@mixin dark-hatched-bg() {
- background-color: #444;
- background-image: image-url("hatched-bg-dark.png");
-}
-
-@mixin photo-shadow() {
- @include box-shadow(0, 3px, 15px, #999);
-}
-
-@mixin media-text() {
- font: {
- weight: bold;
- size: 2em;
- }
-
- line-height: 2em;
- padding-bottom: 0;
- margin-bottom: 0;
-}
-
-/* bootstrap extentions */
-.icon-red {
- background-image: image-url("img/glyphicons-halflings-red.png");
-}
-
-.icon-green {
- background-image: image-url("img/glyphicons-halflings-green.png");
-}
-
-.icon-blue {
- background-image: image-url("img/glyphicons-halflings-blue.png");
-}
-
-/* styles */
-.multi-photo {
- display: table;
-
- p {
- @include media-text();
- }
-
- .img-bounding-box {
- display: table-cell;
- text-align: center;
- vertical-align: middle;
-
- padding: 20px;
- height: 400px;
- width: 300px;
- }
-
- img {
- @include photo-shadow();
-
- max-width: 100%;
- max-height: 100%;
- }
-}
-
-.photoset {
- @include center(horizontal);
- width: 100%;
-}
-
-.note-content {
- min-width: 250px;
- width: 90%;
- max-width: 550px;
- padding-bottom: 2em;
- display: inline-block;
- text-align: left;
-
- p {
- font-size: 1.25em;
- line-height: 1.5em;
- font-family: Palatino, times, georgia, serif;
- margin-bottom: 1em;
- padding: 0 5%;
- }
-}
-
-.status,
-.status-with-photo-backdrop
-{
- p {
- @include media-text();
- }
-}
-
-.status-with-photo-backdrop {
- p {
- color: #fff;
-
- a {
- @include transition(background-color, 0.3s);
-
- color: #000;
- background-color: #fff;
- background-color: rgba(255,255,255,0.7);
- padding: 0 5px;
-
- &:hover {
- text-decoration: none;
- background-color: #fff;
- background-color: rgba(255,255,255,1);
- }
- }
- }
-}
-
-.darken {
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- background-color: rgba(0,0,0,0.3);
-
- display: table;
-
- .darken-content {
- display: table-cell;
- vertical-align: middle;
- text-align: center;
-
- padding: 70px 10%;
-
- height: 100%;
- width: 100%;
- }
-}
-
-.post {
- display: table-cell;
- vertical-align: middle;
- text-align: center;
-}
-
-.photo-fill {
- @include background-cover();
- z-index : -5000; //so the framer controls don't get lost
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
-}
-
-.photo-backdrop {
- p {
- color: #fff;
- z-index: 2;
- }
-
- img {
- position: relative;
- }
-
- .photo-fill {
- @include opacity(0.2)
- }
-}
-
-.rich-media {
- z-index : -5000; //so the framer controls don't get lost
- position: absolute;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
-
- text-align: center;
- background-color: $night-background-color;
-
- p {
- @include media-text();
- color: #999;
-
- a {
- font-weight: normal;
- font-size: smaller;
- }
- }
-
- iframe {
- @include box-shadow(0, 3px, 15px, #000);
-
- width: 857px;
- height: 480px;
- max-width: 100%;
- max-height: 100%;
- }
-}
-
-.rich-media-container {
- display: table;
- height: 100%;
- width: 100%;
-}
-
-.rich-media-container2 {
- display: table-cell;
- vertical-align: middle;
-}
-
-#post-nav {
- @include transition(opacity, 0.5s);
- @include opacity(1);
-}
-
-body.idle {
- #post-nav {
- @include opacity(0);
-
- .nav-arrow{
- &.right {
- margin-right: -40px;
- }
-
- &.left {
- margin-left: -40px;
- }
- }
-
- }
-}
-
-.nav-arrow {
- @include opacity(0.8);
- @include transition(all, 0.3s);
-
- display: table;
-
- position: fixed;
- height: 100%;
- z-index: 3;
- top: 0;
- padding: 0 1.2%;
-
- background-color: rgba(0,0,0,0);
-
- .nav-arrow-inner {
- padding: 0; margin: 0;
- display: table-cell;
- vertical-align: middle;
- }
-
- img {
- @include opacity(0.5);
-
- height: 30px;
- width: 30px;
-
- /* half the size of the nav arrows on mobile phones */
- @media (max-width: 480px) {
- height: 15px;
- width: 15px;
- }
- }
-
- &.left {
- left: 0;
- padding-right: 19px;
- }
-
- &.right {
- right: 0;
- padding-left: 19px;
- }
-
- &:hover {
- background-color: rgba(0,0,0,0.1)
- }
-}
-
-.header {
-
- position: fixed;
-
- /* position absolute for mobile */
- @media (max-width: 480px) {
- position: absolute !important;
- }
-
- top: 0;
- left: 0;
- z-index: 10;
- width: 100%;
- overflow-x: hidden;
-}
-
-#header-container {
- padding: 1.2%;
-
- /* don't pad the header if we're mobile */
- @media (max-width: 480px) {
- padding: 0 !important;
- }
-}
-
-.avatar {
- &.micro {
- height: 20px;
- width: 20px;
- }
-
- &.small {
- height: 35px;
- width: 35px;
- }
-}
-
-.author-name {
- color: inherit;
- font-weight: bold;
-}
-
-#post-author {
- @include border-radius();
-
- border: 1px solid rgba(255,255,255,0.2);
- border-top: 1px solid rgba(255,255,255,0.5);
-
- float: left;
- margin: 0;
-
- padding: 5px;
- padding-right: 10px;
-
- background-color: rgba(255,255,255,0.6);
-
- /* don't pad the header if we're mobile */
- @media (max-width: 480px) {
- @include border-radius(0);
- background-color: rgba(255,255,255,0.4);
- width: 100% !important;
- border: none !important;
- padding: none !important;
- }
-
- max-height: 35px;
-
- .avatar {
- @include border-radius();
- }
-
- .post-time,
- .icon-retweet {
- color: #000;
- @include opacity(0.5);
- }
-}
-
-#post-interactions {
- position: fixed;
- width: 100%;
- bottom: 0;
- left: 0;
- text-align: center;
- z-index: 100;
-}
-
-#post-reactions {
- height: 80%;
- max-height: 350px;
- overflow: auto;
- margin-top: 5px;
-}
-
-#post-info,
-#post-info-sneaky {
- text-align: center;
- z-index: 10;
-
- margin-top: -33px;
-
- #post-info-container {
- @include info-container();
- }
-
- .well {
- -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,0.10);
- -moz-box-shadow: inset 0 2px 2px rgba(0,0,0,0.10);
- box-shadow: inset 0 2px 2px rgba(0,0,0,0.10);
-
- margin: 5px;
- padding: 5px;
- text-align: left;
-
- max-height: 20px;
- overflow: hidden;
-
- background: {
- color: #222;
- color: rgba(0,0,0,0.2);
- }
-
- border: {
- left: 1px solid #444;
- right: 1px solid #444;
- bottom: 1px solid #555;
- top: 1px solid #111;
- }
-
- .img {
- margin-right: 5px;
- }
-
- i {
- margin-top: 1px;
- }
-
- .avatar {
- @include border-radius();
- margin-right: 0;
- }
- }
-
- #post-comments {
- text-align: left;
- padding-top: 0;
- }
-
- #new-post-comment {
- -webkit-box-shadow: 0 -3px 6px -5px rgba(0,0,0,0.8);
- -moz-box-shadow: 0 -3px 6px -5px rgba(0,0,0,0.8);
- box-shadow: 0 -3px 6px -5px rgba(0,0,0,0.8);
-
- border-top: 1px solid #444;
- text-align: left;
- background-image: image-url("hatched-bg-dark.png");
- }
-
- #new-post-comment-container {
- position: relative;
-
- padding: 10px;
-
- textarea{
- height: 18px;
- width: 318px;
- }
-
- form {
- margin-bottom: 0;
- }
-
- .btn {
- position: absolute;
- right: 10px;
- bottom: 10px;
- }
- }
-}
-
-#post-info-sneaky {
- @include transition(all, 0.2s);
-
- z-index: 1;
- position: fixed;
- width: 100%;
- margin: 0;
- padding: 0;
- bottom: 0;
-
- margin-bottom: -60px;
- min-height: 20px;
-
- #post-info-container-sneaky {
- @include info-container();
-
- padding: 10px 0;
- min-height: 20px;
- }
-}
-
-.home-button {
- @include transition(opacity, 0.3s);
- @include opacity(0.6);
-
- position: absolute;
- left: 2px;
- top: 4px;
-
- padding: 4px 6px;
-
- &:hover {
- @include opacity(1);
- }
-}
-
-.invoker {
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
-}
-
-#post-feedback:hover {
- #post-info-sneaky:not(.passive) {
- @include opacity(1);
- margin-bottom: -13px;
- }
-}
-
-.comment-content h1, .comment-content h2, .comment-content h3, .comment-content h4, .comment-content h5, .comment-content h6 {
-color: white;
-text-shadow: 1px 1px black;
-text-rendering: optimizelegibility;
-}
-
-.post-comment {
- -moz-box-shadow: 0 1px 2px -2px #999;
- -webkit-box-shadow: 0 1px 2px -2px #999;
- box-shadow: 0 1px 2px -2px #999;
-
- border-bottom: 1px solid #333;
-
- p:last-child {
- margin-bottom: 0;
- }
-
- &:last-child {
- box-shadow: none;
- border-bottom: none;
- }
-
- padding: 10px;
- padding-right: 40px;
- margin: 0px;
-
- .avatar {
- @include border-radius();
-
- border: {
- top: 1px solid #222;
- right: 1px solid #444;
- left: 1px solid #444;
- bottom: 1px solid #666;
- }
- }
-
- text-shadow: 0 1px 3px rgba(0,0,0,0.3);
-
- a:hover {
- color: #99CCFF
- }
-
- time {
- color: #666;
- font-size: smaller;
- }
-
- .controls {
- @include transition(opacity);
- @include opacity(0);
-
- float: right;
- margin-right: -40px;
-
- a {
- padding: 3px 5px;
- &:hover {
- text-decoration: none;
- }
- }
- }
-
- &:hover {
- .controls {
- @include opacity(0.4);
-
- &:hover {
- @include opacity(1);
- }
- }
- }
-}
-
-#user-controls {
- height: 30px;
-
- .avatar {
- vertical-align: top;
- height: 27px;
- width: 27px;
- }
-
- .label {
- @include opacity(0.6);
- @include transition(opacity, 0.3s);
- @include box-shadow(0, 0, 2px, rgba(255,255,255,0.9));
-
- position: relative;
-
- z-index: 20;
-
- padding: 5px;
- margin-right: 5px;
- line-height: 24px;
-
- padding-top: 3px;
- padding-right: 2px;
-
- i {
- padding: 0;
- margin: 0;
- }
-
- background-color: #000;
- color: #fff;
-
- &.comment {
- padding-right: 5px;
- margin-right: 0;
- }
-
- &:hover {
- @include opacity(1);
- text-decoration: none;
- }
- }
-}
-
-#post-content {
- display: table;
-
-
- position: absolute;
- height: 100%;
- width: 100%;
-
- .post {
- padding: 70px 10%;
- }
-
- img {
- @include photo-shadow();
- }
-}
-
-#post-feedback {
- /* fixes flicker on hover... no idea as to why */
- position: relative;
- z-index: 30;
-}
-
-#close-reactions-pane {
- display: none;
-
- text-align: center;
- position: absolute;
- width: 100%;
- left: 0;
- top: -3px;
-
- #close-reactions-pane-container {
- @include pane-width();
- top: 0;
-
- min-height: 30px;
- display: inline-block;
- position: relative;
- }
-}
-
-#post-interactions.active #close-reactions-pane {
- display: block;
-}
-
-.info-tick {
- @include opacity(0.8);
-
- position: absolute;
- right: 8px;
- top: 8px;
-}
-
-.aspects_dropdown {
- i {
- display: none;
- }
-
- .selected i {
- display: inline-block;
- }
-
- a {
- display : inline-block;
- }
-}
-
-.new_photo .photo{
- display: inline;
- max-width: 200px;
- max-height: 200px;
-}
-
-.new-post-section {
- margin-top: 100px;
-}
-
-.aspect_selector {
- float: right;
-}
-
-.post-view {
- display: table;
- height: 100%;
- width: 100%;
-}
-
-#post-content {
- button {
- position: absolute;
- }
-}
-
-article { //mood posts
- $big-text-size : 3em;
- $medium-text-size : 2em;
- $small-text-size: 1.5em;
-
- header, header p{
- //big text
- @include media-text();
- font-size: $big-text-size;
- }
-
- section.body{
- font-size: $small-text-size;
-
- &.short_body{
- font-size: $medium-text-size;
- }
- }
-
- &.night{
- background-color : $night-background-color;
- color : $night-text-color;
- }
-}
+@import 'new_styles/base';
+@import 'new_styles/composer';
+@import 'new_styles/interactions';
+@import 'new_styles/viewer_nav';
View
295 app/assets/stylesheets/new_styles/_base.scss
@@ -0,0 +1,295 @@
+@import "_new_mixins";
+
+/* variables */
+$light-grey: #999;
+$pane-width: 420px;
+$night-background-color : #333;
+$night-text-color : #999;
+
+/* bootstrap extentions and overrides for asset pipeline */
+.icon-white { background-image: image_url("img/glyphicons-halflings-white.png"); }
+.icon-black { background-image: image_url("img/glyphicons-halflings.png"); }
+.icon-red { background-image: image_url("img/glyphicons-halflings-red.png"); }
+.icon-green { background-image: image_url("img/glyphicons-halflings-green.png"); }
+.icon-blue { background-image: image_url("img/glyphicons-halflings-blue.png"); }
+
+/* styles */
+.multi-photo {
+ display: table;
+
+ p {
+ @include media-text();
+ }
+
+ .img-bounding-box {
+ display: table-cell;
+ text-align: center;
+ vertical-align: middle;
+
+ padding: 20px;
+ height: 400px;
+ width: 300px;
+ }
+
+ img {
+ @include photo-shadow();
+
+ max-width: 100%;
+ max-height: 100%;
+ }
+}
+
+.photoset {
+ @include center(horizontal);
+ width: 100%;
+}
+
+.rich-media {
+ z-index : -5000; //so the framer controls don't get lost
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
+
+ text-align: center;
+ background-color: $night-background-color;
+
+ p {
+ @include media-text();
+ color: #999;
+
+ a {
+ font-weight: normal;
+ font-size: smaller;
+ }
+ }
+
+ iframe {
+ @include box-shadow(0, 3px, 15px, #000);
+
+ width: 857px;
+ height: 480px;
+ max-width: 100%;
+ max-height: 100%;
+ }
+}
+
+.rich-media-container {
+ display: table;
+ height: 100%;
+ width: 100%;
+}
+
+.rich-media-container2 {
+ display: table-cell;
+ vertical-align: middle;
+}
+
+.header {
+ position: fixed;
+
+ /* position absolute for mobile */
+ @media (max-width: 480px) {
+ position: absolute !important;
+ }
+
+ top: 0;
+ left: 0;
+ z-index: 10;
+ width: 100%;
+ overflow-x: hidden;
+}
+
+#header-container {
+ padding: 1.2%;
+
+ /* don't pad the header if we're mobile */
+ @media (max-width: 480px) {
+ padding: 0 !important;
+ }
+}
+
+.avatar {
+ &.micro {
+ height: 20px;
+ width: 20px;
+ }
+
+ &.small {
+ height: 35px;
+ width: 35px;
+ }
+}
+
+.author-name {
+ color: inherit;
+ font-weight: bold;
+}
+
+#post-author {
+ @include border-radius();
+
+ border: 1px solid rgba(255,255,255,0.2);
+ border-top: 1px solid rgba(255,255,255,0.5);
+
+ float: left;
+ margin: 0;
+
+ padding: 5px;
+ padding-right: 10px;
+
+ background-color: rgba(255,255,255,0.6);
+
+/* don't pad the header if we're mobile */
+ @media (max-width: 480px) {
+ @include border-radius(0);
+ background-color: rgba(255,255,255,0.4);
+ width: 100% !important;
+ border: none !important;
+ padding: none !important;
+ }
+
+ max-height: 35px;
+
+ .avatar {
+ @include border-radius();
+ }
+
+ .post-time,
+ .icon-retweet {
+ color: #000;
+ @include opacity(0.5);
+ }
+}
+
+
+.post-view {
+ display: table;
+ height: 100%;
+ width: 100%;
+}
+
+//this is for the framer button, I should be removed
+#post-content {
+ button {
+ position: absolute;
+ }
+}
+
+
+#post-content {
+ display: table;
+ position: absolute;
+
+ height: 100%;
+ width: 100%;
+
+ img {
+ @include photo-shadow();
+ }
+}
+
+article { //mood posts
+ //default frame show styles
+ $big-text-size : 3em;
+ $medium-text-size : 2em;
+ $small-text-size: 1.5em;
+
+ @include centered-frame();
+
+ header, header p{
+ //big text
+ @include media-text();
+ font-size: $big-text-size;
+ }
+
+ section.body{
+ font-size: $small-text-size;
+
+ &.short_body{
+ font-size: $medium-text-size;
+ }
+ }
+
+ &.night{
+ background-color : $night-background-color;
+ color : $night-text-color;
+ }
+
+ &.newspaper {
+ text-align: left;
+ @include newspaper-type();
+ width: 960px;
+ .photo_viewer {
+ float: left;
+ }
+ }
+
+ &.wallpaper{
+ color : #fff;
+ }
+}
+
+.status-with-photo-backdrop {
+ p {
+ color: #fff;
+
+ a {
+ @include transition(background-color, 0.3s);
+
+ color: #000;
+ background-color: #fff;
+ background-color: rgba(255,255,255,0.7);
+ padding: 0 5px;
+
+ &:hover {
+ text-decoration: none;
+ background-color: #fff;
+ background-color: rgba(255,255,255,1);
+ }
+ }
+ }
+}
+
+.darken {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ background-color: rgba(0,0,0,0.3);
+
+ display: table;
+
+ .darken-content {
+ @include centered-frame();
+ height: 100%;
+ width: 100%;
+ }
+}
+
+.photo-fill {
+ @include background-cover();
+ z-index : -5000; //so the framer controls don't get lost
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+}
+
+.photo-backdrop {
+ p {
+ color: #fff;
+ z-index: 2;
+ }
+
+ img {
+ position: relative;
+ }
+
+ .photo-fill {
+ @include opacity(0.2)
+ }
+}
View
27 app/assets/stylesheets/new_styles/_composer.scss
@@ -0,0 +1,27 @@
+.aspects_dropdown {
+ i {
+ display: none;
+ }
+
+ .selected i {
+ display: inline-block;
+ }
+
+ a {
+ display : inline-block;
+ }
+}
+
+.new_photo .photo{
+ display: inline;
+ max-width: 200px;
+ max-height: 200px;
+}
+
+.new-post-section {
+ margin-top: 100px;
+}
+
+.aspect_selector {
+ float: right;
+}
View
311 app/assets/stylesheets/new_styles/_interactions.scss
@@ -0,0 +1,311 @@
+@import "base";
+
+#post-interactions {
+ position: fixed;
+ width: 100%;
+ bottom: 0;
+ left: 0;
+ text-align: center;
+ z-index: 100;
+}
+
+#post-reactions {
+ height: 80%;
+ max-height: 350px;
+ overflow: auto;
+ margin-top: 5px;
+}
+
+#post-info,
+#post-info-sneaky {
+ text-align: center;
+ z-index: 10;
+
+ margin-top: -33px;
+
+ #post-info-container {
+ @include info-container();
+ }
+
+ .well {
+ -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,0.10);
+ -moz-box-shadow: inset 0 2px 2px rgba(0,0,0,0.10);
+ box-shadow: inset 0 2px 2px rgba(0,0,0,0.10);
+
+ margin: 5px;
+ padding: 5px;
+ text-align: left;
+
+ max-height: 20px;
+ overflow: hidden;
+
+ background: {
+ color: #222;
+ color: rgba(0,0,0,0.2);
+ }
+
+ border: {
+ left: 1px solid #444;
+ right: 1px solid #444;
+ bottom: 1px solid #555;
+ top: 1px solid #111;
+ }
+
+ .img {
+ margin-right: 5px;
+ }
+
+ i {
+ margin-top: 1px;
+ }
+
+ .avatar {
+ @include border-radius();
+ margin-right: 0;
+ }
+ }
+
+ #post-comments {
+ text-align: left;
+ padding-top: 0;
+ }
+
+ #new-post-comment {
+ -webkit-box-shadow: 0 -3px 6px -5px rgba(0,0,0,0.8);
+ -moz-box-shadow: 0 -3px 6px -5px rgba(0,0,0,0.8);
+ box-shadow: 0 -3px 6px -5px rgba(0,0,0,0.8);
+
+ border-top: 1px solid #444;
+ text-align: left;
+ background-image: image-url("hatched-bg-dark.png");
+ }
+
+ #new-post-comment-container {
+ position: relative;
+
+ padding: 10px;
+
+ textarea{
+ height: 18px;
+ width: 318px;
+ }
+
+ form {
+ margin-bottom: 0;
+ }
+
+ .btn {
+ position: absolute;
+ right: 10px;
+ bottom: 10px;
+ }
+ }
+}
+
+#post-info-sneaky {
+ @include transition(all, 0.2s);
+
+ z-index: 1;
+ position: fixed;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ bottom: 0;
+
+ margin-bottom: -60px;
+ min-height: 20px;
+
+ #post-info-container-sneaky {
+ @include info-container();
+
+ padding: 10px 0;
+ min-height: 20px;
+ }
+}
+
+.home-button {
+ @include transition(opacity, 0.3s);
+ @include opacity(0.6);
+
+ position: absolute;
+ left: 2px;
+ top: 4px;
+
+ padding: 4px 6px;
+
+ &:hover {
+ @include opacity(1);
+ }
+}
+
+.invoker {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+#post-feedback:hover {
+ #post-info-sneaky:not(.passive) {
+ @include opacity(1);
+ margin-bottom: -13px;
+ }
+}
+
+.comment-content h1, .comment-content h2, .comment-content h3, .comment-content h4, .comment-content h5, .comment-content h6 {
+ color: white;
+ text-shadow: 1px 1px black;
+ text-rendering: optimizelegibility;
+}
+
+.post-comment {
+ -moz-box-shadow: 0 1px 2px -2px #999;
+ -webkit-box-shadow: 0 1px 2px -2px #999;
+ box-shadow: 0 1px 2px -2px #999;
+
+ border-bottom: 1px solid #333;
+
+ p:last-child {
+ margin-bottom: 0;
+ }
+
+ &:last-child {
+ box-shadow: none;
+ border-bottom: none;
+ }
+
+ padding: 10px;
+ padding-right: 40px;
+ margin: 0px;
+
+ .avatar {
+ @include border-radius();
+
+ border: {
+ top: 1px solid #222;
+ right: 1px solid #444;
+ left: 1px solid #444;
+ bottom: 1px solid #666;
+ }
+ }
+
+ text-shadow: 0 1px 3px rgba(0,0,0,0.3);
+
+ a:hover {
+ color: #99CCFF
+ }
+
+ time {
+ color: #666;
+ font-size: smaller;
+ }
+
+ .controls {
+ @include transition(opacity);
+ @include opacity(0);
+
+ float: right;
+ margin-right: -40px;
+
+ a {
+ padding: 3px 5px;
+ &:hover {
+ text-decoration: none;
+ }
+ }
+ }
+
+ &:hover {
+ .controls {
+ @include opacity(0.4);
+
+ &:hover {
+ @include opacity(1);
+ }
+ }
+ }
+}
+
+#user-controls {
+ height: 30px;
+
+ .avatar {
+ vertical-align: top;
+ height: 27px;
+ width: 27px;
+ }
+
+ .label {
+ @include opacity(0.6);
+ @include transition(opacity, 0.3s);
+ @include box-shadow(0, 0, 2px, rgba(255,255,255,0.9));
+
+ position: relative;
+
+ z-index: 20;
+
+ padding: 5px;
+ margin-right: 5px;
+ line-height: 24px;
+
+ padding-top: 3px;
+ padding-right: 2px;
+
+ i {
+ padding: 0;
+ margin: 0;
+ }
+
+ background-color: #000;
+ color: #fff;
+
+ &.comment {
+ padding-right: 5px;
+ margin-right: 0;
+ }
+
+ &:hover {
+ @include opacity(1);
+ text-decoration: none;
+ }
+ }
+}
+
+#post-feedback {
+/* fixes flicker on hover... no idea as to why */
+ position: relative;
+ z-index: 30;
+}
+
+#close-reactions-pane {
+ display: none;
+
+ text-align: center;
+ position: absolute;
+ width: 100%;
+ left: 0;
+ top: -3px;
+
+ #close-reactions-pane-container {
+ @include pane-width();
+ top: 0;
+
+ min-height: 30px;
+ display: inline-block;
+ position: relative;
+ }
+}
+
+#post-interactions.active #close-reactions-pane {
+ display: block;
+}
+
+.info-tick {
+ @include opacity(0.8);
+
+ position: absolute;
+ right: 8px;
+ top: 8px;
+}
View
115 app/assets/stylesheets/new_styles/_new_mixins.scss
@@ -0,0 +1,115 @@
+
+/* mixins */
+@mixin center($orient:vertical) {
+ display: -webkit-box;
+ -webkit-box-orient: $orient;
+ -webkit-box-pack: center;
+ -webkit-box-align: center;
+
+ display: -moz-box;
+ -moz-box-orient: $orient;
+ -moz-box-pack: center;
+ -moz-box-align: center;
+
+ display: box;
+ box-orient: $orient;
+ box-pack: center;
+ box-align: center;
+}
+
+@mixin box-shadow($left, $top, $blur, $color) {
+ -webkit-box-shadow: $left $top $blur $color;
+ -moz-box-shadow: $left $top $blur $color;
+ box-shadow: $left $top $blur $color;
+}
+
+@mixin pane-width() {
+ width: $pane-width;
+ max-width: 100%;
+}
+
+@mixin background-cover() {
+ background: no-repeat center center fixed;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+}
+
+@mixin opacity($val) {
+ -moz-opacity: $val;
+ filter:alpha(opacity=$val*100);
+ opacity: $val;
+}
+
+@mixin border-radius($top:3px, $bottom:$top) {
+ -webkit-border-radius: $top $top $bottom $bottom;
+ -moz-border-radius: $top $top $bottom $bottom;
+ border-radius: $top $top $bottom $bottom;
+}
+
+@mixin transition($type, $speed:0.2s) {
+ -o-transition: $type $speed;
+ -moz-transition: $type $speed;
+ -webkit-transition: $type $speed;
+ transition: $type $speed;
+}
+
+@mixin animation($name, $speed:0.2s, $easing:ease-in-out) {
+ -webkit-animation: $name $speed $easing;
+ -moz-animation: $name $speed $easing;
+ -ms-animation: $name $speed $easing;
+}
+
+@mixin info-container() {
+ @include box-shadow(0, 6px, 20px, #000);
+ @include border-radius(3px, 0px);
+ @include dark-hatched-bg();
+ @include pane-width();
+
+ display: inline-block;
+ position: relative;
+
+ border-top: 1px solid #555;
+ border-right: 1px solid #444;
+ border-left: 1px solid #444;
+
+ padding-top: 25px;
+
+ color: #ddd;
+
+/* webkit acceleration */
+ -webkit-transform: translateZ(0);
+}
+
+@mixin dark-hatched-bg() {
+ background-color: #444;
+ background-image: image-url("hatched-bg-dark.png");
+}
+
+@mixin photo-shadow() {
+ @include box-shadow(0, 3px, 15px, #999);
+}
+
+@mixin media-text() {
+ font: {
+ weight: bold;
+ size: 2em;
+ }
+
+ line-height: 2em;
+ padding-bottom: 0;
+ margin-bottom: 0;
+}
+
+@mixin newspaper-type() {
+ font-family: Palatino, times, georgia, serif;
+ margin-bottom: 1em;
+ padding: 0 5%;
+}
+
+@mixin centered-frame(){
+ display: table-cell;
+ vertical-align: middle;
+ text-align: center;
+}
View
0  app/assets/stylesheets/new_styles/_other.scss
No changes.
View
71 app/assets/stylesheets/new_styles/_viewer_nav.scss
@@ -0,0 +1,71 @@
+@import "base";
+
+#post-nav {
+ @include transition(opacity, 0.5s);
+ @include opacity(1);
+}
+
+body.idle {
+ #post-nav {
+ @include opacity(0);
+
+ .nav-arrow{
+ &.right {
+ margin-right: -40px;
+ }
+
+ &.left {
+ margin-left: -40px;
+ }
+ }
+
+ }
+}
+
+.nav-arrow {
+ @include opacity(0.8);
+ @include transition(all, 0.3s);
+
+ display: table;
+
+ position: fixed;
+ height: 100%;
+ z-index: 3;
+ top: 0;
+ padding: 0 1.2%;
+
+ background-color: rgba(0,0,0,0);
+
+ .nav-arrow-inner {
+ padding: 0; margin: 0;
+ display: table-cell;
+ vertical-align: middle;
+ }
+
+ img {
+ @include opacity(0.5);
+
+ height: 30px;
+ width: 30px;
+
+ /* half the size of the nav arrows on mobile phones */
+ @media (max-width: 480px) {
+ height: 15px;
+ width: 15px;
+ }
+ }
+
+ &.left {
+ left: 0;
+ padding-right: 19px;
+ }
+
+ &.right {
+ right: 0;
+ padding-left: 19px;
+ }
+
+ &:hover {
+ background-color: rgba(0,0,0,0.1)
+ }
+}
View
9 app/assets/templates/post-viewer/content/status-with-photo-backdrop.jst.hbs
@@ -1,9 +0,0 @@
-{{#each photos}}
- <div class="photo-fill" style="background-image: url({{sizes.large}})">
- <div class="darken">
- <div class="darken-content">
- {{{../text}}}
- </div>
- </div>
- </div>
-{{/each}}
View
8 app/assets/templates/wallpaper-mood.jst.hbs
@@ -0,0 +1,8 @@
+<div class="photo-fill" data-img-src="{{backgroundUrl}}" style="background-image: url({{backgroundUrl}})">
+ <div class="darken">
+ <div class="darken-content">
+ <header>{{headline}}</header>
+ <section class="body">{{body}}</section>
+ </div>
+ </div>
+</div>
View
2  app/views/layouts/application.mobile.haml
@@ -53,7 +53,7 @@
- if user_signed_in?
#header-nav
.activity-nav
- = link_to(t('.my_activity'), activity_stream_path)
+ = link_to(t('streams.activity.title'), activity_stream_path)
#nav_badges
.badge{:id => "notification_badge"}
View
3  app/views/shared/_post_info.mobile.haml
@@ -12,8 +12,7 @@
- if post.activity_streams?
= t('shared.stream_element.via', :link => link_to("#{post.provider_display_name}", post.actor_url)).html_safe
- elsif post.provider_display_name == 'mobile'
- = t('shared.stream_element.via', :link => nil)
- mobile
+ = t('shared.stream_element.via_mobile', :link => nil)
&ndash;
%span.scope_scope
- if post.public?
View
2  app/views/users/public.atom.builder
@@ -32,7 +32,7 @@ atom_feed({'xmlns:thr' => 'http://purl.org/syndication/thread/1.0',
:id => "#{@user.person.url}p/#{post.id}" do |entry|
entry.title truncate(post.formatted_message(:plain_text => true), :length => 50)
- entry.content post.formatted_message(:plain_text => true), :type => 'html'
+ entry.content auto_link(post.formatted_message(:plain_text => true)), :type => 'html'
entry.tag! 'activity:verb', 'http://activitystrea.ms/schema/1.0/post'
entry.tag! 'activity:object-type', 'http://activitystrea.ms/schema/1.0/note'
end
View
1  config/locales/diaspora/en.yml
@@ -862,6 +862,7 @@ en:
connect_to_comment: "Connect to this user to comment on their post"
currently_unavailable: 'commenting currently unavailable'
via: "via %{link}"
+ via_mobile: "via mobile"
ignore_user: "Ignore %{name}"
ignore_user_description: "Ignore and remove user from all aspects?"
hide_and_mute: "Hide and mute post"
View
42 features/step_definitions/trumpeter_steps.rb
@@ -29,14 +29,17 @@ def assert_post_renders_with(mood)
find(".post.#{mood.downcase}").should be_present
end
-def find_image_by_filename(filename)
- find("img[src='#{@image_sources[filename]}']")
+def get_image_filename(filename)
+ @image_sources[filename].tap {|src| src.should be_present}
end
-def store_image_filename(file_name)
+def set_image_filename(file_name)
@image_sources ||= {}
- @image_sources[file_name] = all(".photos img").last["src"]
- @image_sources[file_name].should be_present
+ @image_sources[file_name] = all(".photos img").last["src"].tap {|src| src.should be_present}
+end
+
+def find_image_by_filename(filename)
+ find("img[src='#{get_image_filename(filename)}']")
end
def upload_photo(file_name)
@@ -47,15 +50,15 @@ def upload_photo(file_name)
wait_until { all(".photos img").size == orig_photo_count + 1 }
end
- store_image_filename(file_name)
+ set_image_filename(file_name)
end
When /^I trumpet$/ do
visit new_post_path
end
-When /^I write "([^"]*)"$/ do |text|
- fill_in 'text', :with => text
+When /^I write "([^"]*)"(?:| with body "([^"]*)")$/ do |headline, body|
+ fill_in 'text', :with => [headline, body].join("\n")
end
Then /I mention "([^"]*)"$/ do |text|
@@ -105,16 +108,29 @@ def upload_photo(file_name)
within(find(".post")) { page.should have_content(post_text) }
end
-When /^I select the mood "([^"]*)"$/ do |template_name|
- select template_name, :from => 'template'
+When /^I select the mood "([^"]*)"$/ do |mood|
+ select mood, :from => 'template'
end
-Then /^the post's mood should (?:still |)be "([^"]*)"$/ do |template_name|
- assert_post_renders_with(template_name)
+Then /^the post's mood should (?:still |)be "([^"]*)"$/ do |mood|
+ assert_post_renders_with(mood)
end
When /^"([^"]*)" should be in the post's picture viewer$/ do |file_name|
within(".photo_viewer") do
find_image_by_filename(file_name).should be_present
end
-end
+end
+
+Then /^it should be a wallpaper frame with the background "([^"]*)"$/ do |file_name|
+ assert_post_renders_with("Wallpaper")
+ find("div.photo-fill")["data-img-src"].should == get_image_filename(file_name)
+end
+
+When /^the frame's headline should be "([^"]*)"$/ do |header_text|
+ find("header").text.should == header_text
+end
+
+When /^the frame's body should be "([^"]*)"$/ do |body_text|
+ find("section.body").text.should == body_text
+end
View
10 features/trumpeter.feature
@@ -45,6 +45,7 @@ Feature: Creating a new post
And I start the framing process
Then I should see "This is hella customized" in the framer preview
+ #### Will test the template picker being ported to JS ####
# Then the default mood for the post should be "Wallpaper"
# And I should see the image "button.gif" background
When I select the mood "Day"
@@ -57,3 +58,12 @@ Feature: Creating a new post
Then "This is hella customized" should be post 1
And I click the show page link for "This is hella customized"
And the post's mood should still be "Day"
+
+ Scenario: The Wallpaper mood
+ When I write "This is a pithy status" with body "And this is a long body"
+ And I upload a fixture picture with filename "button.gif"
+ And I start the framing process
+ When I select the mood "Wallpaper"
+ Then it should be a wallpaper frame with the background "button.gif"
+ And the frame's headline should be "This is a pithy status"
+ And the frame's body should be "And this is a long body"
View
10 spec/controllers/users_controller_spec.rb
@@ -45,6 +45,16 @@
get :public, :username => @user.username, :format => :atom
response.body.should include(sm.text)
end
+
+ it 'renders xml if atom is requested with clickalbe urls' do
+ sm = Factory(:status_message, :public => true, :author => @user.person)
+ @user.person.posts.each do |p|
+ p.text = "Goto http://diasporaproject.org/ now!"
+ p.save
+ end
+ get :public, :username => @user.username, :format => :atom
+ response.body.should include('&lt;a href="http://diasporaproject.org/"&gt;http://diasporaproject.org/&lt;/a&gt;')
+ end
it 'redirects to a profile page if html is requested' do
get :public, :username => @user.username