Compare commits

..

349 Commits

Author SHA1 Message Date
HJ 82db31f7ac Merge branch 'ci-update' into 'develop'
Update gitlab CI file to avoid arm runner that keeps failing certain resource-intensive tasks

See merge request pleroma/pleroma-fe!1914
2024-05-23 16:45:17 +00:00
HJ 5810f6f431 changelog 2024-05-23 08:38:17 +00:00
HJ 8b07d0201e Update gitlab CI file to avoid arm runner that keeps failing certain resource-intensive tasks 2024-05-23 08:36:15 +00:00
HJ fd1011f622 Merge branch 'scrobbles-age' into 'develop'
Add setting to only show scrobbles newer than certain age.

See merge request pleroma/pleroma-fe!1904
2024-05-22 12:25:24 +00:00
Henry Jameson eb27f1205b Merge branch 'scrobbles-age' of ssh://git.pleroma.social:2222/pleroma/pleroma-fe into scrobbles-age 2024-05-22 15:20:42 +03:00
Henry Jameson daa39b6e8f changelog 2024-05-22 15:19:00 +03:00
HJ 3e99006e2a Merge branch 'quotes-count' into 'develop'
Display quotes count on posts and add quotes list page

See merge request pleroma/pleroma-fe!1885
2024-05-22 12:15:57 +00:00
HJ e232ba0ec5 Merge branch 'weblate' into 'develop'
Translations update from Pleroma Weblate

See merge request pleroma/pleroma-fe!1910
2024-05-22 12:15:32 +00:00
HJ 3128ea57e1 Merge branch 'themes3-cache' into 'develop'
implement a simple caching system for themes 3

