AkkomaGang/fedibird-fe
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity

Add WebUI element size adjustment

Browse source
This commit is contained in:
noellabo 2022-06-02 15:46:38 +09:00
parent a89569c3a8
commit d0b97a2fcb
13 changed files with 106 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/controllers/settings/preferences_controller.rb
View file

@ -87,6 +87,9 @@ class Settings::PreferencesController < Settings::BaseController
:setting_add_reference_modal,
:setting_unselect_reference_modal,
:setting_enable_empty_column,
:setting_content_font_size,
:setting_info_font_size,
:setting_content_emoji_reaction_size,
notification_emails: %i(follow follow_request reblog favourite emoji_reaction status_reference mention digest report pending_account trending_tag),
interactions: %i(must_be_follower must_be_following must_be_following_dm)
)

10
app/helpers/accounts_helper.rb
View file

@ -118,6 +118,16 @@ module AccountsHelper
end.join("\n")
end
def account_theme_valiables
return if current_user.nil?
":root {
--content-font-size: #{h(current_user.setting_content_font_size)}px;
--info-font-size: #{h(current_user.setting_info_font_size)}px;
--content-emoji-reaction-size: #{h(current_user.setting_content_emoji_reaction_size)}px;
}"
end
def svg_logo
content_tag(:svg, tag(:use, 'xlink:href' => '#mastodon-svg-logo'), 'viewBox' => '0 0 216.4144 232.00976')
end

4
app/javascript/styles/mastodon/about.scss
View file

@ -543,10 +543,10 @@ $small-breakpoint: 960px;
}
.display-name {
font-size: 15px;
font-size: var(--info-font-size, 15px);
&__account {
font-size: 14px;
font-size: calc(var(--info-font-size, 15px)*0.933);
}
}
}

62
app/javascript/styles/mastodon/components.scss
View file

