From 3cbaa0044943341fa4af4e4eb880649fc7eecda4 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 20 Oct 2020 22:54:43 +0300 Subject: more replacements + small renames --- src/App.vue | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) (limited to 'src/App.vue') diff --git a/src/App.vue b/src/App.vue index 0276c6a6..5efaf717 100644 --- a/src/App.vue +++ b/src/App.vue @@ -42,36 +42,42 @@
-
-- cgit v1.2.3-70-g09d2 From f561e755530063b2e8e0db210264b1d244543bd0 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 21 Oct 2020 00:31:16 +0300 Subject: lint --- src/App.vue | 17 +++-- src/components/account_actions/account_actions.vue | 5 +- src/components/attachment/attachment.vue | 6 +- src/components/chat/chat.vue | 5 +- src/components/chat_new/chat_new.vue | 11 ++- src/components/chat_panel/chat_panel.vue | 5 +- src/components/emoji_picker/emoji_picker.vue | 10 ++- src/components/exporter/exporter.vue | 6 +- src/components/extra_buttons/extra_buttons.js | 2 +- src/components/extra_buttons/extra_buttons.vue | 48 ++++++++++--- src/components/font_control/font_control.vue | 5 +- .../global_notice_list/global_notice_list.vue | 3 +- src/components/image_cropper/image_cropper.vue | 3 +- .../interface_language_switcher.vue | 5 +- src/components/login_form/login_form.vue | 3 +- src/components/media_modal/media_modal.vue | 10 ++- src/components/mfa_form/recovery_form.vue | 3 +- src/components/mobile_nav/mobile_nav.vue | 18 ++++- src/components/nav_panel/nav_panel.vue | 35 +++++++-- src/components/notification/notification.vue | 33 +++++++-- src/components/notifications/notifications.vue | 6 +- src/components/panel_loading/panel_loading.vue | 6 +- src/components/poll/poll_form.vue | 15 +++- .../post_status_form/post_status_form.vue | 12 ++-- src/components/retweet_button/retweet_button.vue | 18 ++--- src/components/scope_selector/scope_selector.vue | 36 +++++++--- src/components/search/search.vue | 6 +- src/components/search_bar/search_bar.vue | 12 ++-- .../settings_modal/tabs/filtering_tab.vue | 5 +- src/components/settings_modal/tabs/general_tab.vue | 10 ++- src/components/settings_modal/tabs/profile_tab.vue | 12 ++-- .../settings_modal/tabs/theme_tab/preview.vue | 12 ++-- .../settings_modal/tabs/theme_tab/theme_tab.vue | 10 ++- src/components/shadow_control/shadow_control.vue | 25 +++++-- src/components/side_drawer/side_drawer.vue | 84 ++++++++++++++++++---- src/components/status/status.vue | 44 +++++++++--- src/components/status_popover/status_popover.vue | 6 +- src/components/timeline/timeline.vue | 6 +- src/components/timeline_menu/timeline_menu.vue | 40 +++++++++-- src/components/user_card/user_card.vue | 33 +++++++-- .../user_list_popover/user_list_popover.vue | 6 +- 41 files changed, 497 insertions(+), 140 deletions(-) (limited to 'src/App.vue') diff --git a/src/App.vue b/src/App.vue index 5efaf717..c27f51bf 100644 --- a/src/App.vue +++ b/src/App.vue @@ -54,7 +54,8 @@ @@ -64,9 +65,10 @@ class="mobile-hidden nav-icon" target="_blank" > diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue index 61099d4f..e3ae376e 100644 --- a/src/components/account_actions/account_actions.vue +++ b/src/components/account_actions/account_actions.vue @@ -63,7 +63,10 @@ slot="trigger" class="btn btn-default ellipsis-button" > - + diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 0b7a3f9c..f1fac2c8 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -38,7 +38,8 @@ >
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue index 0670f1ac..5f58b9a6 100644 --- a/src/components/chat/chat.vue +++ b/src/components/chat/chat.vue @@ -14,7 +14,10 @@ class="go-back-button" @click="goBack" > - +
- +
- +
- + {{ $t('shoutbox.title') }}
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index bd093c99..3262a3d9 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -13,7 +13,10 @@ :title="group.text" @click.prevent="highlight(group.id)" > - + - +
diff --git a/src/components/exporter/exporter.vue b/src/components/exporter/exporter.vue index 156db9a3..ecd71bf1 100644 --- a/src/components/exporter/exporter.vue +++ b/src/components/exporter/exporter.vue @@ -1,7 +1,11 @@ diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue index f6b767a2..4ab5d192 100644 --- a/src/components/login_form/login_form.vue +++ b/src/components/login_form/login_form.vue @@ -77,7 +77,8 @@
{{ error }}
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue index cbcfc6d2..ea7f7a7f 100644 --- a/src/components/media_modal/media_modal.vue +++ b/src/components/media_modal/media_modal.vue @@ -34,7 +34,10 @@ class="modal-view-button-arrow modal-view-button-arrow--prev" @click.stop.prevent="goPrev" > - + diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue index 61dbda24..f6526d2a 100644 --- a/src/components/mfa_form/recovery_form.vue +++ b/src/components/mfa_form/recovery_form.vue @@ -55,7 +55,8 @@
{{ error }}
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue index 4d91af77..db9b0ba0 100644 --- a/src/components/mobile_nav/mobile_nav.vue +++ b/src/components/mobile_nav/mobile_nav.vue @@ -15,7 +15,11 @@ class="mobile-nav-button" @click.stop.prevent="toggleMobileSidebar()" > - +
- +
- +
- + {{ $t("nav.timelines") }}
  • - + {{ $t("nav.interactions") }}
    • @@ -25,13 +35,23 @@ > {{ unreadChatCount }}
    - + {{ $t("nav.chats") }}
  • - + {{ $t("nav.friend_requests") }}
  • - {{ $t("nav.about") }} + {{ $t("nav.about") }}
    • diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index 857727a4..b609ae04 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -18,7 +18,10 @@ href="#" class="unmute" @click.prevent="toggleMute" - > + >
    {{ notification.from_profile.name }} - + {{ $t('notifications.favorited_you') }} {{ $t('notifications.repeated_you') }} - + {{ $t('notifications.followed_you') }} - + {{ $t('notifications.follow_request') }} - + {{ $t('notifications.migrated_to') }} @@ -120,7 +136,10 @@ v-if="needMute" href="#" @click.prevent="toggleMute" - > + >
    - +
    diff --git a/src/components/panel_loading/panel_loading.vue b/src/components/panel_loading/panel_loading.vue index 9bf3ab32..b15e7d38 100644 --- a/src/components/panel_loading/panel_loading.vue +++ b/src/components/panel_loading/panel_loading.vue @@ -1,7 +1,11 @@ @@ -61,7 +65,10 @@ v-if="showPinned" class="pin" > - + {{ $t('status.pinned') }}
    - + > + - + - + - +
    @@ -230,7 +253,7 @@ icon="reply" size="lg" flip="horizontal" - /> + /> @@ -358,7 +381,6 @@ @onSuccess="clearError" /> -
    - +
    diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index ab17cbbc..aaf0349c 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -92,7 +92,11 @@ v-else class="new-status-notification text-center panel-footer" > - + diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue index 1e546fae..8099ddd5 100644 --- a/src/components/timeline_menu/timeline_menu.vue +++ b/src/components/timeline_menu/timeline_menu.vue @@ -16,27 +16,52 @@
    • - {{ $t("nav.timeline") }} + {{ $t("nav.timeline") }}
    • - {{ $t("nav.bookmarks") }} + {{ $t("nav.bookmarks") }}
    • - {{ $t("nav.dms") }} + {{ $t("nav.dms") }}
    • - {{ $t("nav.public_tl") }} + {{ $t("nav.public_tl") }}
    • - {{ $t("nav.twkn") }} + {{ $t("nav.twkn") }}
    @@ -46,7 +71,10 @@ class="title timeline-menu-title" > {{ timelineName() }} - + diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 6c35c781..c5f10b75 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -21,7 +21,11 @@ :user="user" /> - + - + Striped bg - + @@ -162,8 +176,15 @@ :title="$t('user_card.unsubscribe')" > - - + + diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue index dd6977d2..95673733 100644 --- a/src/components/user_list_popover/user_list_popover.vue +++ b/src/components/user_list_popover/user_list_popover.vue @@ -31,7 +31,11 @@
    - +
    -- cgit v1.2.3-70-g09d2 From b6cf2bcefd5ddd20c11ee4b0d0f94e29e8f59c40 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 28 Oct 2020 21:31:16 +0200 Subject: improved the semantics for our icon scale, fixed preview, fixed navbar desktop --- src/App.scss | 12 ++++--- src/App.vue | 9 ++--- src/components/chat_new/chat_new.vue | 3 +- src/components/extra_buttons/extra_buttons.vue | 2 +- src/components/favorite_button/favorite_button.vue | 6 ++-- .../global_notice_list/global_notice_list.vue | 2 +- src/components/image_cropper/image_cropper.vue | 2 +- src/components/login_form/login_form.vue | 2 +- src/components/mfa_form/recovery_form.vue | 2 +- src/components/mfa_form/totp_form.vue | 2 +- src/components/mobile_nav/mobile_nav.vue | 9 ++--- src/components/nav_panel/nav_panel.vue | 41 ++++++++-------------- src/components/notification/notification.vue | 8 ++--- src/components/password_reset/password_reset.vue | 2 +- .../post_status_form/post_status_form.vue | 16 ++++----- src/components/react_button/react_button.vue | 3 +- src/components/reply_button/reply_button.vue | 6 ++-- src/components/retweet_button/retweet_button.vue | 9 ++--- src/components/scope_selector/scope_selector.vue | 12 +++---- src/components/search_bar/search_bar.vue | 6 ++-- src/components/settings_modal/tabs/profile_tab.vue | 4 +-- .../settings_modal/tabs/theme_tab/preview.vue | 8 ++--- src/components/side_drawer/side_drawer.vue | 38 +++++++------------- src/components/status/status.vue | 24 +++++-------- src/components/timeline_menu/timeline_menu.vue | 15 +++----- src/components/user_card/user_card.vue | 3 +- 26 files changed, 95 insertions(+), 151 deletions(-) (limited to 'src/App.vue') diff --git a/src/App.scss b/src/App.scss index 06915e16..6884f314 100644 --- a/src/App.scss +++ b/src/App.scss @@ -812,14 +812,18 @@ nav { } } -.button-icon { - &.svg-inline--fa.fa-lg { - display: inline-block; - padding: 0 0.3em; +.fa-scale-110 { + &.svg-inline--fa { font-size: 1.1em; } } +.fa-old-padding { + &.svg-inline--fa { + padding: 0 0.3em; + } +} + @keyframes shakeError { 0% { transform: translateX(0); diff --git a/src/App.vue b/src/App.vue index c27f51bf..6e44c7e9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -53,8 +53,7 @@ > @@ -66,8 +65,7 @@ target="_blank" > @@ -78,8 +76,7 @@ @click.prevent="logout" > diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue index 8f02a699..f3894a3a 100644 --- a/src/components/chat_new/chat_new.vue +++ b/src/components/chat_new/chat_new.vue @@ -20,8 +20,7 @@
    diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue index 4bf1e62a..f32ea02d 100644 --- a/src/components/extra_buttons/extra_buttons.vue +++ b/src/components/extra_buttons/extra_buttons.vue @@ -107,7 +107,7 @@
    diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue index 6c7bfdab..dfe12f86 100644 --- a/src/components/favorite_button/favorite_button.vue +++ b/src/components/favorite_button/favorite_button.vue @@ -2,11 +2,10 @@
    {{ status.fave_num }} @@ -14,10 +13,9 @@
    {{ status.fave_num }}
    diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue index 06b6af9c..8a33b9eb 100644 --- a/src/components/global_notice_list/global_notice_list.vue +++ b/src/components/global_notice_list/global_notice_list.vue @@ -10,7 +10,7 @@ {{ $t(notice.messageKey, notice.messageArgs) }}
    diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue index 605f7427..75def612 100644 --- a/src/components/image_cropper/image_cropper.vue +++ b/src/components/image_cropper/image_cropper.vue @@ -43,7 +43,7 @@ > {{ submitErrorMsg }} diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue index 4ab5d192..a1f77210 100644 --- a/src/components/login_form/login_form.vue +++ b/src/components/login_form/login_form.vue @@ -77,7 +77,7 @@
    {{ error }} diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue index f6526d2a..78953649 100644 --- a/src/components/mfa_form/recovery_form.vue +++ b/src/components/mfa_form/recovery_form.vue @@ -55,7 +55,7 @@
    {{ error }} diff --git a/src/components/mfa_form/totp_form.vue b/src/components/mfa_form/totp_form.vue index 0c6412ea..9401cad5 100644 --- a/src/components/mfa_form/totp_form.vue +++ b/src/components/mfa_form/totp_form.vue @@ -58,7 +58,7 @@ {{ error }} diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue index db9b0ba0..d2bc65ab 100644 --- a/src/components/mobile_nav/mobile_nav.vue +++ b/src/components/mobile_nav/mobile_nav.vue @@ -16,8 +16,7 @@ @click.stop.prevent="toggleMobileSidebar()" >
    diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index 4755d7b7..e7301328 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -9,22 +9,18 @@ > - {{ $t("nav.timelines") }} + />{{ $t("nav.timelines") }}
  • - {{ $t("nav.interactions") }} + />{{ $t("nav.interactions") }}
  • @@ -37,22 +33,18 @@
    • - {{ $t("nav.chats") }} + />{{ $t("nav.chats") }}
  • - {{ $t("nav.friend_requests") }} + />{{ $t("nav.friend_requests") }} @@ -94,7 +85,7 @@ } .follow-request-count { - margin: -6px 10px; + vertical-align: bottom; background-color: $fallback--bg; background-color: var(--input, $fallback--faint); } @@ -126,7 +117,8 @@ a { display: block; - padding: 0.8em 0.85em; + align-items: stretch; + padding: 0.9em 1em; &:hover { background-color: $fallback--lightBg; @@ -156,13 +148,8 @@ } } - .button-icon { - margin-left: -0.1em; - margin-right: 0.2em; - } - - .button-icon:before { - width: 1.1em; + .fa-scale-110 { + margin-right: 0.8em; } } diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index b609ae04..2bbde108 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -19,7 +19,7 @@ class="unmute" @click.prevent="toggleMute" >
    • @@ -137,7 +137,7 @@ href="#" @click.prevent="toggleMute" > @@ -157,13 +157,13 @@ >
    diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue index ae7b0e26..a0ac8941 100644 --- a/src/components/reply_button/reply_button.vue +++ b/src/components/reply_button/reply_button.vue @@ -2,9 +2,8 @@
    diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue index 706c6b81..b234f3d9 100644 --- a/src/components/retweet_button/retweet_button.vue +++ b/src/components/retweet_button/retweet_button.vue @@ -3,9 +3,8 @@ @@ -25,9 +23,8 @@
    {{ status.repeat_num }} diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue index a43af23b..a22a4fda 100644 --- a/src/components/scope_selector/scope_selector.vue +++ b/src/components/scope_selector/scope_selector.vue @@ -12,8 +12,7 @@ >
    diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue index 442e91b2..f1c3fd7a 100644 --- a/src/components/search_bar/search_bar.vue +++ b/src/components/search_bar/search_bar.vue @@ -8,8 +8,7 @@ :title="$t('nav.search')" > @@ -34,10 +33,9 @@ diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue index 5a659fc8..d62bc392 100644 --- a/src/components/settings_modal/tabs/profile_tab.vue +++ b/src/components/settings_modal/tabs/profile_tab.vue @@ -235,7 +235,7 @@ > Error: {{ bannerUploadError }} @@ -286,7 +286,7 @@ Error: {{ backgroundUploadError }} diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue index 20201e18..3174fd7c 100644 --- a/src/components/settings_modal/tabs/theme_tab/preview.vue +++ b/src/components/settings_modal/tabs/theme_tab/preview.vue @@ -42,25 +42,25 @@
    diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index 2a4d794a..eac0ddb2 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -37,9 +37,8 @@ > {{ $t("login.login") }} @@ -50,9 +49,8 @@ > {{ $t("nav.timelines") }} @@ -66,9 +64,8 @@ style="position: relative" > {{ $t("nav.chats") }} {{ $t("nav.interactions") }} @@ -97,9 +93,8 @@ > {{ $t("nav.friend_requests") }} {{ $t("shoutbox.title") }} @@ -131,9 +125,8 @@ > {{ $t("nav.search") }} @@ -144,9 +137,8 @@ > {{ $t("nav.who_to_follow") }} @@ -157,9 +149,8 @@ @click="openSettingsModal" > {{ $t("settings.settings") }} @@ -167,9 +158,8 @@
  • {{ $t("nav.about") }} @@ -183,9 +173,8 @@ target="_blank" > {{ $t("nav.administration") }} @@ -199,9 +188,8 @@ @click="doLogout" > {{ $t("login.logout") }} @@ -284,7 +272,7 @@ --lightText: var(--popoverLightText, $fallback--lightText); --icon: var(--popoverIcon, $fallback--icon); - .button-icon:before { + .fa-scale-110 fa-old-padding:before { width: 1.1em; } } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index c94862d4..21412faa 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -11,7 +11,7 @@ > {{ error }} @@ -22,7 +22,7 @@ @@ -49,13 +49,12 @@
    • @@ -186,9 +185,8 @@ :title="status.visibility | capitalize" >     @@ -249,9 +244,8 @@ @click.prevent="gotoOriginal(status.in_reply_to_status_id)" > {{ $t("nav.timeline") }}     @@ -28,8 +27,7 @@ {{ $t("nav.bookmarks") }} @@ -38,8 +36,7 @@ {{ $t("nav.dms") }} @@ -48,8 +45,7 @@ {{ $t("nav.public_tl") }} @@ -58,8 +54,7 @@ {{ $t("nav.twkn") }} diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index c5f10b75..55e231d2 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -22,9 +22,8 @@ /> -- cgit v1.2.3-70-g09d2 From 633349ddff2fd96298ce26ac2d3c404edb1ebbf3 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 29 Oct 2020 21:13:31 +0200 Subject: Refactor desktop navbar into a component, change layout to grid for better compatibility with search field and simpler CSS --- src/App.js | 49 +---- src/App.scss | 119 ------------- src/App.vue | 75 +------- src/boot/after_store.js | 1 + src/components/desktop_nav/desktop_nav.js | 89 ++++++++++ src/components/desktop_nav/desktop_nav.scss | 112 ++++++++++++ src/components/desktop_nav/desktop_nav.vue | 79 ++++++++ src/components/mobile_nav/mobile_nav.vue | 267 +++++++++++++++------------- src/components/search_bar/search_bar.vue | 77 ++++---- src/modules/instance.js | 1 + static/config.json | 1 + 11 files changed, 465 insertions(+), 405 deletions(-) create mode 100644 src/components/desktop_nav/desktop_nav.js create mode 100644 src/components/desktop_nav/desktop_nav.scss create mode 100644 src/components/desktop_nav/desktop_nav.vue (limited to 'src/App.vue') diff --git a/src/App.js b/src/App.js index ded772fa..4871b4ac 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,6 @@ import UserPanel from './components/user_panel/user_panel.vue' import NavPanel from './components/nav_panel/nav_panel.vue' import Notifications from './components/notifications/notifications.vue' -import SearchBar from './components/search_bar/search_bar.vue' import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue' import FeaturesPanel from './components/features_panel/features_panel.vue' import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue' @@ -11,6 +10,7 @@ import MediaModal from './components/media_modal/media_modal.vue' import SideDrawer from './components/side_drawer/side_drawer.vue' import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue' import MobileNav from './components/mobile_nav/mobile_nav.vue' +import DesktopNav from './components/desktop_nav/desktop_nav.vue' import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue' import PostStatusModal from './components/post_status_modal/post_status_modal.vue' import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue' @@ -22,7 +22,6 @@ export default { UserPanel, NavPanel, Notifications, - SearchBar, InstanceSpecificPanel, FeaturesPanel, WhoToFollowPanel, @@ -31,6 +30,7 @@ export default { SideDrawer, MobilePostStatusButton, MobileNav, + DesktopNav, SettingsModal, UserReportingModal, PostStatusModal, @@ -38,14 +38,6 @@ export default { }, data: () => ({ mobileActivePanel: 'timeline', - searchBarHidden: true, - supportsMask: window.CSS && window.CSS.supports && ( - window.CSS.supports('mask-size', 'contain') || - window.CSS.supports('-webkit-mask-size', 'contain') || - window.CSS.supports('-moz-mask-size', 'contain') || - window.CSS.supports('-ms-mask-size', 'contain') || - window.CSS.supports('-o-mask-size', 'contain') - ) }), created () { // Load the locale from the storage @@ -61,28 +53,6 @@ export default { background () { return this.currentUser.background_image || this.$store.state.instance.background }, - enableMask () { return this.supportsMask && this.$store.state.instance.logoMask }, - logoStyle () { - return { - 'visibility': this.enableMask ? 'hidden' : 'visible' - } - }, - logoMaskStyle () { - return this.enableMask ? { - 'mask-image': `url(${this.$store.state.instance.logo})` - } : { - 'background-color': this.enableMask ? '' : 'transparent' - } - }, - logoBgStyle () { - return Object.assign({ - 'margin': `${this.$store.state.instance.logoMargin} 0`, - opacity: this.searchBarHidden ? 1 : 0 - }, this.enableMask ? {} : { - 'background-color': this.enableMask ? '' : 'transparent' - }) - }, - logo () { return this.$store.state.instance.logo }, bgStyle () { return { 'background-image': `url(${this.background})` @@ -93,9 +63,7 @@ export default { '--body-background-image': `url(${this.background})` } }, - sitename () { return this.$store.state.instance.name }, chat () { return this.$store.state.chat.channel.state === 'joined' }, - hideSitename () { return this.$store.state.instance.hideSitename }, suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled }, showInstanceSpecificPanel () { return this.$store.state.instance.showInstanceSpecificPanel && @@ -112,19 +80,6 @@ export default { } }, methods: { - scrollToTop () { - window.scrollTo(0, 0) - }, - logout () { - this.$router.replace('/main/public') - this.$store.dispatch('logout') - }, - onSearchBarToggled (hidden) { - this.searchBarHidden = hidden - }, - openSettingsModal () { - this.$store.dispatch('openSettingsModal') - }, updateMobileState () { const mobileLayout = windowWidth() <= 800 const layoutHeight = windowHeight() diff --git a/src/App.scss b/src/App.scss index 6884f314..05e73b4b 100644 --- a/src/App.scss +++ b/src/App.scss @@ -359,119 +359,10 @@ i[class*=icon-], .svg-inline--fa { padding: 0 10px 0 10px; } -.item { - flex: 1; - line-height: 50px; - height: 50px; - overflow: hidden; - display: flex; - flex-wrap: wrap; - - .nav-icon { - margin-left: 0.2em; - width: 2em; - text-align: center; - } - - &.right { - justify-content: flex-end; - } -} - .auto-size { flex: 1 } -.nav-bar { - padding: 0; - width: 100%; - align-items: center; - position: fixed; - height: 50px; - box-sizing: border-box; - - button { - &, i[class*=icon-], svg { - color: $fallback--text; - color: var(--btnTopBarText, $fallback--text); - } - - &:active { - background-color: $fallback--fg; - background-color: var(--btnPressedTopBar, $fallback--fg); - color: $fallback--text; - color: var(--btnPressedTopBarText, $fallback--text); - } - - &:disabled { - color: $fallback--text; - color: var(--btnDisabledTopBarText, $fallback--text); - } - - &.toggled { - color: $fallback--text; - color: var(--btnToggledTopBarText, $fallback--text); - background-color: $fallback--fg; - background-color: var(--btnToggledTopBar, $fallback--fg) - } - } - - - .logo { - display: flex; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - - align-items: stretch; - justify-content: center; - flex: 0 0 auto; - z-index: -1; - transition: opacity; - transition-timing-function: ease-out; - transition-duration: 100ms; - - .mask { - mask-repeat: no-repeat; - mask-position: center; - mask-size: contain; - background-color: $fallback--fg; - background-color: var(--topBarText, $fallback--fg); - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - } - - img { - height: 100%; - object-fit: contain; - display: block; - flex: 0; - } - } - - .inner-nav { - position: relative; - margin: auto; - box-sizing: border-box; - padding-left: 10px; - padding-right: 10px; - display: flex; - align-items: center; - flex-basis: 970px; - height: 50px; - - a, a i, a svg { - color: $fallback--link; - color: var(--topBarLink, $fallback--link); - } - } -} - main-router { flex: 1; } @@ -781,16 +672,6 @@ nav { } } -@media all and (min-width: 800px) { - .logo { - opacity: 1 !important; - } -} - -.item.right { - text-align: right; -} - .visibility-notice { padding: .5em; border: 1px solid $fallback--faint; diff --git a/src/App.vue b/src/App.vue index 6e44c7e9..b4eb0524 100644 --- a/src/App.vue +++ b/src/App.vue @@ -9,80 +9,7 @@ :style="bgStyle" /> - +
    { ? 0 : config.logoMargin }) + copyInstanceOption('logoLeft') store.commit('authFlow/setInitialStrategy', config.loginMethod) copyInstanceOption('redirectRootNoLogin') diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js new file mode 100644 index 00000000..ee99ec10 --- /dev/null +++ b/src/components/desktop_nav/desktop_nav.js @@ -0,0 +1,89 @@ +import SearchBar from 'components/search_bar/search_bar.vue' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faSignInAlt, + faSignOutAlt, + faHome, + faComments, + faBell, + faUserPlus, + faBullhorn, + faSearch, + faTachometerAlt, + faCog, + faInfoCircle +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faSignInAlt, + faSignOutAlt, + faHome, + faComments, + faBell, + faUserPlus, + faBullhorn, + faSearch, + faTachometerAlt, + faCog, + faInfoCircle +) + +export default { + components: { + SearchBar + }, + data: () => ({ + searchBarHidden: true, + supportsMask: window.CSS && window.CSS.supports && ( + window.CSS.supports('mask-size', 'contain') || + window.CSS.supports('-webkit-mask-size', 'contain') || + window.CSS.supports('-moz-mask-size', 'contain') || + window.CSS.supports('-ms-mask-size', 'contain') || + window.CSS.supports('-o-mask-size', 'contain') + ) + }), + computed: { + enableMask () { return this.supportsMask && this.$store.state.instance.logoMask }, + logoStyle () { + return { + 'visibility': this.enableMask ? 'hidden' : 'visible' + } + }, + logoMaskStyle () { + return this.enableMask ? { + 'mask-image': `url(${this.$store.state.instance.logo})` + } : { + 'background-color': this.enableMask ? '' : 'transparent' + } + }, + logoBgStyle () { + return Object.assign({ + 'margin': `${this.$store.state.instance.logoMargin} 0`, + opacity: this.searchBarHidden ? 1 : 0 + }, this.enableMask ? {} : { + 'background-color': this.enableMask ? '' : 'transparent' + }) + }, + logo () { return this.$store.state.instance.logo }, + sitename () { return this.$store.state.instance.name }, + hideSitename () { return this.$store.state.instance.hideSitename }, + logoLeft () { return this.$store.state.instance.logoLeft }, + currentUser () { return this.$store.state.users.currentUser }, + privateMode () { return this.$store.state.instance.private }, + }, + methods: { + scrollToTop () { + window.scrollTo(0, 0) + }, + logout () { + this.$router.replace('/main/public') + this.$store.dispatch('logout') + }, + onSearchBarToggled (hidden) { + this.searchBarHidden = hidden + }, + openSettingsModal () { + this.$store.dispatch('openSettingsModal') + }, + } +} diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss new file mode 100644 index 00000000..028692a9 --- /dev/null +++ b/src/components/desktop_nav/desktop_nav.scss @@ -0,0 +1,112 @@ +@import '../../_variables.scss'; + +.DesktopNav { + height: 50px; + width: 100%; + position: fixed; + + .inner-nav { + display: grid; + grid-template-rows: 50px; + grid-template-columns: 2fr auto 2fr; + grid-template-areas: "sitename logo actions"; + box-sizing: border-box; + padding: 0 1.2em; + margin: auto; + max-width: 980px; + } + + &.-logoLeft { + grid-template-columns: auto 2fr 2fr; + grid-template-areas: "logo sitename actions"; + } + + button { + &, svg { + color: $fallback--text; + color: var(--btnTopBarText, $fallback--text); + } + + &:active { + background-color: $fallback--fg; + background-color: var(--btnPressedTopBar, $fallback--fg); + color: $fallback--text; + color: var(--btnPressedTopBarText, $fallback--text); + } + + &:disabled { + color: $fallback--text; + color: var(--btnDisabledTopBarText, $fallback--text); + } + + &.toggled { + color: $fallback--text; + color: var(--btnToggledTopBarText, $fallback--text); + background-color: $fallback--fg; + background-color: var(--btnToggledTopBar, $fallback--fg) + } + } + + .logo { + grid-area: logo; + position: relative; + transition: opacity; + transition-timing-function: ease-out; + transition-duration: 100ms; + + @media all and (min-width: 800px) { + opacity: 1 !important; + } + + .mask { + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + background-color: $fallback--fg; + background-color: var(--topBarText, $fallback--fg); + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + } + + img { + display: inline-block; + height: 50px; + } + } + + .nav-icon { + margin-left: 0.2em; + width: 2em; + text-align: center; + } + + a, a svg { + color: $fallback--link; + color: var(--topBarLink, $fallback--link); + } + + .sitename { + grid-area: sitename; + } + + .actions { + grid-area: actions; + } + + .item { + flex: 1; + line-height: 50px; + height: 50px; + overflow: hidden; + display: flex; + flex-wrap: wrap; + + &.right { + justify-content: flex-end; + text-align: right; + } + } +} diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue new file mode 100644 index 00000000..d166be08 --- /dev/null +++ b/src/components/desktop_nav/desktop_nav.vue @@ -0,0 +1,79 @@ + + + + diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue index d2bc65ab..30b15149 100644 --- a/src/components/mobile_nav/mobile_nav.vue +++ b/src/components/mobile_nav/mobile_nav.vue @@ -1,55 +1,53 @@