From bb71538bb503159177d46d8956bd466973c0876b Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 28 Jul 2018 19:25:33 +0200 Subject: Redesign public profiles and toots (#8068) --- .../stream_entries/_content_spoiler.html.haml | 7 ----- .../stream_entries/_detailed_status.html.haml | 34 +++++++++++----------- app/views/stream_entries/_media.html.haml | 4 --- app/views/stream_entries/_more.html.haml | 2 -- app/views/stream_entries/_simple_status.html.haml | 34 +++++++++++++++------- app/views/stream_entries/_status.html.haml | 23 ++++++++------- app/views/stream_entries/embed.html.haml | 2 +- app/views/stream_entries/show.html.haml | 11 +++---- 8 files changed, 60 insertions(+), 57 deletions(-) delete mode 100644 app/views/stream_entries/_content_spoiler.html.haml delete mode 100644 app/views/stream_entries/_media.html.haml delete mode 100644 app/views/stream_entries/_more.html.haml (limited to 'app/views/stream_entries') diff --git a/app/views/stream_entries/_content_spoiler.html.haml b/app/views/stream_entries/_content_spoiler.html.haml deleted file mode 100644 index 798dfce67..000000000 --- a/app/views/stream_entries/_content_spoiler.html.haml +++ /dev/null @@ -1,7 +0,0 @@ -.media-spoiler-wrapper{ class: sensitive == false && 'media-spoiler-wrapper__visible' } - .spoiler-button - .icon-button.overlayed - %i.fa.fa-fw.fa-eye - .media-spoiler - %span= t('stream_entries.sensitive_content') - %span= t('stream_entries.click_to_show') diff --git a/app/views/stream_entries/_detailed_status.html.haml b/app/views/stream_entries/_detailed_status.html.haml index 85e90a237..aa160b979 100644 --- a/app/views/stream_entries/_detailed_status.html.haml +++ b/app/views/stream_entries/_detailed_status.html.haml @@ -1,16 +1,15 @@ -.detailed-status.light +.detailed-status.detailed-status--flex = link_to TagManager.instance.url_for(status.account), class: 'detailed-status__display-name p-author h-card', target: stream_link_target, rel: 'noopener' do - %div - .avatar - = image_tag status.account.avatar.url(:original), width: 48, height: 48, alt: '', class: 'u-photo' + .detailed-status__display-avatar + = image_tag status.account.avatar.url(:original), width: 48, height: 48, alt: '', class: 'account__avatar u-photo' %span.display-name - %strong.p-name.emojify= display_name(status.account, custom_emojify: true) - %span= acct(status.account) + %bdi + %strong.display-name__html.p-name.emojify= display_name(status.account, custom_emojify: true) + %span.display-name__account + = acct(status.account) + = fa_icon('lock') if status.account.locked? - - if !user_signed_in? || embedded_view? - = link_to account_remote_follow_path(status.account), class: 'button button-secondary logo-button', target: '_new' do - = render file: Rails.root.join('app', 'javascript', 'images', 'logo.svg') - = t('accounts.follow') + = account_action_button(status.account) .status__content.emojify< - if status.spoiler_text? @@ -30,6 +29,7 @@ .detailed-status__meta %data.dt-published{ value: status.created_at.to_time.iso8601 } + = link_to TagManager.instance.url_for(status), class: 'detailed-status__datetime u-url u-uid', target: stream_link_target, rel: 'noopener' do %time.formatted{ datetime: status.created_at.iso8601, title: l(status.created_at) }= l(status.created_at) · @@ -40,20 +40,20 @@ = link_to status.application.name, status.application.website, class: 'detailed-status__application', target: '_blank', rel: 'noopener' · - if status.direct_visibility? - %span< + %span.detailed-status__link< = fa_icon('envelope') - elsif status.private_visibility? - %span< + %span.detailed-status__link< = fa_icon('lock') - else - %span< + %span.detailed-status__link< = fa_icon('retweet') - %span= status.reblogs_count + %span.detailed-status__reblogs= number_to_human status.reblogs_count, strip_insignificant_zeros: true · - %span< + %span.detailed-status__link< = fa_icon('star') - %span= status.favourites_count + %span.detailed-status__favorites= number_to_human status.favourites_count, strip_insignificant_zeros: true - if user_signed_in? · - = link_to t('statuses.open_in_web'), web_url("statuses/#{status.id}"), class: 'open-in-web-link', target: '_blank' + = link_to t('statuses.open_in_web'), web_url("statuses/#{status.id}"), class: 'detailed-status__application', target: '_blank' diff --git a/app/views/stream_entries/_media.html.haml b/app/views/stream_entries/_media.html.haml deleted file mode 100644 index 779f02c8d..000000000 --- a/app/views/stream_entries/_media.html.haml +++ /dev/null @@ -1,4 +0,0 @@ -.media-item - = link_to media.remote_url.blank? ? media.file.url(:original) : media.remote_url, style: media.image? ? "background-image: url(#{media.file.url(:original)})" : '', target: '_blank', rel: 'noopener', class: "u-#{media.video? || media.gifv? ? 'video' : 'photo'}" do - - unless media.image? - %video{ src: media.file.url(:original), autoplay: true, loop: true }/ diff --git a/app/views/stream_entries/_more.html.haml b/app/views/stream_entries/_more.html.haml deleted file mode 100644 index 9b1dfe4a7..000000000 --- a/app/views/stream_entries/_more.html.haml +++ /dev/null @@ -1,2 +0,0 @@ -= link_to url, class: 'more light' do - = t('statuses.show_more') diff --git a/app/views/stream_entries/_simple_status.html.haml b/app/views/stream_entries/_simple_status.html.haml index 0f27585a1..676d367ca 100644 --- a/app/views/stream_entries/_simple_status.html.haml +++ b/app/views/stream_entries/_simple_status.html.haml @@ -1,18 +1,19 @@ -.status.light - .status__header - .status__meta - = link_to TagManager.instance.url_for(status), class: 'status__relative-time u-url u-uid', target: stream_link_target, rel: 'noopener' do - %time.time-ago{ datetime: status.created_at.iso8601, title: l(status.created_at) }= l(status.created_at) - %data.dt-published{ value: status.created_at.to_time.iso8601 } +.status + .status__info + = link_to TagManager.instance.url_for(status), class: 'status__relative-time u-url u-uid', target: stream_link_target, rel: 'noopener' do + %time.time-ago{ datetime: status.created_at.iso8601, title: l(status.created_at) }= l(status.created_at) + %data.dt-published{ value: status.created_at.to_time.iso8601 } = link_to TagManager.instance.url_for(status.account), class: 'status__display-name p-author h-card', target: stream_link_target, rel: 'noopener' do .status__avatar %div - = image_tag status.account.avatar(:original), width: 48, height: 48, alt: '', class: 'u-photo' + = image_tag status.account.avatar(:original), width: 48, height: 48, alt: '', class: 'u-photo account__avatar' %span.display-name - %strong.p-name.emojify= display_name(status.account, custom_emojify: true) - %span= acct(status.account) - + %bdi + %strong.display-name__html.p-name.emojify= display_name(status.account, custom_emojify: true) + %span.display-name__account + = acct(status.account) + = fa_icon('lock') if status.account.locked? .status__content.emojify< - if status.spoiler_text? %p{ style: 'margin-bottom: 0' }< @@ -26,3 +27,16 @@ = react_component :video, src: video.file.url(:original), preview: video.file.url(:small), sensitive: status.sensitive? && !current_account&.user&.setting_display_sensitive_media, width: 610, height: 343, inline: true - else = react_component :media_gallery, height: 343, sensitive: status.sensitive? && !current_account&.user&.setting_display_sensitive_media, 'autoPlayGif': current_account&.user&.setting_auto_play_gif, media: status.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json } + + .status__action-bar + .status__action-bar-button.static-icon-button< + - if status.public_visibility? || status.unlisted_visibility? + = fa_icon 'retweet fw' + %span.detailed-status__reblogs= number_to_human status.reblogs_count, strip_insignificant_zeros: true + - elsif status.private_visibility? + = fa_icon 'lock fw' + - else + = fa_icon 'envelope fw' + .status__action-bar-button.static-icon-button< + = fa_icon 'star fw' + %span.detailed-status__favorites= number_to_human status.favourites_count, strip_insignificant_zeros: true diff --git a/app/views/stream_entries/_status.html.haml b/app/views/stream_entries/_status.html.haml index b87ca2177..320c9bc4f 100644 --- a/app/views/stream_entries/_status.html.haml +++ b/app/views/stream_entries/_status.html.haml @@ -16,24 +16,25 @@ - if status.reply? && include_threads - if @next_ancestor .entry{ class: entry_classes } - = render 'stream_entries/more', url: TagManager.instance.url_for(@next_ancestor) + = link_to_more TagManager.instance.url_for(@next_ancestor) = render partial: 'stream_entries/status', collection: @ancestors, as: :status, locals: { is_predecessor: true, direct_reply_id: status.in_reply_to_id } .entry{ class: entry_classes } - if status.reblog? - .pre-header - .pre-header__icon - = fa_icon('retweet fw') + .status__prepend + .status__prepend-icon-wrapper + %i.status__prepend-icon.fa.fa-fw.fa-retweet %span = link_to TagManager.instance.url_for(status.account), class: 'status__display-name muted' do - %strong.emojify= display_name(status.account, custom_emojify: true) + %bdi + %strong.emojify= display_name(status.account, custom_emojify: true) = t('stream_entries.reblogged') - elsif pinned - .pre-header - .pre-header__icon - = fa_icon('thumb-tack fw') + .status__prepend + .status__prepend-icon-wrapper + %i.status__prepend-icon.fa.fa-fw.fa-thumb-tack %span = t('stream_entries.pinned') @@ -42,13 +43,13 @@ - if include_threads - if @since_descendant_thread_id .entry{ class: entry_classes } - = render 'stream_entries/more', url: short_account_status_url(status.account.username, status, max_descendant_thread_id: @since_descendant_thread_id + 1) + = link_to_more short_account_status_url(status.account.username, status, max_descendant_thread_id: @since_descendant_thread_id + 1) - @descendant_threads.each do |thread| = render partial: 'stream_entries/status', collection: thread[:statuses], as: :status, locals: { is_successor: true, parent_id: status.id } - if thread[:next_status] .entry{ class: entry_classes } - = render 'stream_entries/more', url: TagManager.instance.url_for(thread[:next_status]) + = link_to_more TagManager.instance.url_for(thread[:next_status]) - if @next_descendant_thread .entry{ class: entry_classes } - = render 'stream_entries/more', url: short_account_status_url(status.account.username, status, since_descendant_thread_id: @max_descendant_thread_id - 1) + = link_to_more short_account_status_url(status.account.username, status, since_descendant_thread_id: @max_descendant_thread_id - 1) diff --git a/app/views/stream_entries/embed.html.haml b/app/views/stream_entries/embed.html.haml index b703c15d2..d20c1e93e 100644 --- a/app/views/stream_entries/embed.html.haml +++ b/app/views/stream_entries/embed.html.haml @@ -1,3 +1,3 @@ - cache @stream_entry.activity do - .activity-stream.activity-stream-headless + .activity-stream.activity-stream--headless = render "stream_entries/#{@type}", @type.to_sym => @stream_entry.activity, centered: true diff --git a/app/views/stream_entries/show.html.haml b/app/views/stream_entries/show.html.haml index dfb83e747..9da6245dc 100644 --- a/app/views/stream_entries/show.html.haml +++ b/app/views/stream_entries/show.html.haml @@ -17,8 +17,9 @@ = render 'stream_entries/og_description', activity: @stream_entry.activity = render 'stream_entries/og_image', activity: @stream_entry.activity, account: @account -- if show_landing_strip? - = render partial: 'shared/landing_strip', locals: { account: @stream_entry.account } - -.activity-stream.activity-stream-headless.h-entry - = render partial: "stream_entries/#{@type}", locals: { @type.to_sym => @stream_entry.activity, include_threads: true } +.grid + .column-0 + .activity-stream.activity-stream-headless.h-entry + = render partial: "stream_entries/#{@type}", locals: { @type.to_sym => @stream_entry.activity, include_threads: true } + .column-1 + = render 'application/sidebar' -- cgit