@ -837,8 +837,8 @@
.reply-indicator__content,
.quote-indicator__content {
position: relative;
font-size: 15px;
line-height: 20px;
font-size: var(--content-font-size, 15px);
line-height: calc(var(--content-font-size, 15px)*1.33);
word-wrap: break-word;
font-weight: 400;
overflow: hidden;
@ -859,13 +859,13 @@
}
.emojione {
width: 20px;
height: 20px;
width: calc(var(--content-font-size, 15px)*1.33);
height: calc(var(--content-font-size, 15px)*1.33);
margin: -3px 0 0;
}
p {
margin-bottom: 20px;
margin-bottom: calc(var(--content-font-size, 15px)*1.33);
white-space: pre-wrap;
unicode-bidi: plaintext;
@ -939,8 +939,8 @@
overflow-y: auto;
.emojione {
width: 20px;
height: 20px;
width: calc(var(--content-font-size, 15px)*1.33);
height: calc(var(--content-font-size, 15px)*1.33);
margin: -3px 0 0;
}
@ -1189,7 +1189,7 @@
.notification__relative_time {
color: $dark-text-color;
float: right;
font-size: 14px;
font-size: calc(var(--info-font-size, 15px)*0.933);
padding-bottom: 1px;
}
@ -1242,7 +1242,7 @@
}
.status__info {
font-size: 15px;
font-size: var(--info-font-size, 15px);
}
.status-check-box {
@ -1288,7 +1288,7 @@
color: $dark-text-color;
padding: 8px 0;
padding-bottom: 2px;
font-size: 14px;
font-size: calc(var(--content-font-size, 15px)*0.933);
position: relative;
.status__display-name strong {
@ -1364,17 +1364,17 @@
}
.status__content {
font-size: 19px;
line-height: 24px;
font-size: calc(var(--content-font-size, 15px)*1.27);
line-height: calc(var(--content-font-size, 15px)*1.6);
.emojione {
width: 24px;
height: 24px;
width: calc(var(--content-font-size, 15px)*1.6);
height: calc(var(--content-font-size, 15px)*1.6);
margin: -1px 0 0;
}
.status__content__spoiler-link {
line-height: 24px;
line-height: calc(var(--content-font-size, 15px)*1.6);
margin: -1px 0 0;
}
}
@ -1500,7 +1500,7 @@
color: $darker-text-color;
overflow: hidden;
text-decoration: none;
font-size: 14px;
font-size: calc(var(--info-font-size, 15px)*0.933);
&--with-note {
strong {
@ -1563,7 +1563,7 @@
&__display-name__html {
color: $black;
text-decoration: none;
font-size: 13px;
font-size: calc(var(--info-font-size, 15px)*0.867);
}
}
@ -1854,8 +1854,8 @@ a.account__display-name {
padding: 8px 0 0;
cursor: default;
color: $darker-text-color;
font-size: 15px;
line-height: 22px;
font-size: calc(var(--content-font-size, 15px)*0.933);
line-height: calc(var(--content-font-size, 15px)*1.467);
position: relative;
.fa {
@ -1928,7 +1928,7 @@ a.account__display-name {
}
.display-name__account {
font-size: 14px;
font-size: calc(var(--info-font-size, 15px)*0.933);
}
.status__relative-time,
@ -6390,7 +6390,7 @@ a.status-card.compact:hover {
text-align: left;
strong {
font-size: 15px;
font-size: var(--info-font-size, 15px);
color: $primary-text-color;
font-weight: 500;
overflow: hidden;
@ -6399,7 +6399,7 @@ a.status-card.compact:hover {
span {
display: block;
font-size: 14px;
font-size: calc(var(--info-font-size, 15px)*0.933);
color: $darker-text-color;
font-weight: 400;
overflow: hidden;
@ -6508,7 +6508,7 @@ a.status-card.compact:hover {
text-align: left;
strong {
font-size: 15px;
font-size: var(--info-font-size, 15px);
color: $primary-text-color;
font-weight: 500;
overflow: hidden;
@ -6517,7 +6517,7 @@ a.status-card.compact:hover {
span {
display: block;
font-size: 14px;
font-size: calc(var(--info-font-size, 15px)*0.933);
color: $darker-text-color;
font-weight: 400;
overflow: hidden;
@ -7448,7 +7448,7 @@ noscript {
}
h1 {
font-size: 16px;
font-size: calc(var(--info-font-size, 15px)*1.067);
line-height: 24px;
color: $primary-text-color;
font-weight: 500;
@ -7458,7 +7458,7 @@ noscript {
small {
display: block;
font-size: 14px;
font-size: calc(var(--info-font-size, 15px)*0.933);
color: $darker-text-color;
font-weight: 400;
overflow: hidden;
@ -7737,20 +7737,20 @@ noscript {
}
&__relative-time {
font-size: 15px;
font-size: var(--info-font-size, 15px);
color: $darker-text-color;
padding-left: 15px;
}
&__expiration-time {
font-size: 15px;
font-size: var(--info-font-size, 15px);
color: $darker-text-color;
padding-left: 15px;
}
&__names {
color: $darker-text-color;
font-size: 15px;
font-size: var(--info-font-size, 15px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -7892,8 +7892,8 @@ noscript {
&__emoji {
display: block;
margin: 3px 0;
width: 16px;
height: 16px;
width: var(--content-emoji-reaction-size, 16px);
height: var(--content-emoji-reaction-size, 16px);
img {
display: block;

6
app/javascript/styles/mastodon/polls.scss
View file

@ -1,6 +1,6 @@
.poll {
margin-top: 16px;
font-size: 14px;
margin-top: calc(var(--content-font-size, 15px)*1.067);
font-size: calc(var(--content-font-size, 15px)*0.933);
li {
margin-bottom: 10px;
@ -53,7 +53,7 @@
position: relative;
display: flex;
padding: 6px 0;
line-height: 18px;
line-height: calc(var(--content-font-size, 15px)*1.2);
cursor: default;
overflow: hidden;

15
app/lib/user_settings_decorator.rb
View file

@ -81,6 +81,9 @@ class UserSettingsDecorator
user.settings['match_visibility_of_references'] = match_visibility_of_references_preference if change?('setting_match_visibility_of_references')
user.settings['hexagon_avatar'] = hexagon_avatar_preference if change?('setting_hexagon_avatar')
user.settings['enable_empty_column'] = enable_empty_column_preference if change?('setting_enable_empty_column')
user.settings['content_font_size'] = content_font_size_preference if change?('setting_content_font_size')
user.settings['info_font_size'] = info_font_size_preference if change?('setting_info_font_size')
user.settings['content_emoji_reaction_size'] = content_emoji_reaction_size_preference if change?('setting_content_emoji_reaction_size')
end
def merged_notification_emails
@ -291,6 +294,18 @@ end
boolean_cast_setting 'setting_enable_empty_column'
end
def content_font_size_preference
settings['setting_content_font_size']
end
def info_font_size_preference
settings['setting_info_font_size']
end
def content_emoji_reaction_size_preference
settings['setting_content_emoji_reaction_size']
end
def boolean_cast_setting(key)
ActiveModel::Type::Boolean.new.cast(settings[key])
end

3
app/models/user.rb
View file

@ -137,6 +137,9 @@ class User < ApplicationRecord
:enable_status_reference, :match_visibility_of_references,
:post_reference_modal, :add_reference_modal, :unselect_reference_modal,
:hexagon_avatar, :enable_empty_column,
:content_font_size, :info_font_size, :content_emoji_reaction_size,
:multi_column_customize, :multi_column_content_font_size, :multi_column_info_font_size, :multi_column_content_emoji_reaction_size,
:mobile_customize, :mobile_content_font_size, :mobile_info_font_size, :mobile_content_emoji_reaction_size,
to: :settings, prefix: :setting, allow_nil: false

3
app/serializers/initial_state_serializer.rb
View file

@ -65,6 +65,9 @@ class InitialStateSerializer < ActiveModel::Serializer
store[:add_reference_modal] = object.current_account.user.setting_add_reference_modal
store[:unselect_reference_modal] = object.current_account.user.setting_unselect_reference_modal
store[:enable_empty_column] = object.current_account.user.setting_enable_empty_column
store[:content_font_size] = object.current_account.user.setting_content_font_size
store[:info_font_size] = object.current_account.user.setting_info_font_size
store[:content_emoji_reaction_size] = object.current_account.user.setting_content_emoji_reaction_size
else
store[:auto_play_gif] = Setting.auto_play_gif

1
app/views/layouts/application.html.haml
View file

@ -38,6 +38,7 @@
%style{ nonce: request.content_security_policy_nonce }
!= account_cat_styles
!= account_theme_valiables
= yield :header_tags

25
app/views/settings/preferences/appearance/show.html.haml
View file

@ -24,6 +24,31 @@
.fields-group
= f.input :setting_hexagon_avatar, as: :boolean, wrapper: :with_label, hint: true, fedibird_features: true
-# %h5= t 'appearance.custom_size.all'
.fields-group
= f.input :setting_content_font_size, as: :range, input_html: { min: 10, max: 20, list: 'content_font_size_label' }, wrapper: :with_label, hint: false, fedibird_features: true
= f.input :setting_info_font_size, as: :range, input_html: { min: 10, max: 20, list: 'info_font_size_label' }, wrapper: :with_label, hint: false, fedibird_features: true
= f.input :setting_content_emoji_reaction_size, as: :range, input_html: { min: 10, max: 48, list: 'emoji_reaction_size_label' }, wrapper: :with_label, false: true, fedibird_features: true
-# %h5= t 'appearance.custom_size.multi_column'
-# .fields-group
-# = f.input :setting_multi_column_customize, as: :boolean, wrapper: :with_label, hint: true, fedibird_features: true
-# .fields-group.multi-column-customize
-# = f.input :setting_multi_column_content_font_size, as: :range, input_html: { min: 10, max: 24, list: 'content_font_size_label' }, wrapper: :with_label, hint: false, fedibird_features: true
-# = f.input :setting_multi_column_content_emoji_reaction_size, as: :range, input_html: { min: 10, max: 48 }, wrapper: :with_label, false: true, fedibird_features: true
-# %h5= t 'appearance.custom_size.mobile'
-# .fields-group
-# = f.input :setting_mobile_customize, as: :boolean, wrapper: :with_label, hint: true, fedibird_features: true
-# .fields-group.mobile-customize
-# = f.input :setting_mobile_content_font_size, as: :range, input_html: { min: 10, max: 24, list: 'content_font_size_label' }, wrapper: :with_label, hint: false, fedibird_features: true
-# = f.input :setting_mobile_content_emoji_reaction_size, as: :range, input_html: { min: 10, max: 48 }, wrapper: :with_label, false: true, fedibird_features: true
%h4= t 'appearance.advanced_web_interface'
%p.hint= t 'appearance.advanced_web_interface_hint'

3
config/locales/simple_form.en.yml
View file

@ -208,6 +208,8 @@ en:
setting_auto_play_gif: Auto-play animated GIFs
setting_boost_modal: Show confirmation dialog before boosting
setting_compact_reaction: Compact display of reaction
setting_content_emoji_reaction_size: Emoji reaction size
setting_content_font_size: Content font size
setting_crop_images: Crop images in non-expanded posts to 16x9
setting_default_language: Posting language
setting_default_privacy: Posting privacy
@ -230,6 +232,7 @@ en:
setting_hide_following_count: Hide your following count
setting_hide_network: Hide your social graph
setting_hide_statuses_count: Hide your post count
setting_info_font_size: Information header font size
setting_match_visibility_of_references: Match the visibility of the post to the references
setting_new_features_policy: Policy for new features
setting_new_features_policy_tester: Participate in the beta test

3
config/locales/simple_form.ja.yml
View file

@ -208,6 +208,8 @@ ja:
setting_auto_play_gif: アニメーションGIFを自動再生する
setting_boost_modal: ブーストする前に確認ダイアログを表示する
setting_compact_reaction: リアクションをコンパクトに表示
setting_content_emoji_reaction_size: 投稿の絵文字リアクションのサイズ
setting_content_font_size: 投稿のフォントサイズ
setting_crop_images: 投稿の詳細以外では画像を16:9に切り抜く
setting_default_language: 投稿する言語
setting_default_privacy: 投稿の公開範囲
@ -230,6 +232,7 @@ ja:
setting_hide_following_count: フォロー数を隠す
setting_hide_network: 繋がりを隠す
setting_hide_statuses_count: 投稿数を隠す
setting_info_font_size: 情報ヘッダのフォントサイズ
setting_match_visibility_of_references: 投稿の公開範囲を参照先に合わせる
setting_new_features_policy: 新機能へのポリシー
setting_new_features_policy_conservative: 無効にしておき、自分で判断する

3
config/settings.yml
View file

@ -60,6 +60,9 @@ defaults: &defaults
disable_joke_appearance: false
new_features_policy: 'default'
enable_status_reference: true
content_font_size: 15
info_font_size: 15
content_emoji_reaction_size: 16
notification_emails:
follow: false
reblog: false