See merge request pleroma/pleroma-fe!1911
2024-05-22 12:15:21 +00:00
Phantasm 564cc73d31 Translated using Weblate (Czech)
Currently translated at 84.2% (960 of 1140 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/cs/
2024-04-30 20:02:13 +00:00
HJ 9d2572ffdb Update status.scss 2024-04-29 08:09:05 +00:00
HJ a4264b9cd2 Apply 1 suggestion(s) to 1 file(s) 2024-04-29 07:39:00 +00:00
HJ 51709ad318 Merge branch 'develop' into 'scrobbles-age'
# Conflicts:
#   src/i18n/en.json
2024-04-28 19:05:18 +00:00
marcin mikołajczak 4de9daa114 Apply 1 suggestion(s) to 1 file(s)
Co-authored-by: marcin mikołajczak <me@mkljczk.pl>
2024-04-28 18:56:10 +00:00
Phantasm b19749c320 Translated using Weblate (Czech)
Currently translated at 84.5% (960 of 1136 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/cs/
2024-04-28 17:29:25 +00:00
HJ 3056017f8e Merge branch 'eintei-port-mute-nsfw' into 'develop'
Ability to mute nsfw posts

Closes #1288

See merge request pleroma/pleroma-fe!1913
2024-04-28 17:29:17 +00:00
HJ 36f2fef55a Merge branch 'notif_types' into 'develop'
Add more notification types

See merge request pleroma/pleroma-fe!1912
2024-04-28 17:29:07 +00:00
Henry Jameson 6ff0a7f021 refactor sizesetting into unitsetting allowing more unit types with i18n support 2024-04-24 15:58:26 +03:00
Henry Jameson 6473260487 changelog 2024-04-24 15:25:21 +03:00
Henry Jameson 046678086f add explanation to why post is muted for sensitive muting 2024-04-24 15:22:19 +03:00
Alexander Tumin 59656af44c Allow muting sensitive posts in public timelines 2024-04-24 15:18:11 +03:00
Henry Jameson 6ea69eb51a checksum -> engineChecksum for clarity 2024-04-24 15:09:52 +03:00
Henry Jameson c40b02ac2f changelog 2024-04-22 23:46:12 +03:00
Henry Jameson af236d71f0 changelog 2024-04-22 23:42:08 +03:00
Henry Jameson 5505a89e8a implement a simple caching system for themes 3 2024-04-22 23:40:39 +03:00
Henry Jameson b2e10ac8c1 add more notification types to ask backend about 2024-04-22 22:37:37 +03:00
HJ 15dde2d372 Merge branch 'fix-poll-notifs' into 'develop'
Add poll end notifications to fetched types

Closes pleroma#3230

See merge request pleroma/pleroma-fe!1905
2024-04-22 19:30:29 +00:00
HJ 2cbfcb6a6d Merge branch 'tusooa/status-loading-indicator' into 'develop'
Display loading and error indicator for conversation page

See merge request pleroma/pleroma-fe!1907
2024-04-22 19:23:52 +00:00
HJ e853d746b0 Merge branch 'weblate' into 'develop'
Translations update from Pleroma Weblate

See merge request pleroma/pleroma-fe!1909
2024-04-18 08:25:22 +00:00
SyoBoN 2ede1f669a Translated using Weblate (Japanese (ja_PEDANTIC))
Currently translated at 96.0% (1091 of 1136 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_PEDANTIC/
2024-04-17 23:37:32 +00:00
HJ 09313a9fcd Merge branch 'public-favorites' into 'develop'
Fix fetching favorites for own profile

See merge request pleroma/pleroma-fe!1908
2024-04-16 08:16:33 +00:00
marcin mikołajczak 1ceffb4e71 Fix fetching favorites for own profile
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
2024-04-15 23:54:46 +02:00
tusooa b173741f87
Display loading and error indicator for conversation page 2024-04-14 11:46:29 -04:00
tusooa 39269c4829 Merge branch 'weblate' into 'develop'
Translations update from Pleroma Weblate

See merge request pleroma/pleroma-fe!1893
2024-04-14 15:21:46 +00:00
Gllm R 3d025eb7bf Translated using Weblate (French)
Currently translated at 99.2% (1128 of 1136 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/fr/
2024-04-07 18:02:12 +00:00
Gllm R d6ef47f1c3 Translated using Weblate (French)
Currently translated at 83.9% (954 of 1136 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/fr/
2024-04-06 14:54:05 +00:00
jammer lammer 82af61f5b4 Translated using Weblate (Portuguese)
Currently translated at 69.8% (793 of 1136 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/pt/
2024-04-06 14:54:05 +00:00
Phantasm eb03844387 Translated using Weblate (Czech)
Currently translated at 84.5% (960 of 1136 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/cs/
2024-04-06 14:54:05 +00:00
Phantasm b610caeca8 Translated using Weblate (English)
Currently translated at 100.0% (1136 of 1136 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/en/
2024-04-06 14:54:05 +00:00
Phantasm 9b65c30c12 Translated using Weblate (Czech)
Currently translated at 74.8% (850 of 1136 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/cs/
2024-04-06 14:54:05 +00:00
Phantasm 1b667fbb01 Translated using Weblate (English)
Currently translated at 100.0% (1136 of 1136 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/en/
2024-04-06 14:54:05 +00:00
HJ 0635a6c131 Merge branch 'themes3-fixes' into 'develop'
Themes 3 fixes

Closes #1301 and #1303

See merge request pleroma/pleroma-fe!1906
2024-04-06 14:53:53 +00:00
Henry Jameson 3eabdf9ded lint 2024-04-04 22:58:50 +03:00
Henry Jameson ece159822c force user profile links in summary to be text colored... for now. 2024-04-04 22:50:04 +03:00
Henry Jameson c0010d0f48 fix transparent popovers 2024-04-04 22:45:13 +03:00
Henry Jameson 8ead084421 fix #1301 2024-04-04 22:40:50 +03:00
Henry Jameson 19ab07af96 changelog 2024-04-03 23:08:13 +03:00
Henry Jameson 1c23a16bac try to apply lazy part in one go while still having chunked processing 2024-04-03 22:57:44 +03:00
Henry Jameson 9806eea12e only show interface after theme has been applied 2024-04-03 22:52:12 +03:00
Henry Jameson e8159164e3 color input improvements 2024-04-03 22:43:36 +03:00
Henry Jameson dd4867d8de refactor style setter to separate theme generation from theme application 2024-04-03 22:42:34 +03:00
Henry Jameson 2382810823 fix repeater links 2024-04-03 21:27:25 +03:00
Henry Jameson fbea4f9986 fix shout 2024-04-03 21:27:19 +03:00
Henry Jameson 940df1efa7 add fallbacks for lazy stuff loading 2024-04-03 21:10:27 +03:00
Henry Jameson 9bdc8d9b9c fix transparency blur in statuses on firefox 2024-03-29 13:36:43 +02:00
Phantasm d5575f9c13
Add poll end notifications to fetched types 2024-03-26 19:17:55 +01:00
HJ d7f744d281 Merge branch 'themes3' into 'develop'
Themes 3.0 / Pleroma ISS (Interface Style Sheets) [Side A]

See merge request pleroma/pleroma-fe!1892
2024-03-26 17:13:41 +00:00
Henry Jameson c298611af2 fix tests and make them pass on shit hardware 2024-03-26 18:49:29 +02:00
Henry Jameson 300b3a2517 fix emoji react buttons in notifications sidebar 2024-03-26 17:20:53 +02:00
Henry Jameson def68e9cda scrobbles age setting 2024-03-25 23:35:28 +02:00
Henry Jameson 4c10cf21a0 please the stylint 2024-03-25 19:13:04 +02:00
Henry Jameson f3d3901a92 more tests 2024-03-25 19:07:28 +02:00
Henry Jameson c1568ad2ba fix massive issue in getAllPossibleCombinations 2024-03-25 18:18:48 +02:00
Henry Jameson 1050fed558 fix non-round panel headers 2024-03-25 17:02:36 +02:00
Henry Jameson e51278cdf1 Merge remote-tracking branch 'origin/develop' into themes3 2024-03-25 16:54:40 +02:00
Henry Jameson b925c32e67 Make unloaded statuses follow panel styling 2024-03-25 16:38:03 +02:00
Henry Jameson 46562d5318 fix unnecessary backdrop filter in timelines 2024-03-25 16:30:21 +02:00
Henry Jameson 4852f5b833 unify tabs fixes for panels 2024-03-25 16:29:24 +02:00
Henry Jameson d02a15043e fix two most annoying remaining bugs (incorrect hover in chats and
overflowing avatars in interactors section)
2024-03-25 13:08:30 +02:00
HJ 23edfe7b91 Merge branch 'non-expiring-polls' into 'develop'
Hide the expiry date indication if the poll never expires

Closes #961

See merge request pleroma/pleroma-fe!1889
2024-03-22 08:17:33 +00:00
HJ 698d608591 Merge branch 'renovate/autoprefixer-10.x' into 'develop'
Update dependency autoprefixer to v10.4.19

See merge request pleroma/pleroma-fe!1898
2024-03-21 09:30:02 +00:00
Pleroma Renovate Bot fa7f6955a1 Update dependency autoprefixer to v10.4.19 2024-03-21 09:06:07 +00:00
HJ 6147f71977 Merge branch 'renovate/babel-loader-9.x' into 'develop'
Update dependency babel-loader to v9.1.3

See merge request pleroma/pleroma-fe!1895
2024-03-19 14:11:30 +00:00
Pleroma Renovate Bot 69a8ab7a03 Update dependency babel-loader to v9.1.3 2024-03-19 08:52:42 +00:00
HJ 90082a0d04 Merge branch 'renovate/autoprefixer-10.x' into 'develop'
Update dependency autoprefixer to v10.4.18

See merge request pleroma/pleroma-fe!1878
2024-03-18 13:36:18 +00:00
HJ c0961a4420 Merge branch 'renovate/vue-babel-plugin-jsx-1.x' into 'develop'
Update dependency @vue/babel-plugin-jsx to v1.2.1

See merge request pleroma/pleroma-fe!1856
2024-03-18 13:35:56 +00:00
HJ b252af872f Merge branch 'renovate/js-cookie-3.x' into 'develop'
Update dependency js-cookie to v3.0.5

See merge request pleroma/pleroma-fe!1818
2024-03-18 13:35:14 +00:00
HJ 539deb607f Merge branch 'renovate/ungap-event-target-0.x' into 'develop'
Update dependency @ungap/event-target to v0.2.4

See merge request pleroma/pleroma-fe!1813
2024-03-18 09:53:17 +00:00
HJ 7e05be9251 Merge branch 'renovate/nightwatch-2.x' into 'develop'
Update dependency nightwatch to v2.6.25

See merge request pleroma/pleroma-fe!1831
2024-03-18 09:52:05 +00:00
HJ 255512938c Merge branch 'renovate/ruffle-rs-ruffle-0.x' into 'develop'
Update dependency @ruffle-rs/ruffle to v0.1.0-nightly.2024.3.17

See merge request pleroma/pleroma-fe!1662
2024-03-18 09:51:42 +00:00
HJ 09da683d28 Merge branch 'renovate/css-loader-6.x' into 'develop'
Update dependency css-loader to v6.10.0

See merge request pleroma/pleroma-fe!1829
2024-03-18 09:51:24 +00:00
HJ d8c50854b7 Merge branch 'renovate/vuelidate-validators-2.x' into 'develop'
Update dependency @vuelidate/validators to v2.0.4

See merge request pleroma/pleroma-fe!1805
2024-03-18 09:51:00 +00:00
Pleroma Renovate Bot 0daa824ec1 Update dependency @ruffle-rs/ruffle to v0.1.0-nightly.2024.3.17 2024-03-17 09:06:04 +00:00
Henry Jameson 472aad52e1 Use constructed stylesheet to prevent chrome from shitting itself when
you open element picker
2024-03-12 23:33:24 +02:00
tusooa 7ee55da4a3 Merge branch 'weblate' into 'develop'
Translations update from Pleroma Weblate

See merge request pleroma/pleroma-fe!1888
2024-03-07 01:59:09 +00:00
Henry Jameson 1e467ac6e1 update tests 2024-03-07 01:08:04 +02:00
Henry Jameson afc94c6801 lint 2024-03-07 00:38:19 +02:00
Henry Jameson 34f23b992e fix conversations panels shadows 2024-03-07 00:37:21 +02:00
Henry Jameson 6d77bc2bd5 more transparent panels fixes 2024-03-07 00:28:16 +02:00
Henry Jameson ce5552ae3c fix more transparent panels 2024-03-06 20:35:03 +02:00
Henry Jameson 1b391b6a69 fix dialogs not having styles at all 2024-03-06 20:27:05 +02:00
Henry Jameson 7d1e787f55 fix unstyled buttons focus+active+hover styles 2024-03-06 17:42:09 +02:00
Henry Jameson 7df207c9d4 emoji management fixes for themes3 2024-03-06 10:34:56 +02:00
Henry Jameson 962bce5ee3 Merge remote-tracking branch 'origin/develop' into themes3 2024-03-06 09:35:46 +02:00
Kian-ting Tan e96487ffd5 Translated using Weblate (Chinese (Min Nan) (nan_TW))
Currently translated at 97.9% (1070 of 1092 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/nan_TW/
2024-03-05 16:29:29 +00:00
SyoBoN 016c69e466 Translated using Weblate (Japanese (ja_PEDANTIC))
Currently translated at 98.0% (1071 of 1092 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_PEDANTIC/
2024-03-05 16:29:29 +00:00
Phantasm 9c2046e6a7 Translated using Weblate (Czech)
Currently translated at 74.6% (815 of 1092 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/cs/
2024-03-05 16:29:29 +00:00
Phantasm e22f571874 Translated using Weblate (Czech)
Currently translated at 71.2% (778 of 1092 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/cs/
2024-03-05 16:29:29 +00:00
SyoBoN a104098467 Translated using Weblate (Japanese (ja_PEDANTIC))
Currently translated at 98.0% (1071 of 1092 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_PEDANTIC/
2024-03-05 16:29:29 +00:00
SyoBoN c29c524033 Translated using Weblate (Japanese (ja_PEDANTIC))
Currently translated at 96.4% (1053 of 1092 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_PEDANTIC/
2024-03-05 16:29:29 +00:00
Phantasm 40fa9b6ae4 Translated using Weblate (Czech)
Currently translated at 67.3% (732 of 1087 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/cs/
2024-03-05 16:29:29 +00:00
HJ 943fee9fbc Merge branch 'admin-emoji-settings' into 'develop'
Admin emoji pack settings

See merge request pleroma/pleroma-fe!1886
2024-03-05 16:29:21 +00:00
Henry Jameson 3239bd34df fix poll options 2024-03-04 23:02:21 +02:00
Henry Jameson 7f38d7d474 fix popovers 2024-03-04 22:52:54 +02:00
Henry Jameson e4f2741989 fix 2024-03-04 22:40:44 +02:00
Henry Jameson dc631c68fd fix some mistakes 2024-03-04 22:31:40 +02:00
Henry Jameson b10458e3a3 lint 2024-03-04 21:40:35 +02:00
Henry Jameson 8d99e2138a fix mentionsline buttons 2024-03-04 20:20:32 +02:00
Henry Jameson 7b1f70468b fix link preview text 2024-03-04 20:10:35 +02:00
Henry Jameson 5637e29d9c fix smol utf emoji in suggestor 2024-03-04 20:06:30 +02:00
Henry Jameson f7cd801e69 fix mentions selection 2024-03-04 19:56:06 +02:00
Henry Jameson 7e01d2083d proper selection colors 2024-03-04 19:53:45 +02:00
Henry Jameson 075f2cb903 remove all "fallback variables" 2024-03-04 19:45:42 +02:00
Henry Jameson 50a9c077fb fix new chat window 2024-03-04 19:24:18 +02:00
Henry Jameson 7238b218f9 fix badgeNotification for themes2 2024-03-04 19:10:23 +02:00
Henry Jameson 545c875a85 process chunks strictly sequentially to avoid overloading the event
queue
2024-03-04 19:03:29 +02:00
Henry Jameson a190389f3c panels/statuses are looking really good now even with transparency 2024-03-04 18:24:29 +02:00
Pleroma Renovate Bot e91e12b4b6 Update dependency autoprefixer to v10.4.18 2024-03-02 09:06:02 +00:00
HJ db33d58ba7 Merge branch 'revert-6391a6a4' into 'develop'
Reduce the timestamp pf videos so that they start at beginning

See merge request pleroma/pleroma-fe!1890
2024-02-29 20:08:03 +00:00
Henry Jameson 45a4b204c8 changelog 2024-02-29 22:04:10 +02:00
HJ 0f2c5fd972 Apply 1 suggestion(s) to 1 file(s) 2024-02-29 19:57:27 +00:00
Henry Jameson a2f2a0e409 fix autocomplete 2024-02-29 20:15:41 +02:00
Henry Jameson 01f6f89c7d interactive lists & non-interactive lists 2024-02-29 19:54:25 +02:00
Henry Jameson 23a8bee053 fix more attachments issues 2024-02-29 19:30:54 +02:00
Henry Jameson fb55c98483 fix polls options 2024-02-29 19:06:50 +02:00
Henry Jameson e7c64e47c4 undo the removal of toggled state for unstyled button since it is used 2024-02-29 18:52:27 +02:00
Henry Jameson 54e3a99bc7 Merge remote-tracking branch 'origin/develop' into themes3 2024-02-29 18:49:23 +02:00
Henry Jameson 73f6ecb21e clean up some variables, fixing search footer 2024-02-29 18:07:15 +02:00
Henry Jameson 78dcc0423e improve popover shadows (to not overlap with border) 2024-02-29 17:50:11 +02:00
Henry Jameson 28c7fac9f0 implement list item styles 2024-02-29 17:49:56 +02:00
Henry Jameson 3f6b9fbf9c user cards looking nicer now 2024-02-28 22:56:15 +02:00
Henry Jameson 7575079da9 fix badge-notificaiton color in favicon and notifications 2024-02-28 22:28:15 +02:00
Henry Jameson cf1345caca more scrollbars work 2024-02-28 15:04:01 +02:00
Henry Jameson 8e3637c059 improve scrollbars, add avatar to menu-item since it appears in
autocomplete, add wallpaper color
2024-02-28 14:57:19 +02:00
Henry Jameson 39eee4412f fix alerts in panels 2024-02-28 14:25:22 +02:00
Henry Jameson 528e7e4496 fix more annoying themes2->3 button states 2024-02-28 13:10:42 +02:00
Henry Jameson 15d8daa7ec somehow i missed this one 2024-02-28 12:51:22 +02:00
Henry Jameson e2a675e3ae oops 2024-02-28 01:26:22 +02:00
Henry Jameson fe93717d47 consistent menu-items 2024-02-28 01:23:43 +02:00
Henry Jameson f4d48e401a fix reply link being faint (didn't work before, no reason to keep it
"faint" imo)
2024-02-27 22:20:41 +02:00
Henry Jameson ec2afce97e improve performance a bit and use better "worst case" color 2024-02-27 22:02:44 +02:00
Henry Jameson e2af986323 fix global notices 2024-02-27 22:02:25 +02:00
Henry Jameson eab3bfaf0d remove fallbacks from shadow control 2024-02-27 21:43:25 +02:00
Henry Jameson d134b691cc remove button-unstyled from video attachments 2024-02-27 17:04:56 +02:00
Henry Jameson c83ddb0b2b better v1 detection, better menu-item consistency 2024-02-27 17:03:39 +02:00
Henry Jameson d3b5f76486 fix mobile drawer menu items not being fullwidth 2024-02-27 01:09:27 +02:00
Henry Jameson d8827932bc fix collapsed notifications incorrect styles 2024-02-27 01:08:04 +02:00
Henry Jameson adc47ad38a no more side effects, virtual components have their own css rules
instead of updating lower level
2024-02-27 00:55:19 +02:00
Henry Jameson 9a24d21bbd fix mobile badge in timeline 2024-02-27 00:16:22 +02:00
Henry Jameson ef2c8f077d refactor and optimize: now lazy rules are processed in chunks 2024-02-27 00:07:45 +02:00
Henry Jameson dc22386599 optimization and refactoring, rules are first flattened and then
processed, letting us to set individual rules as "lazy"
2024-02-26 21:37:40 +02:00
Henry Jameson ac85cdac68 fix themes v1 not working 2024-02-22 19:24:26 +02:00
Henry Jameson c4d218cb3e fix anon view 2024-02-22 19:15:55 +02:00
Henry Jameson 9bbf2e70c2 lint 2024-02-22 18:39:52 +02:00
Henry Jameson 1640bb61e3 last remaining core tasks done 2024-02-22 18:38:45 +02:00
Henry Jameson 339ae3e95e disable debug stuff i left on by accident in last commit 2024-02-22 18:20:09 +02:00
Henry Jameson abd1407a0b fix emoji inputs having odd paddings and line-height 2024-02-22 18:19:28 +02:00
Henry Jameson 6536fe229b fix change not being recognized 2024-02-22 18:10:30 +02:00
Henry Jameson 623a961141 changelog to make pipelines happy 2024-02-22 18:07:56 +02:00
Henry Jameson 7d2faccd4f fonts support, cleanup 2024-02-22 18:04:28 +02:00
Henry Jameson 779b3dc122 blur support, fix toggled buttons not working right 2024-02-22 15:15:08 +02:00
Henry Jameson 09e0e53ad6 opacity stuff, better debug mode 2024-02-22 14:36:56 +02:00
Henry Jameson 9e66c1184f fix notifications links 2024-02-22 01:32:52 +02:00
Henry Jameson 7f465cfdb1 fix mobile notifications 2024-02-22 01:11:47 +02:00
Henry Jameson 5e0ba2bcd9 initial work on mobile stuff 2024-02-22 01:10:24 +02:00
Henry Jameson 099a2eb27f proper polls support 2024-02-22 00:31:20 +02:00
Henry Jameson 4785c553ef small tabs improvements 2024-02-22 00:06:51 +02:00
Henry Jameson 879f520b75 tabs support + cleanup 2024-02-22 00:02:24 +02:00
Henry Jameson 8a21594dbc shadow slots work + minor fixes 2024-02-21 22:18:56 +02:00
Henry Jameson 7041d29ede add attachment to panel for post form compat 2024-02-21 14:15:25 +02:00
Henry Jameson d2f4ce442a fix attachment inputs 2024-02-21 14:05:26 +02:00
Henry Jameson f609aaba0c improve checkbox styles 2024-02-21 13:10:11 +02:00
Henry Jameson 8a47069cee improve default button styles 2024-02-21 12:33:43 +02:00
Henry Jameson 900eb34186 improve backwards compat for avatar shadows 2024-02-21 12:33:33 +02:00
Henry Jameson da0db933d9 moved themes2 stuff into theme_data.service.js 2024-02-21 12:23:10 +02:00
Henry Jameson c3e6e7c61d improvements to backcompat + fixes to topbar 2024-02-20 01:18:21 +02:00
Henry Jameson 2172529dd0 backwards compat WORKING 2024-02-20 01:05:17 +02:00
Henry Jameson 0285efadbb independence from themes3, converter/backwards compat WIP 2024-02-19 20:47:27 +02:00
Henry Jameson 23dc2d1a5b refactor ISS stuff into separate file 2024-02-19 20:05:49 +02:00
Henry Jameson 4a10417ed4 initial work on dynamic slots + move remaining css stuff into separate file 2024-02-19 19:59:38 +02:00
Henry Jameson 34aa9136db refactored most of the CSS stuff into separate file, refactored color
functions and added shadow functions, replaced JS functions in button
with PISS functions
2024-02-19 18:48:49 +02:00
Henry Jameson 11fd220734 chat styles + related improvements 2024-02-19 15:11:59 +02:00
Henry Jameson ab63ec1471 make dynamic directives have a type 2024-02-19 00:25:28 +02:00
Henry Jameson 3b520a98ad fix panel borders 2024-02-19 00:22:31 +02:00
Henry Jameson 1bc1a83a1f fix borders in statuses and linear view 2024-02-19 00:21:44 +02:00
Henry Jameson f4bf374509 cleanup and warn if there are collisions in .style.js files 2024-02-19 00:12:07 +02:00
Henry Jameson 6811191147 i'm stupid 2024-02-19 00:10:10 +02:00
Henry Jameson f0bbb75df5 properly sort, properly do icon colors, some initial attachment buttons work 2024-02-19 00:00:43 +02:00
Henry Jameson 13a289ac74 fixed oot selectors not working, added support for (webkit) scrollbars 2024-02-18 20:11:06 +02:00
Henry Jameson 3e198526e6 dynamically load .style.js files; move the files closer to related components 2024-02-18 18:40:14 +02:00
Pleroma Renovate Bot 1be1bdfa41 Update dependency nightwatch to v2.6.25 2024-02-17 09:06:38 +00:00
Henry Jameson 7c77809ff9 badge, alert(dot) improvements 2024-02-16 00:29:16 +02:00
Henry Jameson 96e3a1593a more optimizations, execution is now split into eager (for main UI) and
lazy (for modals, popovers etc) parts
2024-02-15 20:20:27 +02:00
Henry Jameson 34e4dd0a79 fix last border of menu-item 2024-02-13 02:31:33 +02:00
Henry Jameson c531391e87 fix post status form input 2024-02-13 02:31:11 +02:00
Henry Jameson c16f1d4e35 more fixes 2024-02-13 02:27:53 +02:00
Henry Jameson bcc5084409 add roundness, fix inputs 2024-02-13 02:09:43 +02:00
Henry Jameson 17b25ef0e0 avatar shadows 2024-02-12 19:58:42 +02:00
Henry Jameson 709ce1611a remove panel from popover since it's never used anywhere 2024-02-12 19:27:51 +02:00
Henry Jameson 48f106b438 separate greentext into "fun text" and make Post/Notification related components 2024-02-12 19:17:17 +02:00
Henry Jameson ae345d2c45 buttons look great now, including unstyled ones menu items work too 2024-02-12 17:26:08 +02:00
Henry Jameson 1c5f156af0 better button styles, include popovers in root 2024-02-12 03:46:40 +02:00
Henry Jameson 98f972e557 menu-item improvements 2024-02-11 23:11:28 +02:00
Henry Jameson 9ec61d0f0a comments and cleanup 2024-02-09 19:37:22 +02:00
Henry Jameson 1af8ca29f3 optimize combinatorics and defaults, now it's twice as fast! 2024-02-09 16:04:45 +02:00
Henry Jameson 1cfdde819b don't use lodash (-~300ms speed) 2024-02-09 15:52:11 +02:00
Henry Jameson 79d2184afa more performance testing 2024-02-08 18:36:59 +02:00
Henry Jameson 6df28cde9d improvements & performance testing 2024-02-08 18:18:01 +02:00
Henry Jameson a7d771e8c8 more dynamic vars, PROPER ICON COLORS 2024-02-07 18:54:00 +02:00
Henry Jameson 1229bbd855 don't use no-auto for icons for now 2024-02-07 16:17:53 +02:00
Henry Jameson 85d55c55e7 add directive to completely disable automatic text color creation 2024-02-07 16:15:25 +02:00
Henry Jameson a9efbd2553 add directive to preserve or not the text color 2024-02-07 16:09:29 +02:00
Henry Jameson d2a74ea1a2 add .input class to all inputs 2024-02-07 15:53:49 +02:00
Henry Jameson c34590c439 update, should inherit stuff properly now. 2024-02-07 15:53:34 +02:00
Henry Jameson d4795d2e3c moved default rules to component style.js files, added some basic text inheritance 2024-02-01 01:27:30 +02:00
Henry Jameson 53a4b1f9a6 better virtual components and stuff 2024-01-31 17:39:51 +02:00
Pleroma Renovate Bot 7c8b9610b9 Update dependency css-loader to v6.10.0 2024-01-31 08:55:58 +00:00
HJ 303bfa6e39 Revert "Merge branch 'video-poster' into 'develop'"
This reverts merge request !1879
2024-01-29 22:54:10 +00:00
Ekaterina Vaartis 70258a2176 Address the save and delete button bugs 2024-01-28 00:03:22 +03:00
SyoBoN 8562fd2da6
Add changelog
Signed-off-by: SyoBoN <syobon@syobon.net>
2024-01-26 17:57:00 +09:00
SyoBoN 062323c0d5
Hide the expiry date indication if the poll never expires
Signed-off-by: SyoBoN <syobon@syobon.net>
2024-01-26 17:57:00 +09:00
tusooa 9042792133 Merge branch 'tusooa/group-actor' into 'develop'
Support group actors

See merge request pleroma/pleroma-fe!1882
2024-01-24 01:50:45 +00:00
Henry Jameson ff2db7a247 fix states 2024-01-23 20:39:52 +02:00
Henry Jameson 22b32f149d shit more or less works for the very basic stuff 2024-01-23 19:18:55 +02:00
Pleroma Renovate Bot d8c22a9e42 Update dependency @vue/babel-plugin-jsx to v1.2.1 2024-01-23 08:56:34 +00:00
Henry Jameson 0729b529d7 some more stuff, generating CSS selectors from rules 2024-01-23 00:43:46 +02:00
Ekaterina Vaartis d5a5b8e254 Fix typo, add warning on replacing local pack 2024-01-22 23:43:20 +03:00
Ekaterina Vaartis 4d7a915154 displayError event, 'emits', "Edit pack" label 2024-01-22 23:14:49 +03:00
Ekaterina Vaartis 8a030d935b Separate emoji editing and upload into a separate component
Handle all state in that component
2024-01-19 23:16:21 +03:00
marcin mikołajczak d28e48e9dc Merge remote-tracking branch 'mkljczk/quotes-count' into quotes-count 2024-01-19 19:01:38 +01:00
marcin mikołajczak f6d3a66a5b shouldDisplayFavsAndRepeats
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
2024-01-19 19:01:11 +01:00
Ekaterina Vaartis aa49838355 Adjust h-element levels to be smaller 2024-01-19 19:24:36 +03:00
Ekaterina Vaartis a2133f5283 Rearrange stuff in accordance with comments on the MR, mostly
Also, add support for a custom message to the modified indicator
2024-01-18 16:24:55 +03:00
Henry Jameson 521d308a6c themes 3 initial work 2024-01-18 14:35:25 +02:00
HJ b0d0a3faf6 Merge branch 'upstream-hide-custom-emoji' into 'develop'
Add ability to hide custom emojis in picker

See merge request pleroma/pleroma-fe!1887
2024-01-17 13:23:33 +00:00
Phantasm 88a006eb1a Add ability to hide custom emojis in picker 2024-01-17 13:23:33 +00:00
marcin mikołajczak dbe9da0f09 Merge branch 'develop' into 'quotes-count'
# Conflicts:
#   src/services/api/api.service.js
2024-01-14 06:23:30 +00:00
HJ ae4e360157 Merge branch 'tusooa/registration-notice' into 'develop'
Show a dedicated registration notice page when further action is required after registering

See merge request pleroma/pleroma-fe!1851
2024-01-13 23:44:06 +00:00
tusooa 9277a0cc0c Merge branch 'weblate' into 'develop'
Translations update from Pleroma Weblate

See merge request pleroma/pleroma-fe!1884
2024-01-13 23:07:20 +00:00
tusooa 209c0a8332
Remove empty else branch and detail the comments 2024-01-13 17:44:13 -05:00
tusooa 82c0044963
Show a dedicated registration notice page when further action is required after registering 2024-01-13 17:41:57 -05:00
tusooa 9ec61c07ef Translated using Weblate (Chinese (Simplified))
Currently translated at 98.3% (1068 of 1086 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/zh_Hans/
2024-01-13 22:37:29 +00:00
tusooa f5b4b5f777 Merge branch 'public-favorites' into 'develop'
Display public favorites on user profiles if enabled

See merge request pleroma/pleroma-fe!1883
2024-01-13 22:37:22 +00:00
Ekaterina Vaartis 872dffe51b Implement pack pagination, more localization fixes 2024-01-07 16:41:17 +03:00
Ekaterina Vaartis 4eeb3e5f78 Update localization 2024-01-07 14:58:41 +03:00
Ekaterina Vaartis c218f32f6b Add a changelog entry 2024-01-07 14:50:17 +03:00
Ekaterina Vaartis f8e1d5e3e0 Remote pack download, localization 2024-01-07 14:28:34 +03:00
Ekaterina Vaartis 4451cccb3c Error handling, uploading/deleting new emojis, sorting 2024-01-07 12:26:40 +03:00
Ekaterina Vaartis 091532d577 Editing emojis in popover, pack creation/deletion
Also fixed some API calls since they weren't working apparently
2024-01-07 02:45:49 +03:00
marcin mikołajczak 6c4c8fe51f Display quotes count on posts and add quotes list page
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
2024-01-04 22:47:41 +01:00
tusooa bdf46eca5a Merge branch 'weblate' into 'develop'
Translations update from Pleroma Weblate

See merge request pleroma/pleroma-fe!1881
2023-12-31 21:19:38 +00:00
SyoBoN f3cdcaa172 Translated using Weblate (Japanese (ja_PEDANTIC))
Currently translated at 96.5% (1049 of 1086 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_PEDANTIC/
2023-12-31 13:01:33 +00:00
Xnuk Shuman 3c4eaaab2c Translated using Weblate (Korean)
Currently translated at 97.6% (1061 of 1086 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ko/
2023-12-30 05:01:33 +00:00
nixe neko f177e0fe24 Translated using Weblate (Japanese (ja_EASY))
Currently translated at 91.8% (997 of 1086 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_EASY/
2023-12-28 15:01:33 +00:00
marcin mikołajczak 6f452d672f Display public favorites on user profiles
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
2023-12-28 10:43:06 +01:00
tusooa 16f326216a
Add changelog for group actors 2023-12-27 22:56:47 -05:00
tusooa a709127a3c
Use actor type to determine whether a user is a bot 2023-12-27 22:55:58 -05:00
tusooa cc4aaccf38
Implement indicator for groups 2023-12-27 22:54:44 -05:00
tusooa fd77270564
Make user card group-aware 2023-12-27 22:40:07 -05:00
tusooa 4777bec85f
Add a description on what groups do 2023-12-27 22:36:13 -05:00
tusooa 0110fd86c2
Allow user to mark account as group 2023-12-27 22:30:19 -05:00
SyoBoN b8a036ee64 Translated using Weblate (Japanese (ja_PEDANTIC))
Currently translated at 96.5% (1048 of 1086 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_PEDANTIC/
2023-12-24 06:01:31 +00:00
SyoBoN 9b0fb0f798 Translated using Weblate (Japanese (ja_PEDANTIC))
Currently translated at 95.3% (1036 of 1086 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_PEDANTIC/
2023-12-21 15:01:42 +00:00
Ekaterina Vaartis bfdad56b0d Make the frontend config work somewhat even without DB config 2023-12-21 00:48:14 +03:00
Ekaterina Vaartis f9c85c0c49 Initial incomplete admin emoji settings implementation 2023-12-21 00:18:02 +03:00
HJ 6391a6a4ea Merge branch 'video-poster' into 'develop'
Fix video posters for Safari

See merge request pleroma/pleroma-fe!1879
2023-12-17 15:09:08 +00:00
Mark Felder 5bd8a78a7a Fix video posters on Safari 2023-12-17 00:51:56 -05:00
HJ 2b41c1cfe8 Merge branch 'notifications-thru-sw' into 'develop'
Notifications improvements.

See merge request pleroma/pleroma-fe!1873
2023-12-13 22:20:59 +00:00
Henry Jameson 55ed65331f changelog 2023-12-14 00:16:25 +02:00
Henry Jameson ff10834f1a cleanup stray console logs 2023-12-14 00:14:06 +02:00
Henry Jameson 5ad8f2cd5c clarify some bit 2023-12-13 23:55:18 +02:00
Henry Jameson 5ee8fc0aea add setting to always show push notifications 2023-12-13 23:54:12 +02:00
Henry Jameson 99d04bed2b attempt at fixing the extra notification again 2023-12-13 22:04:00 +02:00
Henry Jameson b394392d0d fix incorrect path for follow request notifications settings 2023-12-13 21:07:23 +02:00
Henry Jameson febc2aa569 lint 2023-12-13 20:56:27 +02:00
Henry Jameson 0fd1b26fb6 don't include extra notifications 2023-12-13 20:38:39 +02:00
Henry Jameson 4e8bb80dbd fix incorrect title + add counter 2023-12-13 20:37:40 +02:00
Henry Jameson bcdf336242 try to fix the "website updated in background" notification 2023-12-13 18:36:16 +02:00
Pleroma Renovate Bot 89c94f97f6 Update dependency @vuelidate/validators to v2.0.4 2023-12-12 09:06:18 +00:00
HJ a98e241a81 Merge branch 'allow-apng' into 'develop'
file_type.service: allow apng images to be rendered

See merge request pleroma/pleroma-fe!1877
2023-12-11 12:44:28 +00:00
Yonle 5eed197c3e changelog.d: add add-apng.add for commit fb4d43ce
Signed-off-by: Yonle <yonle@lecturify.net>
2023-12-11 19:08:49 +07:00
HJ 4a7b49181a Merge branch 'renovate/vuelidate-core-2.x' into 'develop'
Update dependency @vuelidate/core to v2.0.3

See merge request pleroma/pleroma-fe!1857
2023-12-11 11:50:40 +00:00
Yonle fb4d43ced2 file_type.service: allow apng images to be rendered
Signed-off-by: Yonle <yonle@lecturify.net>
2023-12-04 21:52:28 +07:00
HJ 02fff5ddd5 Merge branch 'neetzsche/accommodate-scrobble-urls' into 'develop'
Accommodate scrobble URLs when present

See merge request pleroma/pleroma-fe!1872
2023-11-30 17:51:32 +00:00
HJ ce46b97c59 Remove <img> for favicon 2023-11-30 17:47:32 +00:00
NEETzsche 730351dcd1 Accommodate scrobble URLs when present 2023-11-30 09:00:47 -07:00
HJ 358f92adff Merge branch 'weblate' into 'develop'
Translations update from Pleroma Weblate

See merge request pleroma/pleroma-fe!1870
2023-11-27 23:17:09 +00:00
Kian-ting Tan 846f9204f2 Translated using Weblate (Chinese (Min Nan) (nan_TW))
Currently translated at 100.0% (1072 of 1072 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/nan_TW/
2023-11-27 14:23:45 +00:00
tusooa 7b9e3b5c24 Translated using Weblate (Chinese (Simplified))
Currently translated at 99.8% (1069 of 1071 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/zh_Hans/
2023-11-27 14:23:45 +00:00
HJ e84e814c20 Merge branch 'post-mergeback-fixes' into 'develop'
remove duplicate changelog entries

See merge request pleroma/pleroma-fe!1876
2023-11-27 14:23:39 +00:00
Henry Jameson d580433988 remove duplicate changelog entries 2023-11-27 16:22:45 +02:00
HJ 9cbcd5b5e3 Merge branch 'master' into 'develop'
mergeback master into develop

See merge request pleroma/pleroma-fe!1875
2023-11-27 14:20:48 +00:00
HJ 83acbf953a Merge branch 'release/2.6.x' into 'master'
merge 2.6.x to master since 2.6.1 release

See merge request pleroma/pleroma-fe!1874
2023-11-27 13:48:43 +00:00
Henry Jameson 6c78b59c99 version bunp 2023-11-27 15:38:16 +02:00
Henry Jameson 2cddc138e5 2.6.1 changelog 2023-11-27 15:37:48 +02:00
HJ 55ecb5239a Merge branch 'admin-dashboard-fixes' into 'develop'
Fixes and minor improvements for admin dashboard

See merge request pleroma/pleroma-fe!1863

(cherry picked from commit d21e3d5de2)

f354cef0 fix no feedback and no dropdown close for actions in frontends tab,
c99390e8 make notices appear above admin dash modal
b6a4b620 add better indication that stuff is happening
ce109c38 add favicon setting and add compact layout for AttachmentSetting
bf49aeb7 changelog
d9ea160a account for if there's no primary frontend setup
75eea5f2 Merge remote-tracking branch 'origin/develop' into admin-dashboard-fixes
a190ef2c fix crash added in this MR
1037a3bb remove the WIP tip since pleroma!3862 is in stable
b707a14b make sure generated meta goes below FE-provided favicon so that BE's one
2023-11-27 13:26:19 +00:00
HJ d21e3d5de2 Merge branch 'admin-dashboard-fixes' into 'develop'
Fixes and minor improvements for admin dashboard

See merge request pleroma/pleroma-fe!1863
2023-11-27 13:26:01 +00:00
Henry Jameson 51f1f05b2d use last favicon instead of first for consistency with browsers 2023-11-22 22:06:56 +02:00
Henry Jameson b707a14b10 make sure generated meta goes below FE-provided favicon so that BE's one
get prioritized
2023-11-22 22:05:16 +02:00
Henry Jameson c25170d7d9 fix tests and make utils consistent in where they pull configuration from 2023-11-22 21:56:48 +02:00
Henry Jameson a5f09b7263 don't communicate with serviceworker if there's no support for it 2023-11-22 21:38:54 +02:00
Henry Jameson 33564d8ccc handle no sw registration gracefully 2023-11-22 13:17:55 +02:00
Henry Jameson 92685e37b6 fix infinity case 2023-11-21 15:29:49 +02:00
Henry Jameson e36548579f fix notifications not catching up with "read" status as intended 2023-11-21 15:26:31 +02:00
Henry Jameson 37e3a23f2a fix badge 2023-11-20 00:20:05 +02:00
Henry Jameson 1931e7c3ba temp console log for mobile debug 2023-11-20 00:17:09 +02:00
Henry Jameson 38b6f0a013 fix notification dot in favicon and mobile nav, minor refactor 2023-11-20 00:14:56 +02:00
Henry Jameson cdc0959135 fix tests 2023-11-19 17:27:51 +02:00
Henry Jameson c0e2ba37c8 changelog, small fix 2023-11-19 17:02:46 +02:00
Henry Jameson 072a06fc89 reports visibility setting + actual filtering for desktop notifs 2023-11-19 16:40:30 +02:00
Henry Jameson d178a56924 improve visual for the description bit 2023-11-19 16:14:24 +02:00
Henry Jameson fd3ad106be rearrange notification visibility page a bit. 2023-11-19 16:12:43 +02:00
Henry Jameson e3ee3eacca added some settings for notifications 2023-11-19 15:24:34 +02:00
Henry Jameson 2f90c629b8 fix messages from sw not really being acted upon on mainland 2023-11-19 13:57:47 +02:00
Henry Jameson a564fc1a1f consistentcy and bugfix 2023-11-19 13:54:26 +02:00
Henry Jameson 1037a3bb72 remove the WIP tip since pleroma!3862 is in stable 2023-11-19 10:06:06 +02:00
Henry Jameson a190ef2c56 fix crash added in this MR 2023-11-19 10:02:42 +02:00
Henry Jameson 75eea5f2b2 Merge remote-tracking branch 'origin/develop' into admin-dashboard-fixes 2023-11-19 09:58:29 +02:00
Henry Jameson c216340001 use dispatch instead of commmit, fix bad copypasta 2023-11-16 22:08:51 +02:00
Henry Jameson af27e2ca7b fix typo 2023-11-16 21:55:01 +02:00
Henry Jameson 388a7ac175 remove a test 2023-11-16 21:28:02 +02:00
Henry Jameson f3a859ff9e remove deletion (sic) stuff since we do the .deleted stuff nowadays 2023-11-16 21:24:33 +02:00
Henry Jameson ce17ebd3d0 use URL for original favicon instead of canvas 2023-11-16 20:45:07 +02:00
Henry Jameson a17defc5ab handle desktop notifications clicks 2023-11-16 20:41:41 +02:00
Henry Jameson 6ed2cb8f43 continue refactor 2023-11-16 20:09:16 +02:00
Henry Jameson aad3225d25 refactored notifications into their own module separate from statuses (WIP) 2023-11-16 19:26:18 +02:00
Henry Jameson fffa7a4f4a fix sw thing 2023-11-13 17:40:55 +02:00
Henry Jameson e508ca6a1f fix 2023-11-13 17:32:14 +02:00
Henry Jameson d9ea160a67 account for if there's no primary frontend setup 2023-11-13 17:31:12 +02:00
Henry Jameson ec2937ec1f add options for marking single notification as read 2023-11-13 17:29:25 +02:00
Henry Jameson c059f4a7ee Merge remote-tracking branch 'origin/develop' into notifications-thru-sw 2023-11-13 17:26:53 +02:00
HJ 84e2fa1a5e Merge branch 'tusooa/react-more-actions-fix' into 'develop'
Accessibility for react & extra buttons

See merge request pleroma/pleroma-fe!1869

(cherry picked from commit 18c0cf1845)

0026b35f Add alt text for react and extra-buttons popup
82063f34 Add aria-controls to extra-buttons trigger
5ff14837 Add changelog
2023-11-12 23:06:26 +00:00
Henry Jameson bf49aeb756 changelog 2023-11-12 22:18:54 +02:00
HJ 3781f0e3bf Merge branch 'cherry-pick-faef2767' into 'release/2.6.x'
Fix admin dashboard crashing for 2.6.1

See merge request pleroma/pleroma-fe!1868
2023-11-12 10:48:06 +00:00
HJ 9ccd013522 Merge branch 'tusooa/fix-admin-crash-when-no-primary-fe-set' into 'develop'
fix admin crash when no primary fe set

See merge request pleroma/pleroma-fe!1867

(cherry picked from commit faef2767cd)

661d5b6d Fix frontend admin tab crashing when no primary frontend is set
b2c5520d Add changelog for frontend tab crash fix
2023-11-12 10:38:38 +00:00
Henry Jameson e0b8ad9f14 add initial structure for notification settings 2023-11-09 01:58:33 +02:00
Henry Jameson 77e270ef58 Don't use notification-badge'd favicon for badges in notifications 2023-11-09 01:53:48 +02:00
Henry Jameson f449bfe2f1 SW-to-window communication 2023-11-09 01:52:39 +02:00
Henry Jameson ce109c38f3 add favicon setting and add compact layout for AttachmentSetting 2023-11-01 22:10:46 +02:00
Henry Jameson b6a4b62058 add better indication that stuff is happening 2023-11-01 21:53:50 +02:00
Henry Jameson c99390e864 make notices appear above admin dash modal 2023-11-01 21:48:05 +02:00
Henry Jameson f354cef010 fix no feedback and no dropdown close for actions in frontends tab,
better default suggest
2023-11-01 21:44:14 +02:00
Henry Jameson e3bf9a5185 wrong key 2023-10-26 15:47:58 +03:00
Henry Jameson 0628aac664 fallback to old notification method, don't spam if old way of creating
notification fails, try to use favicon
2023-10-26 15:42:21 +03:00
Henry Jameson 1b7e930b2e oops 2023-10-25 19:35:44 +03:00
Henry Jameson 73fbe89a4b initial work on showing notifications through serviceworkers 2023-10-25 18:58:33 +03:00
Pleroma Renovate Bot 4beb29918a Update dependency @vuelidate/core to v2.0.3 2023-10-06 09:10:07 +00:00
Pleroma Renovate Bot e1ef381162 Update dependency js-cookie to v3.0.5 2023-05-03 09:07:55 +00:00
Pleroma Renovate Bot 829ab46fdc Update dependency @ungap/event-target to v0.2.4 2023-04-12 09:11:09 +00:00
297 changed files with 9469 additions and 3297 deletions

View File

@ -43,6 +43,8 @@ lint:
test: test:
stage: test stage: test
tags:
- amd64
variables: variables:
APT_CACHE_DIR: apt-cache APT_CACHE_DIR: apt-cache
script: script:
@ -54,6 +56,8 @@ test:
build: build:
stage: build stage: build
tags:
- amd64
script: script:
- yarn - yarn
- npm run build - npm run build

View File

@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
## 2.6.1
### Fixed
- fix admin dashboard not having any feedback on frontend installation
- Fix frontend admin tab crashing when no primary frontend is set
- Add aria attributes to react and extra buttons
## 2.6.0 ## 2.6.0
### Added ### Added
- add the initial i18n translation file for Taiwanese (Hokkien), and modify some related files. - add the initial i18n translation file for Taiwanese (Hokkien), and modify some related files.

1
changelog.d/add-apng.add Normal file
View File

@ -0,0 +1 @@
Make Pleroma FE to also view apng (Animated PNG) attachment.

View File

@ -0,0 +1 @@
Added emoji pack management to the admin panel

View File

@ -0,0 +1 @@
stop using that one runner for intensive tasks

View File

@ -0,0 +1 @@
Create a link to the URL of the scrobble when it's present

View File

@ -0,0 +1 @@
Fix native notifications appearing as many times as there are open tabs. Clicking on notification will focus last focused tab.

View File

@ -1 +0,0 @@
Fix frontend admin tab crashing when no primary frontend is set

View File

@ -0,0 +1 @@
Focusing into a tab clears all current desktop notifications

View File

@ -0,0 +1 @@
Support group actors

View File

@ -0,0 +1 @@
Allow hiding custom emojis in picker.

View File

@ -0,0 +1 @@
Fixed error that appeared on mobile Chrome(ium) (and derivatives) when native notifications are allowed

View File

@ -0,0 +1 @@
Added option to not mark all notifications when closing notifications drawer on mobile, this creates a new button to mark all as seen.

View File

@ -0,0 +1 @@
Fixed being unable to set notification visibility for reports and follow requests

View File

@ -0,0 +1 @@
Added ability to mute sensitive posts (ported from eintei)

View File

@ -0,0 +1 @@
Added option to toggle what notification types appear in native notifications, by default less important ones (likes, repeats, etc) will no longer show up in native notifications.

View File

@ -0,0 +1 @@
Native notifications now also have "badge" property that matches instance's favicon (visible in Android Chromium at least)

View File

@ -0,0 +1 @@
The expiry date indication won't be shown if the poll never expires

View File

@ -0,0 +1 @@
Added option to treat non-interactive notifications (likes, repeats et all) as seen for visual purposes (no read mark, ignored in counters, still can show in native notifications)

View File

@ -0,0 +1 @@
Synchronized requested notification types with backend, hopefully should fix missing notifications for polls and follow requests

View File

@ -0,0 +1 @@
Interacting (opening reply box etc) or simply clicking on non-interactive notifications now marks them as read. Clicking on native notifications for non-interactive ones also marks them as seen.

View File

@ -0,0 +1 @@
Notifications are no longer sorted by "seen" status since interacting with them can change their read status and makes UI jumpy. Old behavior can be restored in settings.

View File

@ -0,0 +1 @@
Add poll end notifications to fetched types.

View File

@ -1 +0,0 @@
Make poll accessible

View File

@ -0,0 +1 @@
Display public favorites on user profiles

View File

View File

@ -0,0 +1 @@
Display quotes count on posts and add quotes list page

View File

@ -1 +0,0 @@
Add aria attributes to react and extra buttons

View File

@ -0,0 +1 @@
Show a dedicated registration notice page when further action is required after registering

View File

@ -0,0 +1 @@
Option to only show scrobbles that are recent enough

View File

@ -0,0 +1 @@
Notifications are now shown through a serviceworker (since mobile chrome does not allow them otherwise), it's always enabled, even if previously we only enabled it for WebPush notifications only. If you don't like websites "running" while closed, check how to disable them in your browser. Old way to show notifications will be used as a fallback but might not have all the new features.

View File

@ -0,0 +1 @@
Display loading and error indicator for conversation page

View File

@ -0,0 +1 @@
Add caching system for themes3

View File

@ -0,0 +1 @@
fix color inputs and some in-development themes3 issues

View File

@ -0,0 +1 @@
Overhauled the way themes work, migrating to new Pleroma Interface Style Sheets system.

View File

@ -0,0 +1 @@
unread notifications should now properly catch up (eventually) in polling mode

View File

@ -0,0 +1 @@
Video posters on Safari

View File

@ -0,0 +1 @@
nothing

View File

@ -0,0 +1 @@
Added option to always "show" notifications when using web push for better compatibility with some browsers (chrome, edge, safari)

View File

@ -3,8 +3,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<!--server-generated-meta-->
<link rel="icon" type="image/png" href="/favicon.png"> <link rel="icon" type="image/png" href="/favicon.png">
<!--server-generated-meta-->
</head> </head>
<body class="hidden"> <body class="hidden">
<noscript>To use Pleroma, please enable JavaScript.</noscript> <noscript>To use Pleroma, please enable JavaScript.</noscript>

View File

@ -1,6 +1,6 @@
{ {
"name": "pleroma_fe", "name": "pleroma_fe",
"version": "2.6.0", "version": "2.6.1",
"description": "Pleroma frontend, the default frontend of Pleroma social network server", "description": "Pleroma frontend, the default frontend of Pleroma social network server",
"author": "Pleroma contributors <https://git.pleroma.social/pleroma/pleroma-fe/-/blob/develop/CONTRIBUTORS.md>", "author": "Pleroma contributors <https://git.pleroma.social/pleroma/pleroma-fe/-/blob/develop/CONTRIBUTORS.md>",
"private": false, "private": false,
@ -24,15 +24,16 @@
"@fortawesome/vue-fontawesome": "3.0.3", "@fortawesome/vue-fontawesome": "3.0.3",
"@kazvmoe-infra/pinch-zoom-element": "1.2.0", "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
"@kazvmoe-infra/unicode-emoji-json": "0.4.0", "@kazvmoe-infra/unicode-emoji-json": "0.4.0",
"@ruffle-rs/ruffle": "0.1.0-nightly.2022.7.12", "@ruffle-rs/ruffle": "0.1.0-nightly.2024.3.17",
"@vuelidate/core": "2.0.2", "@vuelidate/core": "2.0.3",
"@vuelidate/validators": "2.0.0", "@vuelidate/validators": "2.0.4",
"body-scroll-lock": "3.1.5", "body-scroll-lock": "3.1.5",
"chromatism": "3.0.0", "chromatism": "3.0.0",
"click-outside-vue3": "4.0.1", "click-outside-vue3": "4.0.1",
"cropperjs": "1.5.13", "cropperjs": "1.5.13",
"escape-html": "1.0.3", "escape-html": "1.0.3",
"js-cookie": "3.0.1", "hash-sum": "^2.0.0",
"js-cookie": "3.0.5",
"localforage": "1.10.0", "localforage": "1.10.0",
"parse-link-header": "2.0.0", "parse-link-header": "2.0.0",
"phoenix": "1.7.7", "phoenix": "1.7.7",
@ -55,13 +56,13 @@
"@babel/preset-env": "7.21.5", "@babel/preset-env": "7.21.5",
"@babel/register": "7.21.0", "@babel/register": "7.21.0",
"@intlify/vue-i18n-loader": "5.0.1", "@intlify/vue-i18n-loader": "5.0.1",
"@ungap/event-target": "0.2.3", "@ungap/event-target": "0.2.4",
"@vue/babel-helper-vue-jsx-merge-props": "1.4.0", "@vue/babel-helper-vue-jsx-merge-props": "1.4.0",
"@vue/babel-plugin-jsx": "1.1.1", "@vue/babel-plugin-jsx": "1.2.1",
"@vue/compiler-sfc": "3.2.45", "@vue/compiler-sfc": "3.2.45",
"@vue/test-utils": "2.2.8", "@vue/test-utils": "2.2.8",
"autoprefixer": "10.4.14", "autoprefixer": "10.4.19",
"babel-loader": "9.1.2", "babel-loader": "9.1.3",
"babel-plugin-lodash": "3.3.4", "babel-plugin-lodash": "3.3.4",
"chai": "4.3.7", "chai": "4.3.7",
"chalk": "1.1.3", "chalk": "1.1.3",
@ -69,7 +70,7 @@
"connect-history-api-fallback": "2.0.0", "connect-history-api-fallback": "2.0.0",
"copy-webpack-plugin": "11.0.0", "copy-webpack-plugin": "11.0.0",
"cross-spawn": "7.0.3", "cross-spawn": "7.0.3",
"css-loader": "6.7.3", "css-loader": "6.10.0",
"css-minimizer-webpack-plugin": "4.2.2", "css-minimizer-webpack-plugin": "4.2.2",
"custom-event-polyfill": "1.0.7", "custom-event-polyfill": "1.0.7",
"eslint": "8.33.0", "eslint": "8.33.0",
@ -99,7 +100,7 @@
"lodash": "4.17.21", "lodash": "4.17.21",
"mini-css-extract-plugin": "2.7.6", "mini-css-extract-plugin": "2.7.6",
"mocha": "10.2.0", "mocha": "10.2.0",
"nightwatch": "2.6.20", "nightwatch": "2.6.25",
"opn": "5.5.0", "opn": "5.5.0",
"ora": "0.4.1", "ora": "0.4.1",
"postcss": "8.4.23", "postcss": "8.4.23",

View File

@ -1,9 +1,10 @@
// stylelint-disable rscss/class-format // stylelint-disable rscss/class-format
/* stylelint-disable no-descending-specificity */ /* stylelint-disable no-descending-specificity */
@import "./variables";
@import "./panel"; @import "./panel";
:root { :root {
--font-size: 14px;
--status-margin: 0.75em;
--navbar-height: 3.5rem; --navbar-height: 3.5rem;
--post-line-height: 1.4; --post-line-height: 1.4;
// Z-Index stuff // Z-Index stuff
@ -13,19 +14,21 @@
--ZI_navbar_popovers: 7500; --ZI_navbar_popovers: 7500;
--ZI_navbar: 7000; --ZI_navbar: 7000;
--ZI_popovers: 6000; --ZI_popovers: 6000;
// Fallback for when stuff is loading
--background: var(--bg);
} }
html { html {
font-size: 14px; font-size: var(--font-size);
// overflow-x: clip causes my browser's tab to crash with SIGILL lul // overflow-x: clip causes my browser's tab to crash with SIGILL lul
} }
body { body {
font-family: sans-serif; font-family: sans-serif;
font-family: var(--interfaceFont, sans-serif); font-family: var(--font);
margin: 0; margin: 0;
color: $fallback--text; color: var(--text);
color: var(--text, $fallback--text);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
overscroll-behavior-y: none; overscroll-behavior-y: none;
@ -42,17 +45,35 @@ body {
// have a cursor/pointer to operate them // have a cursor/pointer to operate them
@media (any-pointer: fine) { @media (any-pointer: fine) {
* { * {
scrollbar-color: var(--btn) transparent; scrollbar-color: var(--fg) transparent;
&::-webkit-scrollbar { &::-webkit-scrollbar {
background: transparent; background: transparent;
} }
&::-webkit-scrollbar-corner {
background: transparent;
}
&::-webkit-resizer {
/* stylelint-disable-next-line declaration-no-important */
background-color: transparent !important;
background-image:
linear-gradient(
135deg,
transparent calc(50% - 1px),
var(--textFaint) 50%,
transparent calc(50% + 1px),
transparent calc(75% - 1px),
var(--textFaint) 75%,
transparent calc(75% + 1px),
);
}
&::-webkit-scrollbar-button, &::-webkit-scrollbar-button,
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: var(--btn); box-shadow: var(--shadow);
box-shadow: var(--buttonShadow); border-radius: var(--roundness);
border-radius: var(--btnRadius);
} }
// horizontal/vertical/increment/decrement are webkit-specific stuff // horizontal/vertical/increment/decrement are webkit-specific stuff
@ -61,7 +82,7 @@ body {
&::-webkit-scrollbar-button { &::-webkit-scrollbar-button {
--___bgPadding: 2px; --___bgPadding: 2px;
color: var(--btnText); color: var(--text);
background-repeat: no-repeat, no-repeat; background-repeat: no-repeat, no-repeat;
&:horizontal { &:horizontal {
@ -69,15 +90,15 @@ body {
&:increment { &:increment {
background-image: background-image:
linear-gradient(45deg, var(--btnText) 50%, transparent 51%), linear-gradient(45deg, var(--text) 50%, transparent 51%),
linear-gradient(-45deg, transparent 50%, var(--btnText) 51%); linear-gradient(-45deg, transparent 50%, var(--text) 51%);
background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding); background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
} }
&:decrement { &:decrement {
background-image: background-image:
linear-gradient(45deg, transparent 50%, var(--btnText) 51%), linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px)),
linear-gradient(-45deg, var(--btnText) 50%, transparent 51%); linear-gradient(-45deg, var(--text) 50%, transparent 51%);
background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding); background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
} }
} }
@ -87,15 +108,15 @@ body {
&:increment { &:increment {
background-image: background-image:
linear-gradient(-45deg, transparent 50%, var(--btnText) 51%), linear-gradient(-45deg, transparent 50%, var(--text) 51%),
linear-gradient(45deg, transparent 50%, var(--btnText) 51%); linear-gradient(45deg, transparent 50%, var(--text) 51%);
background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%; background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
} }
&:decrement { &:decrement {
background-image: background-image:
linear-gradient(-45deg, var(--btnText) 50%, transparent 51%), linear-gradient(-45deg, var(--text) 50%, transparent 51%),
linear-gradient(45deg, var(--btnText) 50%, transparent 51%); linear-gradient(45deg, var(--text) 50%, transparent 51%);
background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%; background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
} }
} }
@ -104,15 +125,14 @@ body {
} }
// Body should have background to scrollbar otherwise it will use white (body color?) // Body should have background to scrollbar otherwise it will use white (body color?)
html { html {
scrollbar-color: var(--selectedMenu) var(--wallpaper); scrollbar-color: var(--fg) var(--wallpaper);
background: var(--wallpaper); background: var(--wallpaper);
} }
} }
a { a {
text-decoration: none; text-decoration: none;
color: $fallback--link; color: var(--link);
color: var(--link, $fallback--link);
} }
h4 { h4 {
@ -128,27 +148,12 @@ h4 {
i[class*="icon-"], i[class*="icon-"],
.svg-inline--fa, .svg-inline--fa,
.iconLetter { .iconLetter {
color: $fallback--icon; color: var(--icon);
color: var(--icon, $fallback--icon);
}
.button-unstyled:hover,
a:hover {
> i[class*="icon-"],
> .svg-inline--fa,
> .iconLetter {
color: var(--text);
}
} }
nav { nav {
z-index: var(--ZI_navbar); z-index: var(--ZI_navbar);
background-color: $fallback--fg; box-shadow: var(--shadow);
background-color: var(--topBar, $fallback--fg);
color: $fallback--faint;
color: var(--faint, $fallback--faint);
box-shadow: 0 0 4px rgb(0 0 0 / 60%);
box-shadow: var(--topBarShadow);
box-sizing: border-box; box-sizing: border-box;
height: var(--navbar-height); height: var(--navbar-height);
position: fixed; position: fixed;
@ -195,8 +200,7 @@ nav {
grid-column: 1 / span 3; grid-column: 1 / span 3;
grid-row: 1 / 1; grid-row: 1 / 1;
pointer-events: none; pointer-events: none;
background-color: rgb(0 0 0 / 15%); background-color: var(--underlay);
background-color: var(--underlay, rgb(0 0 0 / 15%));
z-index: -1000; z-index: -1000;
} }
@ -204,7 +208,6 @@ nav {
--miniColumn: 25rem; --miniColumn: 25rem;
--maxiColumn: 45rem; --maxiColumn: 45rem;
--columnGap: 1em; --columnGap: 1em;
--status-margin: 0.75em;
--effectiveSidebarColumnWidth: minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn))); --effectiveSidebarColumnWidth: minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)));
--effectiveNotifsColumnWidth: minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn))); --effectiveNotifsColumnWidth: minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn)));
--effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn))); --effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn)));
@ -366,106 +369,113 @@ nav {
.button-default { .button-default {
user-select: none; user-select: none;
color: $fallback--text; color: var(--text);
color: var(--btnText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btn, $fallback--fg);
border: none; border: none;
border-radius: $fallback--btnRadius; border-radius: var(--roundness);
border-radius: var(--btnRadius, $fallback--btnRadius);
cursor: pointer; cursor: pointer;
box-shadow: $fallback--buttonShadow; background-color: var(--background);
box-shadow: var(--buttonShadow); box-shadow: var(--shadow);
font-size: 1em; font-size: 1em;
font-family: sans-serif; font-family: sans-serif;
font-family: var(--interfaceFont, sans-serif); font-family: var(--font);
&.-sublime {
background: transparent;
}
i[class*="icon-"],
.svg-inline--fa {
color: $fallback--text;
color: var(--btnText, $fallback--text);
}
&::-moz-focus-inner { &::-moz-focus-inner {
border: none; border: none;
} }
&:hover {
box-shadow: 0 0 4px rgb(255 255 255 / 30%);
box-shadow: var(--buttonHoverShadow);
}
&:active {
box-shadow:
0 0 4px 0 rgb(255 255 255 / 30%),
0 1px 0 0 rgb(0 0 0 / 20%) inset,
0 -1px 0 0 rgb(255 255 255 / 20%) inset;
box-shadow: var(--buttonPressedShadow);
color: $fallback--text;
color: var(--btnPressedText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnPressed, $fallback--fg);
svg,
i {
color: $fallback--text;
color: var(--btnPressedText, $fallback--text);
}
}
&:disabled { &:disabled {
cursor: not-allowed; cursor: not-allowed;
color: $fallback--text; }
color: var(--btnDisabledText, $fallback--text); }
background-color: $fallback--fg;
background-color: var(--btnDisabled, $fallback--fg);
svg, .menu-item,
i { .list-item {
color: $fallback--text; display: block;
color: var(--btnDisabledText, $fallback--text); box-sizing: border-box;
} border: none;
outline: none;
text-align: initial;
font-size: inherit;
font-family: inherit;
font-weight: 400;
cursor: pointer;
color: inherit;
clear: both;
position: relative;
white-space: nowrap;
border-color: var(--border);
border-style: solid;
border-width: 0;
border-top-width: 1px;
width: 100%;
line-height: var(--__line-height);
padding: var(--__vertical-gap) var(--__horizontal-gap);
background: transparent;
--__line-height: 1.5em;
--__horizontal-gap: 0.75em;
--__vertical-gap: 0.5em;
&.-non-interactive {
cursor: auto;
} }
&.toggled { &.-active,
color: $fallback--text; &:hover {
color: var(--btnToggledText, $fallback--text); border-top-width: 1px;
background-color: $fallback--fg; border-bottom-width: 1px;
background-color: var(--btnToggled, $fallback--fg);
box-shadow:
0 0 4px 0 rgb(255 255 255 / 30%),
0 1px 0 0 rgb(0 0 0 / 20%) inset,
0 -1px 0 0 rgb(255 255 255 / 20%) inset;
box-shadow: var(--buttonPressedShadow);
svg,
i {
color: $fallback--text;
color: var(--btnToggledText, $fallback--text);
}
} }
&.danger { &.-active + &,
// TODO: add better color variable &:hover + & {
color: $fallback--text; border-top-width: 0;
color: var(--alertErrorPanelText, $fallback--text); }
background-color: $fallback--alertError;
background-color: var(--alertError, $fallback--alertError); &:hover + .menu-item-collapsible:not(.-expanded) + &,
&.-active + .menu-item-collapsible:not(.-expanded) + & {
border-top-width: 0;
}
&[aria-expanded="true"] {
border-bottom-width: 1px;
}
a,
button:not(.button-default) {
text-align: initial;
padding: 0;
background: none;
border: none;
outline: none;
display: inline;
font-size: 100%;
font-family: inherit;
line-height: unset;
color: var(--text);
}
&:first-child {
border-top-right-radius: var(--roundness);
border-top-left-radius: var(--roundness);
border-top-width: 0;
}
&:last-child {
border-bottom-right-radius: var(--roundness);
border-bottom-left-radius: var(--roundness);
border-bottom-width: 0;
} }
} }
.button-unstyled { .button-unstyled {
background: none;
border: none; border: none;
outline: none; outline: none;
display: inline; display: inline;
text-align: initial; text-align: initial;
font-size: 100%; font-size: 100%;
font-family: inherit; font-family: inherit;
box-shadow: var(--shadow);
background-color: transparent;
padding: 0; padding: 0;
line-height: unset; line-height: unset;
cursor: pointer; cursor: pointer;
@ -473,28 +483,23 @@ nav {
color: inherit; color: inherit;
&.-link { &.-link {
color: $fallback--link; /* stylelint-disable-next-line declaration-no-important */
color: var(--link, $fallback--link); color: var(--link) !important;
}
&.-fullwidth {
width: 100%;
}
&.-hover-highlight {
&:hover svg {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
} }
} }
input, input,
textarea, textarea {
border: none;
display: inline-block;
outline: none;
}
.input { .input {
&.unstyled { &.unstyled {
border-radius: 0; border-radius: 0;
background: none; /* stylelint-disable-next-line declaration-no-important */
background: none !important;
box-shadow: none; box-shadow: none;
height: unset; height: unset;
} }
@ -502,19 +507,11 @@ textarea,
--_padding: 0.5em; --_padding: 0.5em;
border: none; border: none;
border-radius: $fallback--inputRadius; border-radius: var(--roundness);
border-radius: var(--inputRadius, $fallback--inputRadius); background-color: var(--background);
box-shadow: color: var(--text);
0 1px 0 0 rgb(0 0 0 / 20%) inset, box-shadow: var(--shadow);
0 -1px 0 0 rgb(255 255 255 / 20%) inset, font-family: var(--font);
0 0 2px 0 rgb(0 0 0 / 100%) inset;
box-shadow: var(--inputShadow);
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
color: $fallback--lightText;
color: var(--inputText, $fallback--lightText);
font-family: sans-serif;
font-family: var(--inputFont, sans-serif);
font-size: 1em; font-size: 1em;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
@ -528,7 +525,6 @@ textarea,
&[disabled="disabled"], &[disabled="disabled"],
&.disabled { &.disabled {
cursor: not-allowed; cursor: not-allowed;
opacity: 0.5;
} }
&[type="range"] { &[type="range"] {
@ -540,14 +536,12 @@ textarea,
} }
&[type="radio"] { &[type="radio"] {
&:not(.visible-for-screenreader-only) { display: none;
display: none;
}
&:checked + label::before { &:checked + label::before {
box-shadow: 0 0 2px black inset, 0 0 0 4px $fallback--fg inset; box-shadow: var(--shadow);
box-shadow: var(--inputShadow), 0 0 0 4px var(--fg, $fallback--fg) inset; background-color: var(--background);
background-color: var(--accent, $fallback--link); color: var(--text);
} }
&:disabled { &:disabled {
@ -561,16 +555,14 @@ textarea,
+ label::before { + label::before {
flex-shrink: 0; flex-shrink: 0;
display: inline-block; display: inline-block;
content: ""; content: "";
transition: box-shadow 200ms; transition: box-shadow 200ms;
width: 1.1em; width: 1.1em;
height: 1.1em; height: 1.1em;
border-radius: 100%; // Radio buttons should always be circle border-radius: 100%; // Radio buttons should always be circle
box-shadow: 0 0 2px black inset; background-color: var(--background);
box-shadow: var(--inputShadow); box-shadow: var(--shadow);
margin-right: 0.5em; margin-right: 0.5em;
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
line-height: 1.1; line-height: 1.1;
@ -583,8 +575,9 @@ textarea,
&[type="checkbox"] { &[type="checkbox"] {
&:checked + label::before { &:checked + label::before {
color: $fallback--text; color: var(--text);
color: var(--inputText, $fallback--text); background-color: var(--background);
box-shadow: var(--shadow);
} }
&:disabled { &:disabled {
@ -599,17 +592,12 @@ textarea,
flex-shrink: 0; flex-shrink: 0;
display: inline-block; display: inline-block;
content: ""; content: "";
content: "" / "";
transition: color 200ms; transition: color 200ms;
width: 1.1em; width: 1.1em;
height: 1.1em; height: 1.1em;
border-radius: $fallback--checkboxRadius; border-radius: var(--roundness);
border-radius: var(--checkboxRadius, $fallback--checkboxRadius); box-shadow: var(--shadow);
box-shadow: 0 0 2px black inset;
box-shadow: var(--inputShadow);
margin-right: 0.5em; margin-right: 0.5em;
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
line-height: 1.1; line-height: 1.1;
@ -626,16 +614,14 @@ textarea,
} }
// Textareas should have stock line-height + vertical padding instead of huge line-height // Textareas should have stock line-height + vertical padding instead of huge line-height
textarea { textarea.input {
padding: var(--_padding); padding: var(--_padding);
line-height: var(--post-line-height); line-height: var(--post-line-height);
} }
option { option {
color: $fallback--text; color: var(--text);
color: var(--text, $fallback--text); background-color: var(--background);
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
} }
.hide-number-spinner { .hide-number-spinner {
@ -656,7 +642,7 @@ option {
li { li {
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--inputRadius); border-radius: var(--roundness);
padding: 0.5em; padding: 0.5em;
margin: 0.25em; margin: 0.25em;
} }
@ -717,74 +703,58 @@ option {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
&.badge-notification { &.-dot,
background-color: $fallback--cRed; &.-counter {
background-color: var(--badgeNotification, $fallback--cRed); margin: 0;
color: white; position: absolute;
color: var(--badgeNotificationText, white); }
&.-dot {
min-height: 8px;
max-height: 8px;
min-width: 8px;
max-width: 8px;
padding: 0;
line-height: 0;
font-size: 0;
left: calc(50% - 4px);
top: calc(50% - 4px);
margin-left: 6px;
margin-top: -6px;
}
&.-counter {
border-radius: var(--roundness);
font-size: 0.75em;
line-height: 1;
text-align: right;
padding: 0.2em;
min-width: 0;
left: calc(50% - 0.5em);
top: calc(50% - 0.4em);
margin-left: 0.7em;
margin-top: -1em;
} }
} }
.alert { .alert {
margin: 0 0.35em; margin: 0 0.35em;
padding: 0 0.25em; padding: 0 0.25em;
border-radius: $fallback--tooltipRadius; border-radius: var(--roundness);
border-radius: var(--tooltipRadius, $fallback--tooltipRadius); border: 1px solid var(--border);
&.error {
background-color: $fallback--alertError;
background-color: var(--alertError, $fallback--alertError);
color: $fallback--text;
color: var(--alertErrorText, $fallback--text);
.panel-heading & {
color: $fallback--text;
color: var(--alertErrorPanelText, $fallback--text);
}
}
&.warning {
background-color: $fallback--alertWarning;
background-color: var(--alertWarning, $fallback--alertWarning);
color: $fallback--text;
color: var(--alertWarningText, $fallback--text);
.panel-heading & {
color: $fallback--text;
color: var(--alertWarningPanelText, $fallback--text);
}
}
&.success {
background-color: var(--alertSuccess, $fallback--alertWarning);
color: var(--alertSuccessText, $fallback--text);
.panel-heading & {
color: var(--alertSuccessPanelText, $fallback--text);
}
}
} }
.faint { .faint {
color: $fallback--faint; --text: var(--textFaint);
color: var(--faint, $fallback--faint); --link: var(--linkFaint);
}
.faint-link { color: var(--text);
color: $fallback--faint;
color: var(--faint, $fallback--faint);
&:hover {
text-decoration: underline;
}
} }
.visibility-notice { .visibility-notice {
padding: 0.5em; padding: 0.5em;
border: 1px solid $fallback--faint; border: 1px solid var(--textFaint);
border: 1px solid var(--faint, $fallback--faint); border-radius: var(--roundness);
border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius);
} }
.notice-dismissible { .notice-dismissible {
@ -805,6 +775,10 @@ option {
&.iconLetter { &.iconLetter {
font-size: 1.1em; font-size: 1.1em;
} }
&.svg-inline--fa {
vertical-align: -0.15em;
}
} }
.fa-old-padding { .fa-old-padding {
@ -819,6 +793,11 @@ option {
opacity: 0.25; opacity: 0.25;
} }
.timeago {
--link: var(--text);
--linkFaint: var(--textFaint);
}
.login-hint { .login-hint {
text-align: center; text-align: center;
@ -917,3 +896,8 @@ option {
padding: 0; padding: 0;
position: absolute; position: absolute;
} }
*::selection {
color: var(--selectionText);
background-color: var(--selectionBackground);
}

View File

@ -1,5 +1,6 @@
<template> <template>
<div <div
v-show="$store.state.interface.themeApplied"
id="app-loaded" id="app-loaded"
:style="bgStyle" :style="bgStyle"
> >

View File

@ -1,36 +0,0 @@
$main-color: #f58d2c;
$main-background: white;
$darkened-background: whitesmoke;
$fallback--bg: #121a24;
$fallback--fg: #182230;
$fallback--faint: rgb(185 185 186 / 50%);
$fallback--text: #b9b9ba;
$fallback--link: #d8a070;
$fallback--icon: #666;
$fallback--lightBg: rgb(21 30 42);
$fallback--lightText: #b9b9ba;
$fallback--border: #222;
$fallback--cRed: #f00;
$fallback--cBlue: #0095ff;
$fallback--cGreen: #0fa00f;
$fallback--cOrange: orange;
$fallback--alertError: rgb(211 16 20 / 50%);
$fallback--alertWarning: rgb(111 111 20 / 50%);
$fallback--panelRadius: 10px;
$fallback--checkboxRadius: 2px;
$fallback--btnRadius: 4px;
$fallback--inputRadius: 4px;
$fallback--tooltipRadius: 5px;
$fallback--avatarRadius: 4px;
$fallback--avatarAltRadius: 10px;
$fallback--attachmentRadius: 10px;
$fallback--chatMessageRadius: 10px;
$fallback--buttonShadow: 0 0 2px 0 rgb(0 0 0 / 100%),
0 1px 0 0 rgb(255 255 255 / 20%) inset,
0 -1px 0 0 rgb(0 0 0 / 20%) inset;
$status-margin: 0.75em;

View File

@ -14,8 +14,9 @@ import { windowWidth, windowHeight } from '../services/window_utils/window_utils
import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js' import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js' import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js' import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
import { applyTheme, applyConfig } from '../services/style_setter/style_setter.js' import { applyTheme, applyConfig, tryLoadCache } from '../services/style_setter/style_setter.js'
import FaviconService from '../services/favicon_service/favicon_service.js' import FaviconService from '../services/favicon_service/favicon_service.js'
import { initServiceWorker, updateFocus } from '../services/sw/sw.js'
let staticInitialResults = null let staticInitialResults = null
@ -260,6 +261,7 @@ const getNodeInfo = async ({ store }) => {
store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits }) store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits })
store.dispatch('setInstanceOption', { name: 'mailerEnabled', value: metadata.mailerEnabled }) store.dispatch('setInstanceOption', { name: 'mailerEnabled', value: metadata.mailerEnabled })
store.dispatch('setInstanceOption', { name: 'quotingAvailable', value: features.includes('quote_posting') }) store.dispatch('setInstanceOption', { name: 'quotingAvailable', value: features.includes('quote_posting') })
store.dispatch('setInstanceOption', { name: 'groupActorAvailable', value: features.includes('pleroma:group_actors') })
const uploadLimits = metadata.uploadLimits const uploadLimits = metadata.uploadLimits
store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadLimits.general) }) store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadLimits.general) })
@ -326,17 +328,14 @@ const setConfig = async ({ store }) => {
} }
const checkOAuthToken = async ({ store }) => { const checkOAuthToken = async ({ store }) => {
// eslint-disable-next-line no-async-promise-executor if (store.getters.getUserToken()) {
return new Promise(async (resolve, reject) => { try {
if (store.getters.getUserToken()) { await store.dispatch('loginUser', store.getters.getUserToken())
try { } catch (e) {
await store.dispatch('loginUser', store.getters.getUserToken()) console.error(e)
} catch (e) {
console.error(e)
}
} }
resolve() }
}) return Promise.resolve()
} }
const afterStoreSetup = async ({ store, i18n }) => { const afterStoreSetup = async ({ store, i18n }) => {
@ -344,6 +343,9 @@ const afterStoreSetup = async ({ store, i18n }) => {
store.dispatch('setLayoutHeight', windowHeight()) store.dispatch('setLayoutHeight', windowHeight())
FaviconService.initFaviconService() FaviconService.initFaviconService()
initServiceWorker(store)
window.addEventListener('focus', () => updateFocus())
const overrides = window.___pleromafe_dev_overrides || {} const overrides = window.___pleromafe_dev_overrides || {}
const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
@ -351,20 +353,25 @@ const afterStoreSetup = async ({ store, i18n }) => {
await setConfig({ store }) await setConfig({ store })
const { customTheme, customThemeSource } = store.state.config const { customTheme, customThemeSource, forceThemeRecompilation } = store.state.config
const { theme } = store.state.instance const { theme } = store.state.instance
const customThemePresent = customThemeSource || customTheme const customThemePresent = customThemeSource || customTheme
if (customThemePresent) { if (!forceThemeRecompilation && tryLoadCache()) {
if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) { store.commit('setThemeApplied')
applyTheme(customThemeSource)
} else {
applyTheme(customTheme)
}
} else if (theme) {
// do nothing, it will load asynchronously
} else { } else {
console.error('Failed to load any theme!') if (customThemePresent) {
if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
applyTheme(customThemeSource)
} else {
applyTheme(customTheme)
}
store.commit('setThemeApplied')
} else if (theme) {
// do nothing, it will load asynchronously
} else {
console.error('Failed to load any theme!')
}
} }
applyConfig(store.state.config) applyConfig(store.state.config)

View File

@ -25,6 +25,7 @@ import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
import ListsEdit from 'components/lists_edit/lists_edit.vue' import ListsEdit from 'components/lists_edit/lists_edit.vue'
import NavPanel from 'src/components/nav_panel/nav_panel.vue' import NavPanel from 'src/components/nav_panel/nav_panel.vue'
import AnnouncementsPage from 'components/announcements_page/announcements_page.vue' import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
import QuotesTimeline from '../components/quotes_timeline/quotes_timeline.vue'
export default (store) => { export default (store) => {
const validateAuthenticatedRoute = (to, from, next) => { const validateAuthenticatedRoute = (to, from, next) => {
@ -51,6 +52,7 @@ export default (store) => {
{ name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline }, { name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline },
{ name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline }, { name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline },
{ name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } }, { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
{ name: 'quotes', path: '/notice/:id/quotes', component: QuotesTimeline },
{ {
name: 'remote-user-profile-acct', name: 'remote-user-profile-acct',
path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)', path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)',

View File

@ -11,14 +11,14 @@
<template v-if="relationship.following"> <template v-if="relationship.following">
<button <button
v-if="relationship.showing_reblogs" v-if="relationship.showing_reblogs"
class="btn button-default dropdown-item" class="dropdown-item menu-item"
@click="hideRepeats" @click="hideRepeats"
> >
{{ $t('user_card.hide_repeats') }} {{ $t('user_card.hide_repeats') }}
</button> </button>
<button <button
v-if="!relationship.showing_reblogs" v-if="!relationship.showing_reblogs"
class="btn button-default dropdown-item" class="dropdown-item menu-item"
@click="showRepeats" @click="showRepeats"
> >
{{ $t('user_card.show_repeats') }} {{ $t('user_card.show_repeats') }}
@ -31,34 +31,34 @@
<UserListMenu :user="user" /> <UserListMenu :user="user" />
<button <button
v-if="relationship.followed_by" v-if="relationship.followed_by"
class="btn button-default btn-block dropdown-item" class="dropdown-item menu-item"
@click="removeUserFromFollowers" @click="removeUserFromFollowers"
> >
{{ $t('user_card.remove_follower') }} {{ $t('user_card.remove_follower') }}
</button> </button>
<button <button
v-if="relationship.blocking" v-if="relationship.blocking"
class="btn button-default btn-block dropdown-item" class="dropdown-item menu-item"
@click="unblockUser" @click="unblockUser"
> >
{{ $t('user_card.unblock') }} {{ $t('user_card.unblock') }}
</button> </button>
<button <button
v-else v-else
class="btn button-default btn-block dropdown-item" class="dropdown-item menu-item"
@click="blockUser" @click="blockUser"
> >
{{ $t('user_card.block') }} {{ $t('user_card.block') }}
</button> </button>
<button <button
class="btn button-default btn-block dropdown-item" class="dropdown-item menu-item"
@click="reportUser" @click="reportUser"
> >
{{ $t('user_card.report') }} {{ $t('user_card.report') }}
</button> </button>
<button <button
v-if="pleromaChatMessagesAvailable" v-if="pleromaChatMessagesAvailable"
class="btn button-default btn-block dropdown-item" class="dropdown-item menu-item"
@click="openChat" @click="openChat"
> >
{{ $t('user_card.message') }} {{ $t('user_card.message') }}
@ -122,19 +122,12 @@
<script src="./account_actions.js"></script> <script src="./account_actions.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.AccountActions { .AccountActions {
.ellipsis-button { .ellipsis-button {
width: 2.5em; width: 2.5em;
margin: -0.5em 0; margin: -0.5em 0;
padding: 0.5em 0; padding: 0.5em 0;
text-align: center; text-align: center;
&:not(:hover) .icon {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
} }
} }
</style> </style>

View File

@ -0,0 +1,51 @@
export default {
name: 'Alert',
selector: '.alert',
validInnerComponents: [
'Text',
'Icon',
'Link',
'Border',
'ButtonUnstyled'
],
variants: {
normal: '.neutral',
error: '.error',
warning: '.warning',
success: '.success'
},
defaultRules: [
{
directives: {
background: '--text',
opacity: 0.5,
blur: '9px'
}
},
{
parent: {
component: 'Alert'
},
component: 'Border',
textColor: '--parent'
},
{
variant: 'error',
directives: {
background: '--cRed'
}
},
{
variant: 'warning',
directives: {
background: '--cOrange'
}
},
{
variant: 'success',
directives: {
background: '--cGreen'
}
}
]
}

View File

@ -99,16 +99,14 @@
<script src="./announcement.js"></script> <script src="./announcement.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.announcement { .announcement {
border-bottom: 1px solid var(--border, $fallback--border); border-bottom: 1px solid var(--border);
border-radius: 0; border-radius: 0;
padding: var(--status-margin, $status-margin); padding: var(--status-margin);
.heading, .heading,
.body { .body {
margin-bottom: var(--status-margin, $status-margin); margin-bottom: var(--status-margin);
} }
.footer { .footer {

View File

@ -3,7 +3,7 @@
<textarea <textarea
ref="textarea" ref="textarea"
v-model="announcement.content" v-model="announcement.content"
class="post-textarea" class="input post-textarea"
rows="1" rows="1"
cols="1" cols="1"
:placeholder="$t('announcements.post_placeholder')" :placeholder="$t('announcements.post_placeholder')"
@ -14,6 +14,7 @@
<input <input
id="announcement-start-time" id="announcement-start-time"
v-model="announcement.startsAt" v-model="announcement.startsAt"
class="input"
:type="announcement.allDay ? 'date' : 'datetime-local'" :type="announcement.allDay ? 'date' : 'datetime-local'"
:disabled="disabled" :disabled="disabled"
> >
@ -23,6 +24,7 @@
<input <input
id="announcement-end-time" id="announcement-end-time"
v-model="announcement.endsAt" v-model="announcement.endsAt"
class="input"
:type="announcement.allDay ? 'date' : 'datetime-local'" :type="announcement.allDay ? 'date' : 'datetime-local'"
:disabled="disabled" :disabled="disabled"
> >

View File

@ -61,15 +61,13 @@
<script src="./announcements_page.js"></script> <script src="./announcements_page.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.announcements-page { .announcements-page {
.post-form { .post-form {
padding: var(--status-margin, $status-margin); padding: var(--status-margin);
.heading, .heading,
.body { .body {
margin-bottom: var(--status-margin, $status-margin); margin-bottom: var(--status-margin);
} }
.post-button { .post-button {

View File

@ -1,5 +1,3 @@
@import "../../variables";
.Attachment { .Attachment {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
@ -9,10 +7,8 @@
height: 100%; height: 100%;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-radius: $fallback--attachmentRadius; border-radius: var(--roundness);
border-radius: var(--attachmentRadius, $fallback--attachmentRadius); border-color: var(--border);
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
.attachment-wrapper { .attachment-wrapper {
flex: 1 1 auto; flex: 1 1 auto;
@ -84,6 +80,13 @@
} }
} }
.video-container {
border: none;
outline: none;
color: inherit;
background: transparent;
}
.audio-container { .audio-container {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
@ -126,23 +129,12 @@
.attachment-button { .attachment-button {
padding: 0; padding: 0;
border-radius: $fallback--tooltipRadius; border-radius: var(--roundness);
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
text-align: center; text-align: center;
width: 2em; width: 2em;
height: 2em; height: 2em;
margin-left: 0.5em; margin-left: 0.5em;
font-size: 1.25em; font-size: 1.25em;
// TODO: theming? hard to theme with unknown background image color
background: rgb(230 230 230 / 70%);
.svg-inline--fa {
color: rgb(0 0 0 / 60%);
}
&:hover .svg-inline--fa {
color: rgb(0 0 0 / 90%);
}
} }
} }
@ -217,8 +209,7 @@
&.-placeholder { &.-placeholder {
display: inline-block; display: inline-block;
color: $fallback--link; color: var(--link);
color: var(--postLink, $fallback--link);
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
height: auto; height: auto;

View File

@ -0,0 +1,24 @@
export default {
name: 'Attachment',
selector: '.Attachment',
validInnerComponents: [
'Border',
'ButtonUnstyled',
'Input'
],
defaultRules: [
{
directives: {
roundness: 3
}
},
{
component: 'ButtonUnstyled',
parent: { component: 'Attachment' },
directives: {
background: '#FFFFFF',
opacity: 0.5
}
}
]
}

View File

@ -38,7 +38,7 @@
v-if="edit" v-if="edit"
v-model="localDescription" v-model="localDescription"
type="text" type="text"
class="description-field" class="input description-field"
:placeholder="$t('post_status.media_description')" :placeholder="$t('post_status.media_description')"
@keydown.enter.prevent="" @keydown.enter.prevent=""
> >
@ -175,7 +175,6 @@
:is="videoTag" :is="videoTag"
v-if="type === 'video' && !hidden" v-if="type === 'video' && !hidden"
class="video-container" class="video-container"
:class="{ 'button-unstyled': 'isModal' }"
:href="attachment.url" :href="attachment.url"
@click.stop.prevent="openModal" @click.stop.prevent="openModal"
> >
@ -253,7 +252,7 @@
v-if="edit" v-if="edit"
v-model="localDescription" v-model="localDescription"
type="text" type="text"
class="description-field" class="input description-field"
:placeholder="$t('post_status.media_description')" :placeholder="$t('post_status.media_description')"
@keydown.enter.prevent="" @keydown.enter.prevent=""
> >

View File

@ -1,3 +1,4 @@
<!-- FIXME THIS NEEDS TO BE REFACTORED TO USE POPOVER -->
<template> <template>
<div <div
v-click-outside="onClickOutside" v-click-outside="onClickOutside"
@ -6,12 +7,12 @@
<input <input
v-model="term" v-model="term"
:placeholder="placeholder" :placeholder="placeholder"
class="autosuggest-input" class="input autosuggest-input"
@click="onInputClick" @click="onInputClick"
> >
<div <div
v-if="resultsVisible && filtered.length > 0" v-if="resultsVisible && filtered.length > 0"
class="autosuggest-results" class="panel autosuggest-results"
> >
<slot <slot
v-for="item in filtered" v-for="item in filtered"
@ -24,8 +25,6 @@
<script src="./autosuggest.js"></script> <script src="./autosuggest.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.autosuggest { .autosuggest {
position: relative; position: relative;
@ -40,18 +39,15 @@
top: 100%; top: 100%;
right: 0; right: 0;
max-height: 400px; max-height: 400px;
background-color: $fallback--bg; background-color: var(--bg);
background-color: var(--bg, $fallback--bg);
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-color: $fallback--border; border-color: var(--border);
border-color: var(--border, $fallback--border); border-radius: var(--roundness);
border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius);
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
box-shadow: 1px 1px 4px rgb(0 0 0 / 60%); box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
box-shadow: var(--panelShadow); box-shadow: var(--shadow);
overflow-y: auto; overflow-y: auto;
z-index: 1; z-index: 1;
} }

View File

@ -17,8 +17,6 @@
<script src="./avatar_list.js"></script> <script src="./avatar_list.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.avatars { .avatars {
display: flex; display: flex;
margin: 0; margin: 0;
@ -36,8 +34,7 @@
} }
.avatar-small { .avatar-small {
border-radius: $fallback--avatarAltRadius; border-radius: var(--roundness);
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
height: 24px; height: 24px;
width: 24px; width: 24px;
} }

View File

@ -0,0 +1,30 @@
export default {
name: 'Badge',
selector: '.badge',
validInnerComponents: [
'Text',
'Icon'
],
variants: {
notification: '.-notification'
},
defaultRules: [
{
component: 'Root',
directives: {
'--badgeNotification': 'color | --cRed'
}
},
{
directives: {
background: '--cGreen'
}
},
{
variant: 'notification',
directives: {
background: '--cRed'
}
}
]
}

View File

@ -47,7 +47,6 @@
display: flex; display: flex;
flex: 1 0; flex: 1 0;
margin: 0; margin: 0;
padding: 0.6em 1em;
--emoji-size: 14px; --emoji-size: 14px;

View File

@ -0,0 +1,13 @@
export default {
name: 'Border',
selector: '/*border*/',
virtual: true,
defaultRules: [
{
directives: {
textColor: '$mod(--parent, 10)',
textAuto: 'no-auto'
}
}
]
}

View File

@ -0,0 +1,101 @@
export default {
name: 'Button', // Name of the component
selector: '.button-default', // CSS selector/prefix
// outOfTreeSelector: '' // out-of-tree selector is used when other components are laid over it but it's not part of the tree, see Underlay component
// States, system witll calculate ALL possible combinations of those and prepend "normal" to them + standalone "normal" state
states: {
// States are a bit expensive - the amount of combinations generated is about (1/6)n^3+n, so adding more state increased number of combination by an order of magnitude!
// All states inherit from "normal" state, there is no other inheirtance, i.e. hover+disabled only inherits from "normal", not from hover nor disabled.
// However, cascading still works, so resulting state will be result of merging of all relevant states/variants
// normal: '' // normal state is implicitly added, it is always included
toggled: '.toggled',
pressed: ':active',
hover: ':hover:not(:disabled)',
focused: ':focus-within',
disabled: ':disabled'
},
// Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
variants: {
// Variants save on computation time since adding new variant just adds one more "set".
// normal: '', // you can override normal variant, it will be appenended to the main class
danger: '.danger'
// Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants.
// This (currently) is further multipled by number of places where component can exist.
},
// This lists all other components that can possibly exist within one. Recursion is currently not supported (and probably won't be supported ever).
validInnerComponents: [
'Text',
'Icon'
],
// Default rules, used as "default theme", essentially.
defaultRules: [
{
component: 'Root',
directives: {
'--defaultButtonHoverGlow': 'shadow | 0 0 4 --text',
'--defaultButtonShadow': 'shadow | 0 0 2 #000000',
'--defaultButtonBevel': 'shadow | $borderSide(#FFFFFF, top, 0.2) | $borderSide(#000000, bottom, 0.2)',
'--pressedButtonBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2)'
}
},
{
// component: 'Button', // no need to specify components every time unless you're specifying how other component should look
// like within it
directives: {
background: '--fg',
shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
roundness: 3
}
},
{
state: ['hover'],
directives: {
shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
}
},
{
state: ['pressed'],
directives: {
shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
}
},
{
state: ['hover', 'pressed'],
directives: {
shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
}
},
{
state: ['toggled'],
directives: {
background: '--inheritedBackground,-14.2',
shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
}
},
{
state: ['toggled', 'hover'],
directives: {
background: '--inheritedBackground,-14.2',
shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
}
},
{
state: ['disabled'],
directives: {
background: '$blend(--inheritedBackground, 0.25, --parent)',
shadow: ['--defaultButtonBevel']
}
},
{
component: 'Text',
parent: {
component: 'Button',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
}
]
}

View File

@ -0,0 +1,96 @@
export default {
name: 'ButtonUnstyled',
selector: '.button-unstyled',
states: {
toggled: '.toggled',
disabled: ':disabled',
hover: ':hover:not(:disabled)',
focused: ':focus-within'
},
validInnerComponents: [
'Text',
'Icon',
'Badge'
],
defaultRules: [
{
directives: {
background: '#ffffff',
opacity: 0,
shadow: []
}
},
{
component: 'Icon',
parent: {
component: 'ButtonUnstyled',
state: ['hover']
},
directives: {
textColor: '--parent--text'
}
},
{
component: 'Icon',
parent: {
component: 'ButtonUnstyled',
state: ['toggled']
},
directives: {
textColor: '--parent--text'
}
},
{
component: 'Icon',
parent: {
component: 'ButtonUnstyled',
state: ['toggled', 'hover']
},
directives: {
textColor: '--parent--text'
}
},
{
component: 'Icon',
parent: {
component: 'ButtonUnstyled',
state: ['toggled', 'focused']
},
directives: {
textColor: '--parent--text'
}
},
{
component: 'Icon',
parent: {
component: 'ButtonUnstyled',
state: ['toggled', 'focused', 'hover']
},
directives: {
textColor: '--parent--text'
}
},
{
component: 'Text',
parent: {
component: 'ButtonUnstyled',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
},
{
component: 'Icon',
parent: {
component: 'ButtonUnstyled',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
}
]
}

View File

@ -11,15 +11,15 @@
.chat-view-body { .chat-view-body {
box-sizing: border-box; box-sizing: border-box;
background-color: var(--chatBg, $fallback--bg);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
overflow: visible; overflow: visible;
min-height: calc(100vh - var(--navbar-height)); min-height: calc(100vh - var(--navbar-height));
margin: 0; margin: 0;
border-radius: 10px 10px 0 0; border-radius: var(--roundness);
border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
&::after { &::after {
border-radius: 0; border-radius: 0;
@ -37,8 +37,6 @@
.footer { .footer {
position: sticky; position: sticky;
bottom: 0; bottom: 0;
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
z-index: 1; z-index: 1;
} }
@ -61,8 +59,6 @@
position: absolute; position: absolute;
right: 1.3em; right: 1.3em;
top: -3.2em; top: -3.2em;
background-color: $fallback--fg;
background-color: var(--btn, $fallback--fg);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -79,12 +75,6 @@
visibility: visible; visibility: visible;
} }
i {
font-size: 1em;
color: $fallback--text;
color: var(--text, $fallback--text);
}
.unread-message-count { .unread-message-count {
font-size: 0.8em; font-size: 0.8em;
left: 50%; left: 50%;

View File

@ -0,0 +1,19 @@
export default {
name: 'Chat',
selector: '.chat-message-list',
validInnerComponents: [
'Text',
'Link',
'Icon',
'Avatar',
'ChatMessage'
],
defaultRules: [
{
directives: {
background: '--bg',
blur: '5px'
}
}
]
}

View File

@ -26,7 +26,7 @@
</div> </div>
</div> </div>
<div <div
class="message-list" class="chat-message-list message-list"
:style="{ height: scrollableContainerHeight }" :style="{ height: scrollableContainerHeight }"
> >
<template v-if="!errorLoadingChat"> <template v-if="!errorLoadingChat">
@ -61,7 +61,7 @@
<FAIcon icon="chevron-down" /> <FAIcon icon="chevron-down" />
<div <div
v-if="newMessageCount" v-if="newMessageCount"
class="badge badge-notification unread-chat-count unread-message-count" class="badge -notification unread-chat-count unread-message-count"
> >
{{ newMessageCount }} {{ newMessageCount }}
</div> </div>
@ -95,6 +95,5 @@
<script src="./chat.js"></script> <script src="./chat.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
@import "./chat"; @import "./chat";
</style> </style>

View File

@ -45,8 +45,6 @@
<script src="./chat_list.js"></script> <script src="./chat_list.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.chat-list { .chat-list {
min-height: 25em; min-height: 25em;
margin-bottom: 0; margin-bottom: 0;
@ -57,8 +55,7 @@
font-size: 1.2em; font-size: 1.2em;
display: flex; display: flex;
justify-content: center; justify-content: center;
color: $fallback--text; color: var(--textFaint);
color: var(--faint, $fallback--text);
} }
</style> </style>

View File

@ -1,8 +1,6 @@
.chat-list-item { .chat-list-item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 0.75em;
height: 5em;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
@ -11,11 +9,6 @@
outline: none; outline: none;
} }
&:hover {
background-color: var(--selectedPost, $fallback--lightBg);
box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
}
.chat-list-item-left { .chat-list-item-left {
margin-right: 1em; margin-right: 1em;
} }
@ -29,7 +22,7 @@
.heading { .heading {
width: 100%; width: 100%;
display: inline-flex; display: flex;
justify-content: space-between; justify-content: space-between;
line-height: 1em; line-height: 1em;
} }
@ -47,18 +40,17 @@
} }
.chat-preview { .chat-preview {
display: inline-flex; display: flex;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
margin: 0.35em 0; margin: 0.35em 0;
color: $fallback--text; color: var(--textFaint);
color: var(--faint, $fallback--text);
width: 100%; width: 100%;
} }
a { a {
color: var(--faintLink, $fallback--link); color: var(--linkFaint);
text-decoration: none; text-decoration: none;
pointer-events: none; pointer-events: none;
} }
@ -73,11 +65,6 @@
} }
} }
.Avatar {
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
}
.chat-preview-body { .chat-preview-body {
--emoji-size: 1.4em; --emoji-size: 1.4em;

View File

@ -36,7 +36,7 @@
/> />
<div <div
v-if="chat.unread > 0" v-if="chat.unread > 0"
class="badge badge-notification unread-chat-count" class="badge -notification unread-chat-count"
> >
{{ chat.unread }} {{ chat.unread }}
</div> </div>
@ -48,6 +48,5 @@
<script src="./chat_list_item.js"></script> <script src="./chat_list_item.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
@import "./chat_list_item"; @import "./chat_list_item";
</style> </style>

View File

@ -1,5 +1,3 @@
@import "../../variables";
.chat-message-wrapper { .chat-message-wrapper {
&.hovered-message-chain { &.hovered-message-chain {
.animated.Avatar { .animated.Avatar {
@ -27,12 +25,6 @@
.menu-icon { .menu-icon {
cursor: pointer; cursor: pointer;
&:hover,
.extra-button-popover.open & {
color: $fallback--text;
color: var(--text, $fallback--text);
}
} }
.popover { .popover {
@ -61,10 +53,12 @@
} }
.status { .status {
border-radius: $fallback--chatMessageRadius; background-color: var(--background);
border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius); color: var(--text);
border-radius: var(--roundness);
display: flex; display: flex;
padding: 0.75em; padding: 0.75em;
border: 1px solid var(--border);
} }
.created-at { .created-at {
@ -97,8 +91,7 @@
.error { .error {
.status-content.media-body, .status-content.media-body,
.created-at { .created-at {
color: $fallback--cRed; color: var(--badgeNotification);
color: var(--badgeNotification, $fallback--cRed);
} }
} }
@ -117,16 +110,6 @@
align-content: end; align-content: end;
justify-content: flex-end; justify-content: flex-end;
a {
color: var(--chatMessageOutgoingLink, $fallback--link);
}
.status {
color: var(--chatMessageOutgoingText, $fallback--text);
background-color: var(--chatMessageOutgoingBg, $fallback--lightBg);
border: 1px solid var(--chatMessageOutgoingBorder, --lightBg);
}
.chat-message-inner { .chat-message-inner {
align-items: flex-end; align-items: flex-end;
} }
@ -137,22 +120,6 @@
} }
.incoming { .incoming {
a {
color: var(--chatMessageIncomingLink, $fallback--link);
}
.status {
color: var(--chatMessageIncomingText, $fallback--text);
background-color: var(--chatMessageIncomingBg, $fallback--bg);
border: 1px solid var(--chatMessageIncomingBorder, --border);
}
.created-at {
a {
color: var(--chatMessageIncomingText, $fallback--text);
}
}
.chat-message-menu { .chat-message-menu {
left: 0.4rem; left: 0.4rem;
} }
@ -176,6 +143,5 @@
margin: 1.4em 0; margin: 1.4em 0;
font-size: 0.9em; font-size: 0.9em;
user-select: none; user-select: none;
color: $fallback--text; color: var(--textFaint);
color: var(--faintedText, $fallback--text);
} }

View File

@ -0,0 +1,30 @@
export default {
name: 'ChatMessage',
selector: '.chat-message',
variants: {
outgoing: '.outgoing'
},
validInnerComponents: [
'Text',
'Icon',
'Border',
'Button',
'RichContent',
'Attachment',
'PollGraph'
],
defaultRules: [
{
directives: {
background: '--bg, 2',
backgroundNoCssColor: 'yes'
}
},
{
variant: 'outgoing',
directives: {
background: '--bg, 5'
}
}
]
}

View File

@ -53,7 +53,7 @@
<template #content> <template #content>
<div class="dropdown-menu"> <div class="dropdown-menu">
<button <button
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
@click="deleteMessage" @click="deleteMessage"
> >
<FAIcon icon="times" /> {{ $t("chats.delete") }} <FAIcon icon="times" /> {{ $t("chats.delete") }}

View File

@ -16,11 +16,6 @@
padding-bottom: 0.7rem; padding-bottom: 0.7rem;
} }
.basic-user-card:hover {
cursor: pointer;
background-color: var(--selectedPost, $fallback--lightBg);
}
.go-back-button { .go-back-button {
text-align: center; text-align: center;
line-height: 1; line-height: 1;

View File

@ -16,27 +16,29 @@
/> />
</button> </button>
</div> </div>
<div class="input-wrap"> <div class="panel-body">
<div class="input-search"> <div class="input-wrap">
<FAIcon <div class="input-search">
class="search-icon fa-scale-110 fa-old-padding" <FAIcon
icon="search" class="search-icon fa-scale-110 fa-old-padding"
/> icon="search"
/>
</div>
<input
ref="search"
v-model="query"
class="input"
placeholder="Search people"
@input="onInput"
>
</div> </div>
<input <div class="member-list">
ref="search" <div
v-model="query" v-for="user in availableUsers"
placeholder="Search people" :key="user.id"
@input="onInput" class="list-item"
> @click.capture.prevent="goToChat(user)"
</div> >
<div class="member-list">
<div
v-for="user in availableUsers"
:key="user.id"
class="member"
>
<div @click.capture.prevent="goToChat(user)">
<BasicUserCard :user="user" /> <BasicUserCard :user="user" />
</div> </div>
</div> </div>
@ -46,6 +48,5 @@
<script src="./chat_new.js"></script> <script src="./chat_new.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
@import "./chat_new"; @import "./chat_new";
</style> </style>

View File

@ -26,8 +26,6 @@
<script src="./chat_title.js"></script> <script src="./chat_title.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.chat-title { .chat-title {
display: flex; display: flex;
overflow: hidden; overflow: hidden;
@ -54,8 +52,7 @@
margin-right: 0.5em; margin-right: 0.5em;
height: 1.5em; height: 1.5em;
width: 1.5em; width: 1.5em;
border-radius: $fallback--avatarAltRadius; border-radius: var(--roundness);
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
&.animated::before { &.animated::before {
display: none; display: none;

View File

@ -12,7 +12,7 @@
@change="$emit('update:modelValue', $event.target.checked)" @change="$emit('update:modelValue', $event.target.checked)"
> >
<i <i
class="checkbox-indicator" class="input -checkbox checkbox-indicator"
:aria-hidden="true" :aria-hidden="true"
@transitionend.capture="onTransitionEnd" @transitionend.capture="onTransitionEnd"
/> />
@ -54,7 +54,6 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
@import "../../mixins"; @import "../../mixins";
.checkbox { .checkbox {
@ -62,9 +61,15 @@ export default {
display: inline-block; display: inline-block;
min-height: 1.2em; min-height: 1.2em;
&-indicator { & > &-indicator {
/* Reset .input stuff */
padding: 0;
margin: 0;
position: relative; position: relative;
line-height: inherit;
display: inline;
padding-left: 1.2em; padding-left: 1.2em;
box-shadow: none;
} }
&-indicator::before { &-indicator::before {
@ -76,12 +81,9 @@ export default {
transition: color 200ms; transition: color 200ms;
width: 1.1em; width: 1.1em;
height: 1.1em; height: 1.1em;
border-radius: $fallback--checkboxRadius; border-radius: var(--roundness);
border-radius: var(--checkboxRadius, $fallback--checkboxRadius); box-shadow: var(--shadow);
box-shadow: 0 0 2px black inset; background-color: var(--background);
box-shadow: var(--inputShadow);
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
line-height: 1.1em; line-height: 1.1em;
@ -98,21 +100,18 @@ export default {
} }
.label { .label {
color: $fallback--faint; color: var(--text);
color: var(--faint, $fallback--faint);
} }
} }
input[type="checkbox"] { input[type="checkbox"] {
&:checked + .checkbox-indicator::before { &:checked + .checkbox-indicator::before {
color: $fallback--text; color: var(--text);
color: var(--inputText, $fallback--text);
} }
&:indeterminate + .checkbox-indicator::before { &:indeterminate + .checkbox-indicator::before {
content: ""; content: "";
color: $fallback--text; color: var(--text);
color: var(--inputText, $fallback--text);
} }
} }

View File

@ -1,5 +1,3 @@
@import "../../variables";
.color-input { .color-input {
display: inline-flex; display: inline-flex;
@ -11,9 +9,8 @@
padding: 0.2em 8px; padding: 0.2em 8px;
input { input {
color: var(--text);
background: none; background: none;
color: $fallback--lightText;
color: var(--inputText, $fallback--lightText);
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -23,21 +20,38 @@
min-width: 3em; min-width: 3em;
padding: 0; padding: 0;
} }
}
&.nativeColor { .nativeColor {
flex: 0 0 2em; cursor: pointer;
min-width: 2em; flex: 0 0 auto;
align-self: stretch;
min-height: 100%; input {
appearance: none;
max-width: 0;
min-width: 0;
max-height: 0;
/* stylelint-disable-next-line declaration-no-important */
opacity: 0 !important;
} }
} }
.computedIndicator, .computedIndicator,
.validIndicator,
.invalidIndicator,
.transparentIndicator { .transparentIndicator {
flex: 0 0 2em; flex: 0 0 2em;
margin: 0 0.5em;
min-width: 2em; min-width: 2em;
align-self: stretch; align-self: stretch;
min-height: 100%; min-height: 1.5em;
border-radius: var(--roundness);
}
.invalidIndicator {
background: transparent;
box-sizing: border-box;
border: 2px solid var(--cRed);
} }
.transparentIndicator { .transparentIndicator {
@ -58,11 +72,13 @@
&::after { &::after {
top: 0; top: 0;
left: 0; left: 0;
border-top-left-radius: var(--roundness);
} }
&::before { &::before {
bottom: 0; bottom: 0;
right: 0; right: 0;
border-bottom-right-radius: var(--roundness);
} }
} }
} }

View File

@ -25,30 +25,51 @@
:disabled="!present || disabled" :disabled="!present || disabled"
@input="$emit('update:modelValue', $event.target.value)" @input="$emit('update:modelValue', $event.target.value)"
> >
<input
v-if="validColor"
:id="name"
class="nativeColor unstyled"
type="color"
:value="modelValue || fallback"
:disabled="!present || disabled"
@input="$emit('update:modelValue', $event.target.value)"
>
<div <div
v-if="transparentColor" v-if="validColor"
class="validIndicator"
:style="{backgroundColor: modelValue || fallback}"
/>
<div
v-else-if="transparentColor"
class="transparentIndicator" class="transparentIndicator"
/> />
<div <div
v-if="computedColor" v-else-if="computedColor"
class="computedIndicator" class="computedIndicator"
:style="{backgroundColor: fallback}" :style="{backgroundColor: fallback}"
/> />
<div
v-else
class="invalidIndicator"
/>
<label class="nativeColor">
<FAIcon icon="eye-dropper" />
<input
:id="name"
class="unstyled"
type="color"
:value="modelValue || fallback"
:disabled="!present || disabled"
@input="$emit('update:modelValue', $event.target.value)"
>
</label>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Checkbox from '../checkbox/checkbox.vue' import Checkbox from '../checkbox/checkbox.vue'
import { hex2rgb } from '../../services/color_convert/color_convert.js' import { hex2rgb } from '../../services/color_convert/color_convert.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faEyeDropper
} from '@fortawesome/free-solid-svg-icons'
library.add(
faEyeDropper
)
export default { export default {
components: { components: {
Checkbox Checkbox
@ -108,12 +129,3 @@ export default {
} }
</script> </script>
<style lang="scss" src="./color_input.scss"></style> <style lang="scss" src="./color_input.scss"></style>
<style lang="scss">
.color-control {
input.text-input {
max-width: 7em;
flex: 1;
}
}
</style>

View File

@ -56,7 +56,8 @@ const conversation = {
expanded: false, expanded: false,
threadDisplayStatusObject: {}, // id => 'showing' | 'hidden' threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
statusContentPropertiesObject: {}, statusContentPropertiesObject: {},
inlineDivePosition: null inlineDivePosition: null,
loadStatusError: null
} }
}, },
props: [ props: [
@ -392,11 +393,15 @@ const conversation = {
this.setHighlight(this.originalStatusId) this.setHighlight(this.originalStatusId)
}) })
} else { } else {
this.loadStatusError = null
this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId }) this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId })
.then((status) => { .then((status) => {
this.$store.dispatch('addNewStatuses', { statuses: [status] }) this.$store.dispatch('addNewStatuses', { statuses: [status] })
this.fetchConversation() this.fetchConversation()
}) })
.catch((error) => {
this.loadStatusError = error
})
} }
}, },
getReplies (id) { getReplies (id) {

View File

@ -28,7 +28,27 @@
class="rightside-button" class="rightside-button"
/> />
</div> </div>
<div class="conversation-body panel-body"> <div
v-if="isPage && !status"
class="conversation-body"
:class="{ 'panel-body': isExpanded }"
>
<p v-if="!loadStatusError">
<FAIcon
spin
icon="circle-notch"
/>
{{ $t('status.loading') }}
</p>
<p v-else>
{{ $t('status.load_error', { error: loadStatusError }) }}
</p>
</div>
<div
v-else
class="conversation-body"
:class="{ 'panel-body': isExpanded }"
>
<div <div
v-if="isTreeView" v-if="isTreeView"
class="thread-body" class="thread-body"
@ -203,6 +223,7 @@
</div> </div>
<div <div
v-else v-else
class="Conversation -hidden"
:style="hiddenStyle" :style="hiddenStyle"
/> />
</template> </template>
@ -210,14 +231,17 @@
<script src="./conversation.js"></script> <script src="./conversation.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.Conversation { .Conversation {
z-index: 1; z-index: 1;
&.-hidden {
background: var(--__panel-background);
backdrop-filter: var(--__panel-backdrop-filter);
}
.conversation-dive-to-top-level-box { .conversation-dive-to-top-level-box {
padding: var(--status-margin, $status-margin); padding: var(--status-margin);
border-bottom: 1px solid var(--border, $fallback--border); border-bottom: 1px solid var(--border);
border-radius: 0; border-radius: 0;
/* Make the button stretch along the whole row */ /* Make the button stretch along the whole row */
@ -227,20 +251,22 @@
} }
.thread-ancestors { .thread-ancestors {
margin-left: var(--status-margin, $status-margin); margin-left: var(--status-margin);
border-left: 2px solid var(--border, $fallback--border); border-left: 2px solid var(--border);
} }
.thread-ancestor.-faded .StatusContent { .thread-ancestor.-faded .RichContent {
--link: var(--faintLink); /* stylelint-disable declaration-no-important */
--text: var(--faint); --text: var(--textFaint) !important;
--link: var(--linkFaint) !important;
color: var(--text); --funtextGreentext: var(--funtextGreentextFaint) !important;
--funtextCyantext: var(--funtextCyantextFaint) !important;
/* stylelint-enable declaration-no-important */
} }
.thread-ancestor-dive-box { .thread-ancestor-dive-box {
padding-left: var(--status-margin, $status-margin); padding-left: var(--status-margin);
border-bottom: 1px solid var(--border, $fallback--border); border-bottom: 1px solid var(--border);
border-radius: 0; border-radius: 0;
/* Make the button stretch along the whole row */ /* Make the button stretch along the whole row */
@ -253,16 +279,17 @@
} }
.thread-ancestor-dive-box-inner { .thread-ancestor-dive-box-inner {
padding: var(--status-margin, $status-margin); padding: var(--status-margin);
} }
.conversation-status { .conversation-status {
border-bottom: 1px solid var(--border, $fallback--border); border-bottom: 1px solid var(--border);
border-radius: 0; border-radius: 0;
} }
.thread-ancestor-has-other-replies .conversation-status, .thread-ancestor-has-other-replies .conversation-status,
&:last-child .conversation-status, &:last-child:not(.-expanded) .conversation-status,
&.-expanded .conversation-status:last-child,
.thread-ancestor:last-child .conversation-status, .thread-ancestor:last-child .conversation-status,
.thread-ancestor:last-child .thread-ancestor-dive-box, .thread-ancestor:last-child .thread-ancestor-dive-box,
&.-expanded .thread-tree .conversation-status { &.-expanded .thread-tree .conversation-status {
@ -270,20 +297,36 @@
} }
.thread-ancestors + .thread-tree > .conversation-status { .thread-ancestors + .thread-tree > .conversation-status {
border-top: 1px solid var(--border, $fallback--border); border-top: 1px solid var(--border);
} }
/* expanded conversation in timeline */ /* expanded conversation in timeline */
&.status-fadein.-expanded .thread-body { &.status-fadein.-expanded .thread-body {
border-left: 4px solid $fallback--cRed; border-left: 4px solid var(--cRed);
border-left-color: var(--cRed, $fallback--cRed); border-radius: var(--roundness);
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius; border-top-left-radius: 0;
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius); border-top-right-radius: 0;
border-bottom: 1px solid var(--border, $fallback--border); border-bottom: 1px solid var(--border);
} }
&.-expanded.status-fadein { &.-expanded.status-fadein {
margin: calc(var(--status-margin, $status-margin) / 2); --___margin: calc(var(--status-margin) / 2);
background: var(--background);
margin: var(--___margin);
&::before {
z-index: -1;
content: "";
display: block;
position: absolute;
top: calc(var(--___margin) * -1);
bottom: calc(var(--___margin) * -1);
left: calc(var(--___margin) * -1);
right: calc(var(--___margin) * -1);
background: var(--background);
backdrop-filter: var(--__panel-backdrop-filter);
}
} }
} }
</style> </style>

View File

@ -1,5 +1,3 @@
@import "../../variables";
.DesktopNav { .DesktopNav {
width: 100%; width: 100%;
z-index: var(--ZI_navbar); z-index: var(--ZI_navbar);
@ -9,7 +7,7 @@
} }
a { a {
color: var(--topBarLink, $fallback--link); color: var(--link);
} }
.inner-nav { .inner-nav {
@ -54,27 +52,7 @@
.button-default { .button-default {
&, &,
svg { svg {
color: $fallback--text; color: var(--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);
} }
} }
@ -94,8 +72,7 @@
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
background-color: $fallback--fg; background-color: var(--text);
background-color: var(--topBarText, $fallback--fg);
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -116,8 +93,7 @@
text-align: center; text-align: center;
.svg-inline--fa { .svg-inline--fa {
color: $fallback--link; color: var(--link);
color: var(--topBarLink, $fallback--link);
} }
} }

View File

@ -12,7 +12,7 @@
<slot name="header" /> <slot name="header" />
</div> </div>
</div> </div>
<div class="dialog-modal-content"> <div class="panel-body dialog-modal-content">
<slot name="default" /> <slot name="default" />
</div> </div>
<div class="dialog-modal-footer user-interactions panel-footer"> <div class="dialog-modal-footer user-interactions panel-footer">
@ -25,8 +25,6 @@
<script src="./dialog_modal.js"></script> <script src="./dialog_modal.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
// TODO: unify with other modals. // TODO: unify with other modals.
.dark-overlay { .dark-overlay {
&::before { &::before {
@ -54,8 +52,6 @@
z-index: 2001; z-index: 2001;
cursor: default; cursor: default;
display: block; display: block;
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
.dialog-modal-heading { .dialog-modal-heading {
.title { .title {
@ -66,18 +62,13 @@
.dialog-modal-content { .dialog-modal-content {
margin: 0; margin: 0;
padding: 1rem; padding: 1rem;
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
white-space: normal; white-space: normal;
} }
.dialog-modal-footer { .dialog-modal-footer {
margin: 0; margin: 0;
padding: 0.5em; padding: 0.5em;
background-color: $fallback--bg; border-top: 1px solid var(--border);
background-color: var(--bg, $fallback--bg);
border-top: 1px solid $fallback--border;
border-top: 1px solid var(--border, $fallback--border);
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;

View File

@ -1,7 +1,7 @@
<template> <template>
<div <div
ref="root" ref="root"
class="emoji-input" class="input emoji-input"
:class="{ 'with-picker': !hideEmojiButton }" :class="{ 'with-picker': !hideEmojiButton }"
> >
<slot <slot
@ -68,9 +68,9 @@
v-for="(suggestion, index) in suggestions" v-for="(suggestion, index) in suggestions"
:id="suggestionItemId(index)" :id="suggestionItemId(index)"
:key="index" :key="index"
class="autocomplete-item" class="menu-item autocomplete-item"
role="option" role="option"
:class="{ highlighted: index === highlighted }" :class="{ '-active': index === highlighted }"
:aria-label="autoCompleteItemLabel(suggestion)" :aria-label="autoCompleteItemLabel(suggestion)"
:aria-selected="index === highlighted" :aria-selected="index === highlighted"
@click.stop.prevent="onClick($event, suggestion)" @click.stop.prevent="onClick($event, suggestion)"
@ -110,9 +110,8 @@
<script src="./emoji_input.js"></script> <script src="./emoji_input.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables"; .input.emoji-input {
padding: 0;
.emoji-input {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
@ -127,8 +126,7 @@
line-height: 24px; line-height: 24px;
&:hover i { &:hover i {
color: $fallback--text; color: var(--text);
color: var(--text, $fallback--text);
} }
} }
@ -145,6 +143,12 @@
input, input,
textarea { textarea {
flex: 1 0 auto; flex: 1 0 auto;
color: inherit;
/* stylelint-disable-next-line declaration-no-important */
background: none !important;
box-shadow: none;
border: none;
outline: none;
} }
&.with-picker input { &.with-picker input {
@ -179,26 +183,28 @@
position: absolute; position: absolute;
} }
&-item { &-item.menu-item {
display: flex; display: flex;
cursor: pointer; padding-top: 0;
padding: 0.2em 0.4em; padding-bottom: 0;
border-bottom: 1px solid rgb(0 0 0 / 40%);
height: 32px;
.image { .image {
width: 32px; width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
height: 32px; height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
line-height: 32px; line-height: var(--__line-height);
text-align: center; text-align: center;
font-size: 32px; margin-right: var(--__horizontal-gap);
margin-right: 4px;
img { img {
width: 32px; width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
height: 32px; height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
object-fit: contain; object-fit: contain;
} }
span {
font-size: var(--__line-height);
line-height: var(--__line-height);
}
} }
.label { .label {
@ -216,17 +222,6 @@
line-height: 9px; line-height: 9px;
} }
} }
&.highlighted {
background-color: $fallback--fg;
background-color: var(--selectedMenuPopover, $fallback--fg);
color: var(--selectedMenuPopoverText, $fallback--text);
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
}
} }
} }
</style> </style>

View File

@ -114,6 +114,7 @@ const EmojiPicker = {
groupsScrolledClass: 'scrolled-top', groupsScrolledClass: 'scrolled-top',
keepOpen: false, keepOpen: false,
customEmojiTimeout: null, customEmojiTimeout: null,
hideCustomEmojiInPicker: false,
// Lazy-load only after the first time `showing` becomes true. // Lazy-load only after the first time `showing` becomes true.
contentLoaded: false, contentLoaded: false,
groupRefs: {}, groupRefs: {},
@ -286,7 +287,7 @@ const EmojiPicker = {
return 0 return 0
}, },
allCustomGroups () { allCustomGroups () {
if (this.hideCustomEmoji) { if (this.hideCustomEmoji || this.hideCustomEmojiInPicker) {
return {} return {}
} }
const emojis = this.$store.getters.groupedCustomEmojis const emojis = this.$store.getters.groupedCustomEmojis

View File

@ -1,5 +1,3 @@
@import "../../variables";
$emoji-picker-header-height: 36px; $emoji-picker-header-height: 36px;
$emoji-picker-header-picture-width: 32px; $emoji-picker-header-picture-width: 32px;
$emoji-picker-header-picture-height: 32px; $emoji-picker-header-picture-height: 32px;
@ -10,15 +8,6 @@ $emoji-picker-emoji-size: 32px;
max-width: calc(100vw - 20px); // popover gives 10px margin from window edge max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: $fallback--bg;
background-color: var(--popover, $fallback--bg);
color: $fallback--link;
color: var(--popoverText, $fallback--link);
--faint: var(--popoverFaintText, $fallback--faint);
--faintLink: var(--popoverFaintLink, $fallback--faint);
--lightText: var(--popoverLightText, $fallback--lightText);
--icon: var(--popoverIcon, $fallback--icon);
&-header-image { &-header-image {
display: inline-flex; display: inline-flex;
@ -39,11 +28,16 @@ $emoji-picker-emoji-size: 32px;
} }
.keep-open, .keep-open,
.too-many-emoji { .too-many-emoji,
.hide-custom-emoji {
padding: 7px; padding: 7px;
line-height: normal; line-height: normal;
} }
.hide-custom-emoji {
padding-top: 0;
}
.too-many-emoji { .too-many-emoji {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -76,8 +70,7 @@ $emoji-picker-emoji-size: 32px;
.additional-tabs { .additional-tabs {
display: flex; display: flex;
border-left: 1px solid; border-left: 1px solid;
border-left-color: $fallback--icon; border-left-color: var(--border);
border-left-color: var(--icon, $fallback--icon);
padding-left: 7px; padding-left: 7px;
flex: 0 0 auto; flex: 0 0 auto;
} }
@ -104,13 +97,8 @@ $emoji-picker-emoji-size: 32px;
pointer-events: none; pointer-events: none;
} }
&.active { &.toggled {
border-bottom: 4px solid; border-bottom: 4px solid;
svg {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
} }
} }
} }

View File

@ -23,9 +23,9 @@
v-for="group in filteredEmojiGroups" v-for="group in filteredEmojiGroups"
:ref="setGroupRef('group-header-' + group.id)" :ref="setGroupRef('group-header-' + group.id)"
:key="group.id" :key="group.id"
class="emoji-tabs-item" class="button-unstyled emoji-tabs-item"
:class="{ :class="{
active: activeGroupView === group.id toggled: activeGroupView === group.id
}" }"
:title="group.text" :title="group.text"
role="button" role="button"
@ -52,8 +52,8 @@
class="additional-tabs" class="additional-tabs"
> >
<span <span
class="stickers-tab-icon additional-tabs-item" class="button-unstyled stickers-tab-icon additional-tabs-item"
:class="{active: showingStickers}" :class="{toggled: showingStickers}"
:title="$t('emoji.stickers')" :title="$t('emoji.stickers')"
@click.prevent="toggleStickers" @click.prevent="toggleStickers"
> >
@ -77,7 +77,7 @@
ref="search" ref="search"
v-model="keyword" v-model="keyword"
type="text" type="text"
class="form-control" class="input form-control"
:placeholder="$t('emoji.search_emoji')" :placeholder="$t('emoji.search_emoji')"
@input="$event.target.composing = false" @input="$event.target.composing = false"
> >
@ -142,6 +142,17 @@
{{ $t('emoji.keep_open') }} {{ $t('emoji.keep_open') }}
</Checkbox> </Checkbox>
</div> </div>
<div
v-if="!hideCustomEmoji"
class="hide-custom-emoji"
>
<Checkbox
v-model="hideCustomEmojiInPicker"
@change="onShowing"
>
{{ $t('emoji.hide_custom_emoji') }}
</Checkbox>
</div>
</div> </div>
<div <div
v-if="showingStickers" v-if="showingStickers"

View File

@ -72,7 +72,6 @@
<script src="./emoji_reactions.js"></script> <script src="./emoji_reactions.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
@import "../../mixins"; @import "../../mixins";
.EmojiReactions { .EmojiReactions {
@ -92,7 +91,6 @@
padding: 0; padding: 0;
.emoji-reaction-count-button { .emoji-reaction-count-button {
background-color: var(--btn);
margin: 0; margin: 0;
height: 100%; height: 100%;
border-top-left-radius: 0; border-top-left-radius: 0;
@ -102,11 +100,9 @@
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: $fallback--text;
color: var(--btnText, $fallback--text);
&.-picked-reaction { &.-picked-reaction {
border: 1px solid var(--accent, $fallback--link); border: 1px solid var(--accent);
margin-right: -1px; margin-right: -1px;
} }
} }
@ -149,18 +145,16 @@
} }
.svg-inline--fa { .svg-inline--fa {
color: $fallback--text; color: var(--text);
color: var(--btnText, $fallback--text);
} }
&.-picked-reaction { &.-picked-reaction {
border: 1px solid var(--accent, $fallback--link); border: 1px solid var(--accent);
margin-left: -1px; // offset the border, can't use inset shadows either margin-left: -1px; // offset the border, can't use inset shadows either
margin-right: -1px; margin-right: -1px;
.svg-inline--fa { .svg-inline--fa {
color: $fallback--link; color: var(--accent);
color: var(--accent, $fallback--link);
} }
} }
@ -176,8 +170,7 @@
@include focused-style { @include focused-style {
.svg-inline--fa { .svg-inline--fa {
color: $fallback--link; color: var(--accent);
color: var(--accent, $fallback--link);
} }
.focus-marker { .focus-marker {

View File

@ -12,13 +12,13 @@
> >
<template #content="{close}"> <template #content="{close}">
<div <div
:id="`popup-menu-${randomSeed}`"
class="dropdown-menu" class="dropdown-menu"
role="menu" role="menu"
:id="`popup-menu-${randomSeed}`"
> >
<button <button
v-if="canMute && !status.thread_muted" v-if="canMute && !status.thread_muted"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="muteConversation" @click.prevent="muteConversation"
> >
@ -29,7 +29,7 @@
</button> </button>
<button <button
v-if="canMute && status.thread_muted" v-if="canMute && status.thread_muted"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="unmuteConversation" @click.prevent="unmuteConversation"
> >
@ -40,7 +40,7 @@
</button> </button>
<button <button
v-if="!status.pinned && canPin" v-if="!status.pinned && canPin"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="pinStatus" @click.prevent="pinStatus"
@click="close" @click="close"
@ -52,7 +52,7 @@
</button> </button>
<button <button
v-if="status.pinned && canPin" v-if="status.pinned && canPin"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="unpinStatus" @click.prevent="unpinStatus"
@click="close" @click="close"
@ -65,7 +65,7 @@
<template v-if="canBookmark"> <template v-if="canBookmark">
<button <button
v-if="!status.bookmarked" v-if="!status.bookmarked"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="bookmarkStatus" @click.prevent="bookmarkStatus"
@click="close" @click="close"
@ -77,7 +77,7 @@
</button> </button>
<button <button
v-if="status.bookmarked" v-if="status.bookmarked"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="unbookmarkStatus" @click.prevent="unbookmarkStatus"
@click="close" @click="close"
@ -90,7 +90,7 @@
</template> </template>
<button <button
v-if="ownStatus && editingAvailable" v-if="ownStatus && editingAvailable"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="editStatus" @click.prevent="editStatus"
@click="close" @click="close"
@ -102,7 +102,7 @@
</button> </button>
<button <button
v-if="isEdited && editingAvailable" v-if="isEdited && editingAvailable"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="showStatusHistory" @click.prevent="showStatusHistory"
@click="close" @click="close"
@ -114,7 +114,7 @@
</button> </button>
<button <button
v-if="canDelete" v-if="canDelete"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="deleteStatus" @click.prevent="deleteStatus"
@click="close" @click="close"
@ -125,7 +125,7 @@
/><span>{{ $t("status.delete") }}</span> /><span>{{ $t("status.delete") }}</span>
</button> </button>
<button <button
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="copyLink" @click.prevent="copyLink"
@click="close" @click="close"
@ -137,7 +137,7 @@
</button> </button>
<a <a
v-if="!status.is_local" v-if="!status.is_local"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
title="Source" title="Source"
:href="status.external_url" :href="status.external_url"
@ -149,7 +149,7 @@
/><span>{{ $t("status.external_source") }}</span> /><span>{{ $t("status.external_source") }}</span>
</a> </a>
<button <button
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="reportStatus" @click.prevent="reportStatus"
@click="close" @click="close"
@ -201,7 +201,6 @@
<script src="./extra_buttons.js"></script> <script src="./extra_buttons.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
@import "../../mixins"; @import "../../mixins";
.ExtraButtons { .ExtraButtons {
@ -211,8 +210,7 @@
margin: -10px; margin: -10px;
&:hover .svg-inline--fa { &:hover .svg-inline--fa {
color: $fallback--text; color: var(--text);
color: var(--text, $fallback--text);
} }
} }

View File

@ -80,8 +80,6 @@
<script src="./extra_notifications.js" /> <script src="./extra_notifications.js" />
<style lang="scss"> <style lang="scss">
@import "../../variables";
.ExtraNotifications { .ExtraNotifications {
width: 100%; width: 100%;
display: flex; display: flex;
@ -91,8 +89,7 @@
.notification { .notification {
width: 100%; width: 100%;
border-bottom: 1px solid; border-bottom: 1px solid;
border-color: $fallback--border; border-color: var(--border);
border-color: var(--border, $fallback--border);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;

View File

@ -65,7 +65,6 @@
<script src="./favorite_button.js"></script> <script src="./favorite_button.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
@import "../../mixins"; @import "../../mixins";
.FavoriteButton { .FavoriteButton {
@ -88,8 +87,7 @@
&:hover .svg-inline--fa, &:hover .svg-inline--fa,
&.-favorited .svg-inline--fa { &.-favorited .svg-inline--fa {
color: $fallback--cOrange; color: var(--cOrange);
color: var(--cOrange, $fallback--cOrange);
} }
@include unfocused-style { @include unfocused-style {

View File

@ -42,8 +42,6 @@
<script src="./flash.js"></script> <script src="./flash.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.Flash { .Flash {
display: inline-block; display: inline-block;
width: 100%; width: 100%;

View File

@ -14,7 +14,7 @@
v-if="typeof fallback !== 'undefined'" v-if="typeof fallback !== 'undefined'"
:id="name + '-o'" :id="name + '-o'"
:aria-labelledby="name + '-label'" :aria-labelledby="name + '-label'"
class="opt exlcude-disabled visible-for-screenreader-only" class="input -checkbox opt exlcude-disabled visible-for-screenreader-only"
type="checkbox" type="checkbox"
:checked="present" :checked="present"
@change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)" @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
@ -44,7 +44,7 @@
v-if="isCustom" v-if="isCustom"
:id="name" :id="name"
v-model="family" v-model="family"
class="custom-font" class="input custom-font"
type="text" type="text"
> >
</div> </div>
@ -53,8 +53,6 @@
<script src="./font_control.js"></script> <script src="./font_control.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.font-control { .font-control {
input.custom-font { input.custom-font {
min-width: 10em; min-width: 10em;

View File

@ -0,0 +1,40 @@
export default {
name: 'FunText',
selector: '/*fun-text*/',
virtual: true,
variants: {
greentext: '.greentext',
cyantext: '.cyantext'
},
states: {
faint: '.faint'
},
defaultRules: [
{
directives: {
textColor: '--text',
textAuto: 'preserve'
}
},
{
state: ['faint'],
directives: {
textOpacity: 0.5
}
},
{
variant: 'greentext',
directives: {
textColor: '--cGreen',
textAuto: 'preserve'
}
},
{
variant: 'cyantext',
directives: {
textColor: '--cBlue',
textAuto: 'preserve'
}
}
]
}

View File

@ -87,8 +87,6 @@
<script src='./gallery.js'></script> <script src='./gallery.js'></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.Gallery { .Gallery {
.gallery-rows { .gallery-rows {
display: flex; display: flex;

View File

@ -4,7 +4,7 @@
v-for="(notice, index) in notices" v-for="(notice, index) in notices"
:key="index" :key="index"
class="alert global-notice" class="alert global-notice"
:class="{ ['global-' + notice.level]: true }" :class="{ [notice.level]: true }"
> >
<div class="notice-message"> <div class="notice-message">
{{ $t(notice.messageKey, notice.messageArgs) }} {{ $t(notice.messageKey, notice.messageArgs) }}
@ -25,14 +25,12 @@
<script src="./global_notice_list.js"></script> <script src="./global_notice_list.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.global-notice-list { .global-notice-list {
position: fixed; position: fixed;
top: calc(var(--navbar-height) + 0.5em); top: calc(var(--navbar-height) + 0.5em);
width: 100%; width: 100%;
pointer-events: none; pointer-events: none;
z-index: var(--ZI_navbar_popovers); z-index: var(--ZI_modals_popovers);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -52,48 +50,8 @@
} }
} }
.global-error {
background-color: var(--alertPopupError, $fallback--cRed);
color: var(--alertPopupErrorText, $fallback--text);
.svg-inline--fa {
color: var(--alertPopupErrorText, $fallback--text);
}
}
.global-warning {
background-color: var(--alertPopupWarning, $fallback--cOrange);
color: var(--alertPopupWarningText, $fallback--text);
.svg-inline--fa {
color: var(--alertPopupWarningText, $fallback--text);
}
}
.global-success {
background-color: var(--alertPopupSuccess, $fallback--cGreen);
color: var(--alertPopupSuccessText, $fallback--text);
.svg-inline--fa {
color: var(--alertPopupSuccessText, $fallback--text);
}
}
.global-info {
background-color: var(--alertPopupNeutral, $fallback--fg);
color: var(--alertPopupNeutralText, $fallback--text);
.svg-inline--fa {
color: var(--alertPopupNeutralText, $fallback--text);
}
}
.close-notice { .close-notice {
padding-right: 0.2em; padding-right: 0.2em;
.svg-inline--fa:hover {
opacity: 0.6;
}
} }
} }
</style> </style>

View File

@ -0,0 +1,14 @@
export default {
name: 'Icon',
virtual: true,
selector: '.svg-inline--fa',
defaultRules: [
{
component: 'Icon',
directives: {
textColor: '$blend(--stack, 0.5, --parent--text)',
textAuto: 'no-auto'
}
}
]
}

View File

@ -41,7 +41,7 @@
<input <input
ref="input" ref="input"
type="file" type="file"
class="image-cropper-img-input" class="input image-cropper-img-input"
:accept="mimes" :accept="mimes"
> >
</div> </div>

View File

@ -3,6 +3,7 @@
<form> <form>
<input <input
ref="input" ref="input"
class="input"
type="file" type="file"
@change="change" @change="change"
> >

View File

@ -0,0 +1,60 @@
const hoverGlow = {
x: 0,
y: 0,
blur: 4,
spread: 0,
color: '--text',
alpha: 1
}
export default {
name: 'Input',
selector: '.input',
variant: {
checkbox: '.-checkbox',
radio: '.-radio'
},
states: {
disabled: ':disabled',
hover: ':hover:not(:disabled)',
focused: ':focus-within'
},
validInnerComponents: [
'Text'
],
defaultRules: [
{
component: 'Root',
directives: {
'--defaultInputBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2)'
}
},
{
variant: 'checkbox',
directives: {
roundness: 1
}
},
{
directives: {
'--font': 'generic | inherit',
background: '--fg, -5',
roundness: 3,
shadow: [{
x: 0,
y: 0,
blur: 2,
spread: 0,
color: '#000000',
alpha: 1
}, '--defaultInputBevel']
}
},
{
state: ['hover'],
directives: {
shadow: [hoverGlow, '--defaultInputBevel']
}
}
]
}

View File

@ -104,8 +104,6 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.interface-language-switcher { .interface-language-switcher {
.language-select { .language-select {
margin-right: 1em; margin-right: 1em;

View File

@ -33,8 +33,6 @@
<script src="./link-preview.js"></script> <script src="./link-preview.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.link-preview-card { .link-preview-card {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -51,8 +49,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
border-radius: $fallback--attachmentRadius; border-radius: var(--roundness);
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
} }
} }
@ -82,13 +79,10 @@
margin: 2em 0; margin: 2em 0;
} }
color: $fallback--text; color: var(--text);
color: var(--text, $fallback--text);
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-radius: $fallback--attachmentRadius; border-radius: var(--roundness);
border-radius: var(--attachmentRadius, $fallback--attachmentRadius); border-color: var(--border);
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
} }
</style> </style>

View File

@ -0,0 +1,24 @@
export default {
name: 'Link',
selector: 'a',
virtual: true,
states: {
faint: '.faint'
},
defaultRules: [
{
component: 'Link',
directives: {
textColor: '--link'
}
},
{
component: 'Link',
state: ['faint'],
directives: {
textOpacity: 0.5,
textOpacityMode: 'fake'
}
}
]
}

Some files were not shown because too many files have changed in this diff Show More