Kirby
3 weeks ago
commit
858308517b
@ -0,0 +1,13 @@ |
||||
# v1.0 |
||||
## Removed features/radically changed behavior |
||||
### formattingOptionsEnabled |
||||
as of !833 `formattingOptionsEnabled` is no longer available and instead FE check for available post formatting options and enables formatting control if there's more than one option. |
||||
|
||||
### minimalScopesMode |
||||
As of !633, `scopeOptions` is no longer available and instead is changed for `minimalScopesMode` (default: `false`) |
||||
|
||||
Reasoning is that scopeOptions option originally existed mostly as a backwards-compatibility with GNU Social which only had `public` scope available and using scope selector would''t work. Since at some point we dropped GNU Social support, this option was mostly a nuisance (being default `false`'), however some people think scopes are an annoyance to a certain degree and want as less of that feature as possible. |
||||
|
||||
Solution - to only show minimal set among: *Direct*, *User default* and *Scope of post replying to*. This also makes it impossible to reply to a DM with a non-DM post from UI. |
||||
|
||||
*This setting is admin-default, user-configurable. Admin can choose different default for their instance but user can override it.* |
||||
@ -0,0 +1,400 @@ |
||||
# Changelog |
||||
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/). |
||||
|
||||
## 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 |
||||
### Added |
||||
- add the initial i18n translation file for Taiwanese (Hokkien), and modify some related files. |
||||
- Implemented a very basic instance administration screen |
||||
- Implement quoting |
||||
|
||||
### Fixed |
||||
- Keep aspect ratio of custom emoji reaction in notification |
||||
- Fix openSettingsModalTab so that it correctly opens Settings modal instead of Admin modal |
||||
- Add alt text to emoji picker buttons |
||||
- Use export-subst gitattribute to allow tarball builds |
||||
- fix reports now showing reason/content |
||||
- Fix HTML attribute parsing, discard attributes not strating with a letter |
||||
- Make MentionsLine aware of line breaking by non-br elements |
||||
- Fix a bug where mentioning a user twice will not fill the mention into the textarea |
||||
- Fix parsing non-ascii tags |
||||
- Fix OAuth2 token lingering after revocation |
||||
- fix regex issue in HTML parser/renderer |
||||
- don't display quoted status twice |
||||
- fix typo in code that prevented cards from showing at all |
||||
- Fix react button not working if reaction accounts are not loaded |
||||
- Fix react button misalignment on safari ios |
||||
- Fix pinned statuses gone when reloading user timeline |
||||
- Fix scrolling emoji selector in modal in safari ios |
||||
|
||||
## 2.5.1 |
||||
### Fixed |
||||
- Checkboxes in settings can now work with screenreaders |
||||
- Autocomplete in edit boxes can now work with screenreaders |
||||
- Status interact buttons now have focus indicator for anonymous users |
||||
- Top bar buttons now correctly have text labels |
||||
- It is now possible to register if the site admin requires birthday to register |
||||
- User cards from search results will correctly popup |
||||
- Fix notification attachment icon overflow |
||||
- Editing mute words is less laggy |
||||
- Repeater's name will no longer mess up with the directionality of the text sitting on the same line |
||||
- Unauthenticated access will give better error messages |
||||
- It is now easier to close the media viewer with a mouse when there is only one image |
||||
- Deleting profile fields can work properly |
||||
- Clicking the react button will correctly focus the search box |
||||
- Clicking buttons on the top-bar will no longer bring you to the top of the page |
||||
- Emoji picker is much faster to load |
||||
- `blockquote`s have a better display style |
||||
- Announcements posting and editing are now available to everyone with such a privilege, not just admins |
||||
- Adding or removing list members will actually work |
||||
- Emojis without a pack are now correctly displayed in emoji picker |
||||
- Changing notification settings will actually work |
||||
|
||||
### Added |
||||
- You can now set and see birthdays |
||||
- Optional confirmation dialogs when performing various actions |
||||
- You can now set fallback languages |
||||
|
||||
## 2.5.0 - 23.12.2022 |
||||
### Fixed |
||||
- UI no longer lags when switching between mobile and desktop mode |
||||
- Popovers no longer constrained by DOM hierarchy, shouldn't be cut off by anything |
||||
- Emoji autocomplete popover and picker popover stick to the text cursor. |
||||
- Attachments are ALWAYS in same order as user uploaded, no more "videos first" |
||||
- Pinned statuses no longer appear at bottom of user timeline (still appear as part of the timeline when fetched deep enough) |
||||
- Fixed many many bugs related to new mentions, including spacing and alignment issues |
||||
- Links in profile bios now properly open in new tabs |
||||
- "Always show mobile button" is working now |
||||
- Inline images now respect their intended width/height attributes |
||||
- Links with `&` in them work properly now |
||||
- Attachment description is prefilled with backend-provided default when uploading |
||||
- Proper visual feedback that next image is loading when browsing |
||||
- Additional HTML sanitization on frontend side in case backend sanitization fails |
||||
- Interaction list popovers now properly emojify names |
||||
- AdminFE button no longer scrolls page to top when clicked |
||||
- User handles with non-ascii domains now have less intrusive indicator for the domain name |
||||
- Completely hidden posts still no longer have 1px border |
||||
- A lot of accessibility improvements |
||||
|
||||
### Changed |
||||
- Using Vue 3 now |
||||
- A lot of internal dependencies updated |
||||
- "(You)s" are optional (opt-in) now, bolding your nickname is also optional (opt-out) |
||||
- User highlight background now also covers the `@` |
||||
- Reverted back to textual `@`, svg version is opt-in. |
||||
- Settings window has been thoroughly rearranged to make more sense and make navigation settings easier. |
||||
- Uploaded attachments are uniform with displayed attachments |
||||
- Flash is watchable in media-modal (takes up nearly full screen though due to sizing issues) |
||||
- Notifications about likes/repeats/emoji reacts are now minimized so they always take up same amount of space irrelevant to size of post. (You can expand them to full if need be) |
||||
- Slight width/spacing adjustments |
||||
- More sizing stuff is font-size dependent now |
||||
- Scrollbars are styled/colorized now |
||||
- Scrollbars are toggleable (for stuff that didn't have visible scrollbars before) (opt-in) |
||||
- Updated localization files |
||||
- Top bar is more useful in mobile mode now. |
||||
- "Show new" button is way more compact in mobile mode |
||||
- Slightly adjusted placement and spacing of the topbar buttons so it's less easy to accidentally log yourself out |
||||
|
||||
### Added |
||||
- 3 column mode: only enables when there's space for it (opt-out, customizable) |
||||
- Apologetic pleroma-tan |
||||
- New button on timeline header to change some of the new and often-used settings |
||||
- Support for lists |
||||
- Added ability to edit posts and view post edit history etc. |
||||
- Added ability to add personal note to users |
||||
- Added initial support for admin announcements |
||||
- Added ui for account migration |
||||
- Added ui for backups |
||||
- Added ability to force-unfollow a user from you |
||||
- Emoji are now grouped by pack |
||||
- Ability to pin navigation items and collapse the navigation menu |
||||
- Ability to rearrange order of attachments when uploading |
||||
- Ability to scroll column (or page) to top via panel header button |
||||
- Options to show domains in mentions |
||||
- Option to show user avatars in mention links (opt-in) |
||||
- Option to disable the tooltip for mentions |
||||
- Option to completely hide muted threads |
||||
- Option to customize what clicking user avatar does in user popover |
||||
- Notifications for poll results |
||||
- "Favorites" link in navigation |
||||
- Very early and somewhat experimental system for automatic settings sync (used only for pinned navigation and apologetic pleroma-tan) |
||||
- Implemented remote interaction with statuses for anon visitors |
||||
- Ability to open videos in modal even if you disabled that feature, via an icon button |
||||
- New button on attachment that indicates that attachment has a description and shows a bar filled with description |
||||
- Attachments are truncated just like post contents |
||||
- Media modal now also displays description and counter position in gallery (i.e. 1/5) |
||||
- Enabled users to zoom and pan images in media viewer with mouse and touch |
||||
- Timelines/panels and conversations have sticky headers now (a bit glitchy on some browsers like safari) (opt-out) |
||||
|
||||
|
||||
## [2.4.2] - 2022-01-09 |
||||
### Added |
||||
- Added Apply and Reset buttons to the bottom of theme tab to minimize UI travel |
||||
- Implemented user option to always show floating New Post button (normally mobile-only) |
||||
- Display reasons for instance specific policies |
||||
- Added functionality to cancel follow request |
||||
|
||||
### Fixed |
||||
- Fixed link to external profile not working on user profiles |
||||
- Fixed mobile shoutbox display |
||||
- Fixed favicon badge not working in Chrome |
||||
- Escape html more properly in subject/display name |
||||
|
||||
|
||||
## [2.4.0] - 2021-08-08 |
||||
### Added |
||||
- Added a quick settings to timeline header for easier access |
||||
- Added option to mark posts as sensitive by default |
||||
- Added quick filters for notifications |
||||
- Implemented user option to change sidebar position to the right side |
||||
- Implemented user option to hide floating shout panel |
||||
- Implemented "edit profile" button if viewing own profile which opens profile settings |
||||
|
||||
### Fixed |
||||
- Fixed follow request count showing in the wrong location in mobile view |
||||
|
||||
|
||||
## [2.3.0] - 2021-03-01 |
||||
### Fixed |
||||
- Button to remove uploaded media in post status form is now properly placed and sized. |
||||
- Fixed shoutbox not working in mobile layout |
||||
- Fixed missing highlighted border in expanded conversations again |
||||
- Fixed some UI jumpiness when opening images particularly in chat view |
||||
- Fixed chat unread badge looking weird |
||||
- Fixed punycode names not working properly |
||||
- Fixed notifications crashing on an invalid notification |
||||
|
||||
### Changed |
||||
- Display 'people voted' instead of 'votes' for multi-choice polls |
||||
- Changed the "Timelines" link in side panel to toggle show all timeline options inside the panel |
||||
- Renamed "Timeline" to "Home Timeline" to be more clear |
||||
- Optimized chat to not get horrible performance after keeping the same chat open for a long time |
||||
- When opening emoji picker or react picker, it automatically focuses the search field |
||||
- Language picker now uses native language names |
||||
|
||||
### Added |
||||
- Added reason field for registration when approval is required |
||||
- Group staff members by role in the About page |
||||
|
||||
|
||||
## [2.2.3] - 2021-01-18 |
||||
### Added |
||||
- Added Report button to status ellipsis menu for easier reporting |
||||
|
||||
### Fixed |
||||
- Follows/Followers tabs on user profiles now display the content properly. |
||||
- Handle punycode in screen names |
||||
- Fixed local dev mode having non-functional websockets in some cases |
||||
- Show notices for websocket events (errors, abnormal closures, reconnections) |
||||
- Fix not being able to re-enable websocket until page refresh |
||||
- Fix annoying issue where timeline might have few posts when streaming is enabled |
||||
|
||||
### Changed |
||||
- Don't filter own posts when they hit your wordfilter |
||||
|
||||
|
||||
## [2.2.2] - 2020-12-22 |
||||
### Added |
||||
- Mouseover titles for emojis in reaction picker |
||||
- Support to input emoji into the search box in reaction picker |
||||
- Added some missing unicode emoji |
||||
- Added the upload limit to the Features panel in the About page |
||||
- Support for solid color wallpaper, instance doesn't have to define a wallpaper anymore |
||||
|
||||
### Fixed |
||||
- Fixed the occasional bug where screen would scroll 1px when typing into a reply form |
||||
- Fixed timeline errors locking timelines |
||||
- Fixed missing highlighted border in expanded conversations |
||||
- Fixed custom emoji not working in profile field names |
||||
- Fixed pinned statuses not appearing in user profiles |
||||
- Fixed some elements not being keyboard navigation friendly |
||||
- Fixed error handling when updating various profile images |
||||
- Fixed your latest chat messages disappearing when closing chat view and opening it again during the same session |
||||
- Fixed custom emoji not showing in poll options before voting |
||||
- Fixed link color not applied to instance name in topbar |
||||
|
||||
### Changed |
||||
- Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers |
||||
- Made reply/fav/repeat etc buttons easier to hit |
||||
- Adjusted timeline menu clickable area to match the visible button |
||||
- Moved external source link from status heading to the ellipsis menu |
||||
- Disabled horizontal textarea resize |
||||
- Wallpaper is now top-aligned, horizontally centered. |
||||
|
||||
|
||||
## [2.2.1] - 2020-11-11 |
||||
### Fixed |
||||
- Fixed regression in react popup alignment and overflowing |
||||
|
||||
|
||||
## [2.2.0] - 2020-11-06 |
||||
### Added |
||||
- New option to optimize timeline rendering to make the site more responsive (enabled by default) |
||||
- New instance option `logoLeft` to move logo to the left side in desktop nav bar |
||||
- Import/export a muted users |
||||
- Proper handling of deletes when using websocket streaming |
||||
- Added optimistic chat message sending, so you can start writing next message before the previous one has been sent |
||||
- Added a small red badge to the favicon when there's unread notifications |
||||
- Added the NSFW alert to link previews |
||||
|
||||
### Fixed |
||||
- Fixed clicking NSFW hider through status popover |
||||
- Fixed chat-view back button being hard to click |
||||
- Fixed fresh chat notifications being cleared immediately while leaving the chat view and not having time to actually see the messages |
||||
- Fixed multiple regressions in CSS styles |
||||
- Fixed multiple issues with input fields when using CJK font as default |
||||
- Fixed search field in navbar infringing into logo in some cases |
||||
- Fixed not being able to load the chat history in vertical screens when the message list doesn't take the full height of the scrollable container on the first fetch. |
||||
|
||||
### Changed |
||||
- Clicking immediately when timeline shifts is now blocked to prevent misclicks |
||||
- Icons changed from fontello (FontAwesome 4 + others) to FontAwesome 5 due to problems with fontello. |
||||
- Some icons changed for better accessibility (lock, globe) |
||||
- Logo is now clickable |
||||
- Changed default logo to SVG version |
||||
|
||||
|
||||
## [2.1.2] - 2020-09-17 |
||||
### Fixed |
||||
- Fixed chats list not updating its order when new messages come in |
||||
- Fixed chat messages sometimes getting lost when you receive a message at the same time |
||||
|
||||
|
||||
## [2.1.1] - 2020-09-08 |
||||
### Changed |
||||
- Polls will be hidden with status content if "Collapse posts with subjects" is enabled and the post is collapsed. |
||||
|
||||
### Fixed |
||||
- Network fetches don't pile up anymore but wait for previous ones to finish to reduce throttling. |
||||
- Autocomplete won't stop at the second @, so it'll still work with "@lain@l" and not start over. |
||||
- Fixed weird autocomplete behavior when you write ":custom_emoji: ?" |
||||
|
||||
|
||||
## [2.1.0] - 2020-08-28 |
||||
### Added |
||||
- Autocomplete domains from list of known instances |
||||
- 'Bot' settings option and badge |
||||
- Added profile meta data fields that can be set in profile settings |
||||
- Added option to reset avatar/banner in profile settings |
||||
- Descriptions can be set on uploaded files before posting |
||||
- Added status preview option to preview your statuses before posting |
||||
- When a post is a reply to an unavailable post, the 'Reply to'-text has a strike-through style |
||||
- Added ability to see all favoriting or repeating users when hovering the number on highlighted statuses |
||||
- Bookmarks |
||||
|
||||
### Changed |
||||
- Change heart to thumbs up in reaction picker |
||||
- Close the media modal on navigation events |
||||
- Add colons to the emoji alt text, to make them copyable |
||||
- Add better visual indication for drag-and-drop for files |
||||
- When disabling attachments, the placeholder links now show an icon and the description instead of just IMAGE or VIDEO etc |
||||
- Remove unnecessary options for 'automatic loading when loading older' and 'reply previews' |
||||
- Greentext now has separate color slot for it |
||||
- Removed the use of with_move parameters when fetching notifications |
||||
- Push notifications now are the same as normal notfication, and are localized. |
||||
- Updated Notification Settings to match new BE API |
||||
|
||||
### Fixed |
||||
- Custom Emoji will display in poll options now. |
||||
- Status ellipsis menu closes properly when selecting certain options |
||||
- Cropped images look correct in Chrome |
||||
- Newlines in the muted words settings work again |
||||
- Clicking on non-latin hashtags won't open a new window |
||||
- Uploading and drag-dropping multiple files works correctly now. |
||||
- Subject field now appears disabled when posting |
||||
- Fix status ellipsis menu being cut off in notifications column |
||||
- Fixed autocomplete sometimes not returning the right user when there's already some results |
||||
- Videos and audio and misc files show description as alt/title properly now |
||||
- Clicking on non-image/video files no longer opens an empty modal |
||||
- Audio files can now be played back in the frontend with hidden attachments |
||||
- Videos are not cropped awkwardly in the uploads section anymore |
||||
- Reply filtering options in Settings -> Filtering now work again using filtering on server |
||||
- Don't show just blank-screen when cookies are disabled |
||||
- Add status idempotency to prevent accidental double posting when posting returns an error |
||||
- Weird bug related to post being sent seemingly after pasting with keyboard (hopefully) |
||||
- Multiple issues with muted statuses/notifications |
||||
|
||||
## [2.0.5] - 2020-05-12 |
||||
### Added |
||||
- Added private notifications option for push notifications |
||||
- 'Copy link' button for statuses (in the ellipsis menu) |
||||
|
||||
### Changed |
||||
- Registration page no longer requires email if the server is configured not to require it |
||||
|
||||
### Fixed |
||||
- Status ellipsis menu closes properly when selecting certain options |
||||
|
||||
## [2.0.3] - 2020-05-02 |
||||
### Fixed |
||||
- Show more/less works correctly with auto-collapsed subjects and long posts |
||||
- RTL characters won't look messed up in notifications |
||||
|
||||
### Changed |
||||
- Emoji autocomplete will match any part of the word and not just start, for example :drool will now helpfully suggest :blobcatdrool: and :blobcatdroolreach: |
||||
|
||||
### Added |
||||
- Follow request notification support |
||||
|
||||
## [2.0.2] - 2020-04-08 |
||||
### Fixed |
||||
- Favorite/Repeat avatars not showing up on private instances/non-public posts |
||||
- Autocorrect getting triggered in the captcha field |
||||
- Overflow on long domains in follow/move notifications |
||||
|
||||
### Changed |
||||
- Polish translation updated |
||||
|
||||
## [2.0.0] - 2020-02-28 |
||||
### Added |
||||
- Tons of color slots including ones for hover/pressed/toggled buttons |
||||
- Experimental `--variable[,mod]` syntax support for color slots in themes. the `mod` makes color brighter/darker depending on background color (makes darker color brighter/darker depending on background color) |
||||
- Paper theme by Shpuld |
||||
- Icons in nav panel |
||||
- Private mode support |
||||
- Support for 'Move' type notifications |
||||
- Pleroma AMOLED dark theme |
||||
- User level domain mutes, under User Settings -> Mutes |
||||
- Emoji reactions for statuses |
||||
- MRF keyword policy disclosure |
||||
### Changed |
||||
- Updated Pleroma default themes |
||||
- theme engine update to 3 (themes v2.1 introduction) |
||||
- massive internal changes in theme engine - slowly away from "generate things separately with spaghetti code" towards "feed all data into single 'generateTheme' function and declare slot inheritance and all in a separate file" |
||||
- Breezy theme updates to make it closer to actual Breeze in some aspects |
||||
- when using `--variable` in shadows it no longer uses the actual CSS3 variable, instead it generates color from other slots |
||||
- theme doesn't get saved to local storage when opening FE anonymously |
||||
- Captcha now resets on failed registrations |
||||
- Notifications column now cleans itself up to optimize performance when tab is left open for a long time |
||||
- 403 messaging |
||||
### Fixed |
||||
- Fixed loader-spinner not disappearing when a status preview fails to load |
||||
- anon viewers won't get theme data saved to local storage, so admin changing default theme will have an effect for users coming back to instance. |
||||
- Single notifications left unread when hitting read on another device/tab |
||||
- Registration fixed |
||||
- Deactivation of remote accounts from frontend |
||||
- Fixed NSFW unhiding not working with videos when using one-click unhiding/displaying |
||||
- Improved performance of anything that uses popovers (most notably statuses) |
||||
|
||||
## [1.1.7 and earlier] - 2019-12-14 |
||||
### Added |
||||
- Ability to hide/show repeats from user |
||||
- User profile button clutter organized into a menu |
||||
- Emoji picker |
||||
- Started changelog anew |
||||
- Ability to change user's email |
||||
- About page |
||||
- Added remote user redirect |
||||
|
||||
### Changed |
||||
- changed the way fading effects for user profile/long statuses works, now uses css-mask instead of gradient background hacks which weren't exactly compatible with semi-transparent themes |
||||
|
||||
### Fixed |
||||
- improved hotkey behavior on autocomplete popup |
||||
@ -0,0 +1,49 @@ |
||||
``` |
||||
o$$$$$$oo |
||||
o$" "$oo |
||||
$ o""""$o "$o |
||||
"$ o "o "o $ |
||||
"$ $o $ $ o$ |
||||
"$ o$"$ o$ |
||||
"$ooooo$$ $ o$ |
||||
o$ """ $ " $$$ " $ |
||||
o$ $o $$" " " |
||||
$$ $ " $ $$$o"$ o o$" |
||||
$" o "" $ $" " o" $$ |
||||
$o " " $ o$" o" o$" |
||||
"$o $$ $ o" o$$" |
||||
""o$o"$" $oo" o$" |
||||
o$$ $ $$$ o$$ |
||||
o" o oo"" "" "$o |
||||
o$o" "" $ |
||||
$" " o" " " " "o |
||||
$$ " " o$ o$o " $ |
||||
o$ $ $ o$$ " " "" |
||||
o $ $" " "o o$ |
||||
$ o $o$oo$"" |
||||
$o $ o o o"$$ |
||||
$o o $ $ "$o |
||||
$o $ o $ $ "o |
||||
$ $ "o $ "o"$o |
||||
$ " o $ o $$ |
||||
$o$o$o$o$$o$$$o$$o$o$$o$$o$$$o$o$o$o$o$o$o$o$o$ooo |
||||
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$o |
||||
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ " $$$$$ |
||||
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ "$$$$ |
||||
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$ |
||||
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$ |
||||
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$ |
||||
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ o$$$$" |
||||
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ooooo$$$$ |
||||
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$" |
||||
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$""""" |
||||
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ |
||||
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ |
||||
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ |
||||
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ |
||||
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$" |
||||
"$o$o$o$o$o$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$" |
||||
"$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$" |
||||
"$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$""" |
||||
""""""""""""""""""""""""""""""""""""""""""""""""""""" |
||||
``` |
||||
@ -0,0 +1,14 @@ |
||||
Contributors of this project. |
||||
|
||||
- Constance Variable (lambadalambda@social.heldscal.la): Code |
||||
- Coco Snuss (cocosnuss@social.heldscal.la): Code |
||||
- wakarimasen (wakarimasen@shitposter.club): NSFW hiding image |
||||
- eris (eris@disqordia.space): Code |
||||
- dtluna (dtluna@social.heldscal.la): Code |
||||
- sonyam (sonyam@social.heldscal.la): Background images |
||||
- hakui (hakui@freezepeach.xyz): CSS and styling |
||||
- shpuld (shpuld@shitposter.club): CSS and styling |
||||
- Vincent Guth (https://unsplash.com/photos/XrwVIFy6rTw): Background images. |
||||
- hj (hj@shigusegubu.club): Code |
||||
- Sean King (seanking@kazv.moe): Code |
||||
- tusooa (tusooa@kazv.moe): Code |
||||
@ -0,0 +1,661 @@ |
||||
GNU AFFERO GENERAL PUBLIC LICENSE |
||||
Version 3, 19 November 2007 |
||||
|
||||
Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/> |
||||
Everyone is permitted to copy and distribute verbatim copies |
||||
of this license document, but changing it is not allowed. |
||||
|
||||
Preamble |
||||
|
||||
The GNU Affero General Public License is a free, copyleft license for |
||||
software and other kinds of works, specifically designed to ensure |
||||
cooperation with the community in the case of network server software. |
||||
|
||||
The licenses for most software and other practical works are designed |
||||
to take away your freedom to share and change the works. By contrast, |
||||
our General Public Licenses are intended to guarantee your freedom to |
||||
share and change all versions of a program--to make sure it remains free |
||||
software for all its users. |
||||
|
||||
When we speak of free software, we are referring to freedom, not |
||||
price. Our General Public Licenses are designed to make sure that you |
||||
have the freedom to distribute copies of free software (and charge for |
||||
them if you wish), that you receive source code or can get it if you |
||||
want it, that you can change the software or use pieces of it in new |
||||
free programs, and that you know you can do these things. |
||||
|
||||
Developers that use our General Public Licenses protect your rights |
||||
with two steps: (1) assert copyright on the software, and (2) offer |
||||
you this License which gives you legal permission to copy, distribute |
||||
and/or modify the software. |
||||
|
||||
A secondary benefit of defending all users' freedom is that |
||||
improvements made in alternate versions of the program, if they |
||||
receive widespread use, become available for other developers to |
||||
incorporate. Many developers of free software are heartened and |
||||
encouraged by the resulting cooperation. However, in the case of |
||||
software used on network servers, this result may fail to come about. |
||||
The GNU General Public License permits making a modified version and |
||||
letting the public access it on a server without ever releasing its |
||||
source code to the public. |
||||
|
||||
The GNU Affero General Public License is designed specifically to |
||||
ensure that, in such cases, the modified source code becomes available |
||||
to the community. It requires the operator of a network server to |
||||
provide the source code of the modified version running there to the |
||||
users of that server. Therefore, public use of a modified version, on |
||||
a publicly accessible server, gives the public access to the source |
||||
code of the modified version. |
||||
|
||||
An older license, called the Affero General Public License and |
||||
published by Affero, was designed to accomplish similar goals. This is |
||||
a different license, not a version of the Affero GPL, but Affero has |
||||
released a new version of the Affero GPL which permits relicensing under |
||||
this license. |
||||
|
||||
The precise terms and conditions for copying, distribution and |
||||
modification follow. |
||||
|
||||
TERMS AND CONDITIONS |
||||
|
||||
0. Definitions. |
||||
|
||||
"This License" refers to version 3 of the GNU Affero General Public License. |
||||
|
||||
"Copyright" also means copyright-like laws that apply to other kinds of |
||||
works, such as semiconductor masks. |
||||
|
||||
"The Program" refers to any copyrightable work licensed under this |
||||
License. Each licensee is addressed as "you". "Licensees" and |
||||
"recipients" may be individuals or organizations. |
||||
|
||||
To "modify" a work means to copy from or adapt all or part of the work |
||||
in a fashion requiring copyright permission, other than the making of an |
||||
exact copy. The resulting work is called a "modified version" of the |
||||
earlier work or a work "based on" the earlier work. |
||||
|
||||
A "covered work" means either the unmodified Program or a work based |
||||
on the Program. |
||||
|
||||
To "propagate" a work means to do anything with it that, without |
||||
permission, would make you directly or secondarily liable for |
||||
infringement under applicable copyright law, except executing it on a |
||||
computer or modifying a private copy. Propagation includes copying, |
||||
distribution (with or without modification), making available to the |
||||
public, and in some countries other activities as well. |
||||
|
||||
To "convey" a work means any kind of propagation that enables other |
||||
parties to make or receive copies. Mere interaction with a user through |
||||
a computer network, with no transfer of a copy, is not conveying. |
||||
|
||||
An interactive user interface displays "Appropriate Legal Notices" |
||||
to the extent that it includes a convenient and prominently visible |
||||
feature that (1) displays an appropriate copyright notice, and (2) |
||||
tells the user that there is no warranty for the work (except to the |
||||
extent that warranties are provided), that licensees may convey the |
||||
work under this License, and how to view a copy of this License. If |
||||
the interface presents a list of user commands or options, such as a |
||||
menu, a prominent item in the list meets this criterion. |
||||
|
||||
1. Source Code. |
||||
|
||||
The "source code" for a work means the preferred form of the work |
||||
for making modifications to it. "Object code" means any non-source |
||||
form of a work. |
||||
|
||||
A "Standard Interface" means an interface that either is an official |
||||
standard defined by a recognized standards body, or, in the case of |
||||
interfaces specified for a particular programming language, one that |
||||
is widely used among developers working in that language. |
||||
|
||||
The "System Libraries" of an executable work include anything, other |
||||
than the work as a whole, that (a) is included in the normal form of |
||||
packaging a Major Component, but which is not part of that Major |
||||
Component, and (b) serves only to enable use of the work with that |
||||
Major Component, or to implement a Standard Interface for which an |
||||
implementation is available to the public in source code form. A |
||||
"Major Component", in this context, means a major essential component |
||||
(kernel, window system, and so on) of the specific operating system |
||||
(if any) on which the executable work runs, or a compiler used to |
||||
produce the work, or an object code interpreter used to run it. |
||||
|
||||
The "Corresponding Source" for a work in object code form means all |
||||
the source code needed to generate, install, and (for an executable |
||||
work) run the object code and to modify the work, including scripts to |
||||
control those activities. However, it does not include the work's |
||||
System Libraries, or general-purpose tools or generally available free |
||||
programs which are used unmodified in performing those activities but |
||||
which are not part of the work. For example, Corresponding Source |
||||
includes interface definition files associated with source files for |
||||
the work, and the source code for shared libraries and dynamically |
||||
linked subprograms that the work is specifically designed to require, |
||||
such as by intimate data communication or control flow between those |
||||
subprograms and other parts of the work. |
||||
|
||||
The Corresponding Source need not include anything that users |
||||
can regenerate automatically from other parts of the Corresponding |
||||
Source. |
||||
|
||||
The Corresponding Source for a work in source code form is that |
||||
same work. |
||||
|
||||
2. Basic Permissions. |
||||
|
||||
All rights granted under this License are granted for the term of |
||||
copyright on the Program, and are irrevocable provided the stated |
||||
conditions are met. This License explicitly affirms your unlimited |
||||
permission to run the unmodified Program. The output from running a |
||||
covered work is covered by this License only if the output, given its |
||||
content, constitutes a covered work. This License acknowledges your |
||||
rights of fair use or other equivalent, as provided by copyright law. |
||||
|
||||
You may make, run and propagate covered works that you do not |
||||
convey, without conditions so long as your license otherwise remains |
||||
in force. You may convey covered works to others for the sole purpose |
||||
of having them make modifications exclusively for you, or provide you |
||||
with facilities for running those works, provided that you comply with |
||||
the terms of this License in conveying all material for which you do |
||||
not control copyright. Those thus making or running the covered works |
||||
for you must do so exclusively on your behalf, under your direction |
||||
and control, on terms that prohibit them from making any copies of |
||||
your copyrighted material outside their relationship with you. |
||||
|
||||
Conveying under any other circumstances is permitted solely under |
||||
the conditions stated below. Sublicensing is not allowed; section 10 |
||||
makes it unnecessary. |
||||
|
||||
3. Protecting Users' Legal Rights From Anti-Circumvention Law. |
||||
|
||||
No covered work shall be deemed part of an effective technological |
||||
measure under any applicable law fulfilling obligations under article |
||||
11 of the WIPO copyright treaty adopted on 20 December 1996, or |
||||
similar laws prohibiting or restricting circumvention of such |
||||
measures. |
||||
|
||||
When you convey a covered work, you waive any legal power to forbid |
||||
circumvention of technological measures to the extent such circumvention |
||||
is effected by exercising rights under this License with respect to |
||||
the covered work, and you disclaim any intention to limit operation or |
||||
modification of the work as a means of enforcing, against the work's |
||||
users, your or third parties' legal rights to forbid circumvention of |
||||
technological measures. |
||||
|
||||
4. Conveying Verbatim Copies. |
||||
|
||||
You may convey verbatim copies of the Program's source code as you |
||||
receive it, in any medium, provided that you conspicuously and |
||||
appropriately publish on each copy an appropriate copyright notice; |
||||
keep intact all notices stating that this License and any |
||||
non-permissive terms added in accord with section 7 apply to the code; |
||||
keep intact all notices of the absence of any warranty; and give all |
||||
recipients a copy of this License along with the Program. |
||||
|
||||
You may charge any price or no price for each copy that you convey, |
||||
and you may offer support or warranty protection for a fee. |
||||
|
||||
5. Conveying Modified Source Versions. |
||||
|
||||
You may convey a work based on the Program, or the modifications to |
||||
produce it from the Program, in the form of source code under the |
||||
terms of section 4, provided that you also meet all of these conditions: |
||||
|
||||
a) The work must carry prominent notices stating that you modified |
||||
it, and giving a relevant date. |
||||
|
||||
b) The work must carry prominent notices stating that it is |
||||
released under this License and any conditions added under section |
||||
7. This requirement modifies the requirement in section 4 to |
||||
"keep intact all notices". |
||||
|
||||
c) You must license the entire work, as a whole, under this |
||||
License to anyone who comes into possession of a copy. This |
||||
License will therefore apply, along with any applicable section 7 |
||||
additional terms, to the whole of the work, and all its parts, |
||||
regardless of how they are packaged. This License gives no |
||||
permission to license the work in any other way, but it does not |
||||
invalidate such permission if you have separately received it. |
||||
|
||||
d) If the work has interactive user interfaces, each must display |
||||
Appropriate Legal Notices; however, if the Program has interactive |
||||
interfaces that do not display Appropriate Legal Notices, your |
||||
work need not make them do so. |
||||
|
||||
A compilation of a covered work with other separate and independent |
||||
works, which are not by their nature extensions of the covered work, |
||||
and which are not combined with it such as to form a larger program, |
||||
in or on a volume of a storage or distribution medium, is called an |
||||
"aggregate" if the compilation and its resulting copyright are not |
||||
used to limit the access or legal rights of the compilation's users |
||||
beyond what the individual works permit. Inclusion of a covered work |
||||
in an aggregate does not cause this License to apply to the other |
||||
parts of the aggregate. |
||||
|
||||
6. Conveying Non-Source Forms. |
||||
|
||||
You may convey a covered work in object code form under the terms |
||||
of sections 4 and 5, provided that you also convey the |
||||
machine-readable Corresponding Source under the terms of this License, |
||||
in one of these ways: |
||||
|
||||
a) Convey the object code in, or embodied in, a physical product |
||||
(including a physical distribution medium), accompanied by the |
||||
Corresponding Source fixed on a durable physical medium |
||||
customarily used for software interchange. |
||||
|
||||
b) Convey the object code in, or embodied in, a physical product |
||||
(including a physical distribution medium), accompanied by a |
||||
written offer, valid for at least three years and valid for as |
||||
long as you offer spare parts or customer support for that product |
||||
model, to give anyone who possesses the object code either (1) a |
||||
copy of the Corresponding Source for all the software in the |
||||
product that is covered by this License, on a durable physical |
||||
medium customarily used for software interchange, for a price no |
||||
more than your reasonable cost of physically performing this |
||||
conveying of source, or (2) access to copy the |
||||
Corresponding Source from a network server at no charge. |
||||
|
||||
c) Convey individual copies of the object code with a copy of the |
||||
written offer to provide the Corresponding Source. This |
||||
alternative is allowed only occasionally and noncommercially, and |
||||
only if you received the object code with such an offer, in accord |
||||
with subsection 6b. |
||||
|
||||
d) Convey the object code by offering access from a designated |
||||
place (gratis or for a charge), and offer equivalent access to the |
||||
Corresponding Source in the same way through the same place at no |
||||
further charge. You need not require recipients to copy the |
||||
Corresponding Source along with the object code. If the place to |
||||
copy the object code is a network server, the Corresponding Source |
||||
may be on a different server (operated by you or a third party) |
||||
that supports equivalent copying facilities, provided you maintain |
||||
clear directions next to the object code saying where to find the |
||||
Corresponding Source. Regardless of what server hosts the |
||||
Corresponding Source, you remain obligated to ensure that it is |
||||
available for as long as needed to satisfy these requirements. |
||||
|
||||
e) Convey the object code using peer-to-peer transmission, provided |
||||
you inform other peers where the object code and Corresponding |
||||
Source of the work are being offered to the general public at no |
||||
charge under subsection 6d. |
||||
|
||||
A separable portion of the object code, whose source code is excluded |
||||
from the Corresponding Source as a System Library, need not be |
||||
included in conveying the object code work. |
||||
|
||||
A "User Product" is either (1) a "consumer product", which means any |
||||
tangible personal property which is normally used for personal, family, |
||||
or household purposes, or (2) anything designed or sold for incorporation |
||||
into a dwelling. In determining whether a product is a consumer product, |
||||
doubtful cases shall be resolved in favor of coverage. For a particular |
||||
product received by a particular user, "normally used" refers to a |
||||
typical or common use of that class of product, regardless of the status |
||||
of the particular user or of the way in which the particular user |
||||
actually uses, or expects or is expected to use, the product. A product |
||||
is a consumer product regardless of whether the product has substantial |
||||
commercial, industrial or non-consumer uses, unless such uses represent |
||||
the only significant mode of use of the product. |
||||
|
||||
"Installation Information" for a User Product means any methods, |
||||
procedures, authorization keys, or other information required to install |
||||
and execute modified versions of a covered work in that User Product from |
||||
a modified version of its Corresponding Source. The information must |
||||
suffice to ensure that the continued functioning of the modified object |
||||
code is in no case prevented or interfered with solely because |
||||
modification has been made. |
||||
|
||||
If you convey an object code work under this section in, or with, or |
||||
specifically for use in, a User Product, and the conveying occurs as |
||||
part of a transaction in which the right of possession and use of the |
||||
User Product is transferred to the recipient in perpetuity or for a |
||||
fixed term (regardless of how the transaction is characterized), the |
||||
Corresponding Source conveyed under this section must be accompanied |
||||
by the Installation Information. But this requirement does not apply |
||||
if neither you nor any third party retains the ability to install |
||||
modified object code on the User Product (for example, the work has |
||||
been installed in ROM). |
||||
|
||||
The requirement to provide Installation Information does not include a |
||||
requirement to continue to provide support service, warranty, or updates |
||||
for a work that has been modified or installed by the recipient, or for |
||||
the User Product in which it has been modified or installed. Access to a |
||||
network may be denied when the modification itself materially and |
||||
adversely affects the operation of the network or violates the rules and |
||||
protocols for communication across the network. |
||||
|
||||
Corresponding Source conveyed, and Installation Information provided, |
||||
in accord with this section must be in a format that is publicly |
||||
documented (and with an implementation available to the public in |
||||
source code form), and must require no special password or key for |
||||
unpacking, reading or copying. |
||||
|
||||
7. Additional Terms. |
||||
|
||||
"Additional permissions" are terms that supplement the terms of this |
||||
License by making exceptions from one or more of its conditions. |
||||
Additional permissions that are applicable to the entire Program shall |
||||
be treated as though they were included in this License, to the extent |
||||
that they are valid under applicable law. If additional permissions |
||||
apply only to part of the Program, that part may be used separately |
||||
under those permissions, but the entire Program remains governed by |
||||
this License without regard to the additional permissions. |
||||
|
||||
When you convey a copy of a covered work, you may at your option |
||||
remove any additional permissions from that copy, or from any part of |
||||
it. (Additional permissions may be written to require their own |
||||
removal in certain cases when you modify the work.) You may place |
||||
additional permissions on material, added by you to a covered work, |
||||
for which you have or can give appropriate copyright permission. |
||||
|
||||
Notwithstanding any other provision of this License, for material you |
||||
add to a covered work, you may (if authorized by the copyright holders of |
||||
that material) supplement the terms of this License with terms: |
||||
|
||||
a) Disclaiming warranty or limiting liability differently from the |
||||
terms of sections 15 and 16 of this License; or |
||||
|
||||
b) Requiring preservation of specified reasonable legal notices or |
||||
author attributions in that material or in the Appropriate Legal |
||||
Notices displayed by works containing it; or |
||||
|
||||
c) Prohibiting misrepresentation of the origin of that material, or |
||||
requiring that modified versions of such material be marked in |
||||
reasonable ways as different from the original version; or |
||||
|
||||
d) Limiting the use for publicity purposes of names of licensors or |
||||
authors of the material; or |
||||
|
||||
e) Declining to grant rights under trademark law for use of some |
||||
trade names, trademarks, or service marks; or |
||||
|
||||
f) Requiring indemnification of licensors and authors of that |
||||
material by anyone who conveys the material (or modified versions of |
||||
it) with contractual assumptions of liability to the recipient, for |
||||
any liability that these contractual assumptions directly impose on |
||||
those licensors and authors. |
||||
|
||||
All other non-permissive additional terms are considered "further |
||||
restrictions" within the meaning of section 10. If the Program as you |
||||
received it, or any part of it, contains a notice stating that it is |
||||
governed by this License along with a term that is a further |
||||
restriction, you may remove that term. If a license document contains |
||||
a further restriction but permits relicensing or conveying under this |
||||
License, you may add to a covered work material governed by the terms |
||||
of that license document, provided that the further restriction does |
||||
not survive such relicensing or conveying. |
||||
|
||||
If you add terms to a covered work in accord with this section, you |
||||
must place, in the relevant source files, a statement of the |
||||
additional terms that apply to those files, or a notice indicating |
||||
where to find the applicable terms. |
||||
|
||||
Additional terms, permissive or non-permissive, may be stated in the |
||||
form of a separately written license, or stated as exceptions; |
||||
the above requirements apply either way. |
||||
|
||||
8. Termination. |
||||
|
||||
You may not propagate or modify a covered work except as expressly |
||||
provided under this License. Any attempt otherwise to propagate or |
||||
modify it is void, and will automatically terminate your rights under |
||||
this License (including any patent licenses granted under the third |
||||
paragraph of section 11). |
||||
|
||||
However, if you cease all violation of this License, then your |
||||
license from a particular copyright holder is reinstated (a) |
||||
provisionally, unless and until the copyright holder explicitly and |
||||
finally terminates your license, and (b) permanently, if the copyright |
||||
holder fails to notify you of the violation by some reasonable means |
||||
prior to 60 days after the cessation. |
||||
|
||||
Moreover, your license from a particular copyright holder is |
||||
reinstated permanently if the copyright holder notifies you of the |
||||
violation by some reasonable means, this is the first time you have |
||||
received notice of violation of this License (for any work) from that |
||||
copyright holder, and you cure the violation prior to 30 days after |
||||
your receipt of the notice. |
||||
|
||||
Termination of your rights under this section does not terminate the |
||||
licenses of parties who have received copies or rights from you under |
||||
this License. If your rights have been terminated and not permanently |
||||
reinstated, you do not qualify to receive new licenses for the same |
||||
material under section 10. |
||||
|
||||
9. Acceptance Not Required for Having Copies. |
||||
|
||||
You are not required to accept this License in order to receive or |
||||
run a copy of the Program. Ancillary propagation of a covered work |
||||
occurring solely as a consequence of using peer-to-peer transmission |
||||
to receive a copy likewise does not require acceptance. However, |
||||
nothing other than this License grants you permission to propagate or |
||||
modify any covered work. These actions infringe copyright if you do |
||||
not accept this License. Therefore, by modifying or propagating a |
||||
covered work, you indicate your acceptance of this License to do so. |
||||
|
||||
10. Automatic Licensing of Downstream Recipients. |
||||
|
||||
Each time you convey a covered work, the recipient automatically |
||||
receives a license from the original licensors, to run, modify and |
||||
propagate that work, subject to this License. You are not responsible |
||||
for enforcing compliance by third parties with this License. |
||||
|
||||
An "entity transaction" is a transaction transferring control of an |
||||
organization, or substantially all assets of one, or subdividing an |
||||
organization, or merging organizations. If propagation of a covered |
||||
work results from an entity transaction, each party to that |
||||
transaction who receives a copy of the work also receives whatever |
||||
licenses to the work the party's predecessor in interest had or could |
||||
give under the previous paragraph, plus a right to possession of the |
||||
Corresponding Source of the work from the predecessor in interest, if |
||||
the predecessor has it or can get it with reasonable efforts. |
||||
|
||||
You may not impose any further restrictions on the exercise of the |
||||
rights granted or affirmed under this License. For example, you may |
||||
not impose a license fee, royalty, or other charge for exercise of |
||||
rights granted under this License, and you may not initiate litigation |
||||
(including a cross-claim or counterclaim in a lawsuit) alleging that |
||||
any patent claim is infringed by making, using, selling, offering for |
||||
sale, or importing the Program or any portion of it. |
||||
|
||||
11. Patents. |
||||
|
||||
A "contributor" is a copyright holder who authorizes use under this |
||||
License of the Program or a work on which the Program is based. The |
||||
work thus licensed is called the contributor's "contributor version". |
||||
|
||||
A contributor's "essential patent claims" are all patent claims |
||||
owned or controlled by the contributor, whether already acquired or |
||||
hereafter acquired, that would be infringed by some manner, permitted |
||||
by this License, of making, using, or selling its contributor version, |
||||
but do not include claims that would be infringed only as a |
||||
consequence of further modification of the contributor version. For |
||||
purposes of this definition, "control" includes the right to grant |
||||
patent sublicenses in a manner consistent with the requirements of |
||||
this License. |
||||
|
||||
Each contributor grants you a non-exclusive, worldwide, royalty-free |
||||
patent license under the contributor's essential patent claims, to |
||||
make, use, sell, offer for sale, import and otherwise run, modify and |
||||
propagate the contents of its contributor version. |
||||
|
||||
In the following three paragraphs, a "patent license" is any express |
||||
agreement or commitment, however denominated, not to enforce a patent |
||||
(such as an express permission to practice a patent or covenant not to |
||||
sue for patent infringement). To "grant" such a patent license to a |
||||
party means to make such an agreement or commitment not to enforce a |
||||
patent against the party. |
||||
|
||||
If you convey a covered work, knowingly relying on a patent license, |
||||
and the Corresponding Source of the work is not available for anyone |
||||
to copy, free of charge and under the terms of this License, through a |
||||
publicly available network server or other readily accessible means, |
||||
then you must either (1) cause the Corresponding Source to be so |
||||
available, or (2) arrange to deprive yourself of the benefit of the |
||||
patent license for this particular work, or (3) arrange, in a manner |
||||
consistent with the requirements of this License, to extend the patent |
||||
license to downstream recipients. "Knowingly relying" means you have |
||||
actual knowledge that, but for the patent license, your conveying the |
||||
covered work in a country, or your recipient's use of the covered work |
||||
in a country, would infringe one or more identifiable patents in that |
||||
country that you have reason to believe are valid. |
||||
|
||||
If, pursuant to or in connection with a single transaction or |
||||
arrangement, you convey, or propagate by procuring conveyance of, a |
||||
covered work, and grant a patent license to some of the parties |
||||
receiving the covered work authorizing them to use, propagate, modify |
||||
or convey a specific copy of the covered work, then the patent license |
||||
you grant is automatically extended to all recipients of the covered |
||||
work and works based on it. |
||||
|
||||
A patent license is "discriminatory" if it does not include within |
||||
the scope of its coverage, prohibits the exercise of, or is |
||||
conditioned on the non-exercise of one or more of the rights that are |
||||
specifically granted under this License. You may not convey a covered |
||||
work if you are a party to an arrangement with a third party that is |
||||
in the business of distributing software, under which you make payment |
||||
to the third party based on the extent of your activity of conveying |
||||
the work, and under which the third party grants, to any of the |
||||
parties who would receive the covered work from you, a discriminatory |
||||
patent license (a) in connection with copies of the covered work |
||||
conveyed by you (or copies made from those copies), or (b) primarily |
||||
for and in connection with specific products or compilations that |
||||
contain the covered work, unless you entered into that arrangement, |
||||
or that patent license was granted, prior to 28 March 2007. |
||||
|
||||
Nothing in this License shall be construed as excluding or limiting |
||||
any implied license or other defenses to infringement that may |
||||
otherwise be available to you under applicable patent law. |
||||
|
||||
12. No Surrender of Others' Freedom. |
||||
|
||||
If conditions are imposed on you (whether by court order, agreement or |
||||
otherwise) that contradict the conditions of this License, they do not |
||||
excuse you from the conditions of this License. If you cannot convey a |
||||
covered work so as to satisfy simultaneously your obligations under this |
||||
License and any other pertinent obligations, then as a consequence you may |
||||
not convey it at all. For example, if you agree to terms that obligate you |
||||
to collect a royalty for further conveying from those to whom you convey |
||||
the Program, the only way you could satisfy both those terms and this |
||||
License would be to refrain entirely from conveying the Program. |
||||
|
||||
13. Remote Network Interaction; Use with the GNU General Public License. |
||||
|
||||
Notwithstanding any other provision of this License, if you modify the |
||||
Program, your modified version must prominently offer all users |
||||
interacting with it remotely through a computer network (if your version |
||||
supports such interaction) an opportunity to receive the Corresponding |
||||
Source of your version by providing access to the Corresponding Source |
||||
from a network server at no charge, through some standard or customary |
||||
means of facilitating copying of software. This Corresponding Source |
||||
shall include the Corresponding Source for any work covered by version 3 |
||||
of the GNU General Public License that is incorporated pursuant to the |
||||
following paragraph. |
||||
|
||||
Notwithstanding any other provision of this License, you have |
||||
permission to link or combine any covered work with a work licensed |
||||
under version 3 of the GNU General Public License into a single |
||||
combined work, and to convey the resulting work. The terms of this |
||||
License will continue to apply to the part which is the covered work, |
||||
but the work with which it is combined will remain governed by version |
||||
3 of the GNU General Public License. |
||||
|
||||
14. Revised Versions of this License. |
||||
|
||||
The Free Software Foundation may publish revised and/or new versions of |
||||
the GNU Affero General Public License from time to time. Such new versions |
||||
will be similar in spirit to the present version, but may differ in detail to |
||||
address new problems or concerns. |
||||
|
||||
Each version is given a distinguishing version number. If the |
||||
Program specifies that a certain numbered version of the GNU Affero General |
||||
Public License "or any later version" applies to it, you have the |
||||
option of following the terms and conditions either of that numbered |
||||
version or of any later version published by the Free Software |
||||
Foundation. If the Program does not specify a version number of the |
||||
GNU Affero General Public License, you may choose any version ever published |
||||
by the Free Software Foundation. |
||||
|
||||
If the Program specifies that a proxy can decide which future |
||||
versions of the GNU Affero General Public License can be used, that proxy's |
||||
public statement of acceptance of a version permanently authorizes you |
||||
to choose that version for the Program. |
||||
|
||||
Later license versions may give you additional or different |
||||
permissions. However, no additional obligations are imposed on any |
||||
author or copyright holder as a result of your choosing to follow a |
||||
later version. |
||||
|
||||
15. Disclaimer of Warranty. |
||||
|
||||
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY |
||||
APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT |
||||
HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY |
||||
OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, |
||||
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR |
||||
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM |
||||
IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF |
||||
ALL NECESSARY SERVICING, REPAIR OR CORRECTION. |
||||
|
||||
16. Limitation of Liability. |
||||
|
||||
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING |
||||
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS |
||||
THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY |
||||
GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE |
||||
USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF |
||||
DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD |
||||
PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), |
||||
EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF |
||||
SUCH DAMAGES. |
||||
|
||||
17. Interpretation of Sections 15 and 16. |
||||
|
||||
If the disclaimer of warranty and limitation of liability provided |
||||
above cannot be given local legal effect according to their terms, |
||||
reviewing courts shall apply local law that most closely approximates |
||||
an absolute waiver of all civil liability in connection with the |
||||
Program, unless a warranty or assumption of liability accompanies a |
||||
copy of the Program in return for a fee. |
||||
|
||||
END OF TERMS AND CONDITIONS |
||||
|
||||
How to Apply These Terms to Your New Programs |
||||
|
||||
If you develop a new program, and you want it to be of the greatest |
||||
possible use to the public, the best way to achieve this is to make it |
||||
free software which everyone can redistribute and change under these terms. |
||||
|
||||
To do so, attach the following notices to the program. It is safest |
||||
to attach them to the start of each source file to most effectively |
||||
state the exclusion of warranty; and each file should have at least |
||||
the "copyright" line and a pointer to where the full notice is found. |
||||
|
||||
pleroma-fe |
||||
Copyright (C) 2016 lambadalambda |
||||
|
||||
This program is free software: you can redistribute it and/or modify |
||||
it under the terms of the GNU Affero General Public License as published |
||||
by the Free Software Foundation, either version 3 of the License, or |
||||
(at your option) any later version. |
||||
|
||||
This program is distributed in the hope that it will be useful, |
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
GNU Affero General Public License for more details. |
||||
|
||||
You should have received a copy of the GNU Affero General Public License |
||||
along with this program. If not, see <http://www.gnu.org/licenses/>. |
||||
|
||||
Also add information on how to contact you by electronic and paper mail. |
||||
|
||||
If your software can interact with users remotely through a computer |
||||
network, you should also make sure that it provides a way for users to |
||||
get its source. For example, if your program is a web application, its |
||||
interface could display a "Source" link that leads users to an archive |
||||
of the code. There are many ways you could offer source, and different |
||||
solutions will be better for different programs; see section 13 for the |
||||
specific requirements. |
||||
|
||||
You should also get your employer (if you work as a programmer) or school, |
||||
if any, to sign a "copyright disclaimer" for the program, if necessary. |
||||
For more information on this, and how to apply and follow the GNU AGPL, see |
||||
<http://www.gnu.org/licenses/>. |
||||
@ -0,0 +1,44 @@ |
||||
# Pleroma-FE |
||||
|
||||
> Highly-customizable frontend designed for Pleroma. |
||||
|
||||
 |
||||
|
||||
# For Translators |
||||
|
||||
To translate Pleroma-FE, use our weblate server: https://translate.pleroma.social/. If you need to add your language it should be added as a json file in [src/i18n/](https://git.pleroma.social/pleroma/pleroma-fe/blob/develop/src/i18n/) folder and added in a list within [src/i18n/languages.js](https://git.pleroma.social/pleroma/pleroma-fe/blob/develop/src/i18n/languages.js). |
||||
|
||||
Pleroma-FE will set your language by your browser locale, but you can change language in settings. |
||||
|
||||
# For instance admins |
||||
You don't need to build Pleroma-FE yourself. Those using the Pleroma backend will be able to use it out of the box. Information of customizing PleromaFE settings/defaults is in our [guide](https://docs-develop.pleroma.social/frontend/CONFIGURATION/) and in case you want to build your own custom version there's [another](https://docs-develop.pleroma.social/frontend/HACKING/) |
||||
|
||||
# Build Setup |
||||
|
||||
``` bash |
||||
# install dependencies |
||||
npm install -g yarn |
||||
yarn |
||||
|
||||
# serve with hot reload at localhost:8080 |
||||
yarn dev |
||||
|
||||
# build for production with minification |
||||
yarn build |
||||
|
||||
# run unit tests |
||||
yarn unit |
||||
``` |
||||
|
||||
# For Contributors: |
||||
|
||||
You can create file `/config/local.json` (see [example](https://git.pleroma.social/pleroma/pleroma-fe/blob/develop/config/local.example.json)) to enable some convenience dev options: |
||||
|
||||
* `target`: makes local dev server redirect to some existing instance's BE instead of local BE, useful for testing things in near-production environment and searching for real-life use-cases. |
||||
* `staticConfigPreference`: makes FE's `/static/config.json` take preference of BE-served `/api/statusnet/config.json`. Only works in dev mode. |
||||
|
||||
FE Build process also leaves current commit hash in global variable `___pleromafe_commit_hash` so that you can easily see which pleroma-fe commit instance is running, also helps pinpointing which commit was used when FE was bundled into BE. |
||||
|
||||
# Configuration |
||||
|
||||
Set configuration settings in AdminFE, additionally you can edit config.json. For more details see [documentation](https://docs-develop.pleroma.social/frontend/CONFIGURATION/). |
||||
@ -0,0 +1,43 @@ |
||||
// https://github.com/shelljs/shelljs
|
||||
require('./check-versions')() |
||||
require('shelljs/global') |
||||
env.NODE_ENV = 'production' |
||||
|
||||
var path = require('path') |
||||
var config = require('../config') |
||||
var ora = require('ora') |
||||
var webpack = require('webpack') |
||||
var webpackConfig = require('./webpack.prod.conf') |
||||
|
||||
console.log( |
||||
' Tip:\n' + |
||||
' Built files are meant to be served over an HTTP server.\n' + |
||||
' Opening index.html over file:// won\'t work.\n' |
||||
) |
||||
|
||||
var spinner = ora('building for production...') |
||||
spinner.start() |
||||
|
||||
var updateEmoji = require('./update-emoji').updateEmoji |
||||
updateEmoji() |
||||
|
||||
var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) |
||||
rm('-rf', assetsPath) |
||||
mkdir('-p', assetsPath) |
||||
cp('-R', 'static/*', assetsPath) |
||||
|
||||
webpack(webpackConfig, function (err, stats) { |
||||
spinner.stop() |
||||
if (err) throw err |
||||
process.stdout.write(stats.toString({ |
||||
colors: true, |
||||
modules: false, |
||||
children: false, |
||||
chunks: false, |
||||
chunkModules: false |
||||
}) + '\n') |
||||
if (stats.hasErrors()) { |
||||
console.error('See above for errors.') |
||||
process.exit(1) |
||||
} |
||||
}) |
||||
@ -0,0 +1,45 @@ |
||||
var semver = require('semver') |
||||
var chalk = require('chalk') |
||||
var packageConfig = require('../package.json') |
||||
var exec = function (cmd) { |
||||
return require('child_process') |
||||
.execSync(cmd).toString().trim() |
||||
} |
||||
|
||||
var versionRequirements = [ |
||||
{ |
||||
name: 'node', |
||||
currentVersion: semver.clean(process.version), |
||||
versionRequirement: packageConfig.engines.node |
||||
}, |
||||
{ |
||||
name: 'npm', |
||||
currentVersion: exec('npm --version'), |
||||
versionRequirement: packageConfig.engines.npm |
||||
} |
||||
] |
||||
|
||||
module.exports = function () { |
||||
var warnings = [] |
||||
for (var i = 0; i < versionRequirements.length; i++) { |
||||
var mod = versionRequirements[i] |
||||
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { |
||||
warnings.push(mod.name + ': ' + |
||||
chalk.red(mod.currentVersion) + ' should be ' + |
||||
chalk.green(mod.versionRequirement) |
||||
) |
||||
} |
||||
} |
||||
|
||||
if (warnings.length) { |
||||
console.log('') |
||||
console.log(chalk.yellow('To use this template, you must update following to modules:')) |
||||
console.log() |
||||
for (var i = 0; i < warnings.length; i++) { |
||||
var warning = warnings[i] |
||||
console.log(' ' + warning) |
||||
} |
||||
console.log() |
||||
process.exit(1) |
||||
} |
||||
} |
||||
@ -0,0 +1,9 @@ |
||||
/* eslint-disable */ |
||||
require('eventsource-polyfill') |
||||
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') |
||||
|
||||
hotClient.subscribe(function (event) { |
||||
if (event.action === 'reload') { |
||||
window.location.reload() |
||||
} |
||||
}) |
||||
@ -0,0 +1,81 @@ |
||||
require('./check-versions')() |
||||
var config = require('../config') |
||||
if (!process.env.NODE_ENV) process.env.NODE_ENV = config.dev.env |
||||
var path = require('path') |
||||
var express = require('express') |
||||
var webpack = require('webpack') |
||||
var opn = require('opn') |
||||
var proxyMiddleware = require('http-proxy-middleware') |
||||
var webpackConfig = process.env.NODE_ENV === 'testing' |
||||
? require('./webpack.prod.conf') |
||||
: require('./webpack.dev.conf') |
||||
|
||||
var updateEmoji = require('./update-emoji').updateEmoji |
||||
updateEmoji() |
||||
|
||||
// default port where dev server listens for incoming traffic
|
||||
var port = process.env.PORT || config.dev.port |
||||
// Define HTTP proxies to your custom API backend
|
||||
// https://github.com/chimurai/http-proxy-middleware
|
||||
var proxyTable = config.dev.proxyTable |
||||
|
||||
var app = express() |
||||
var compiler = webpack(webpackConfig) |
||||
|
||||
var devMiddleware = require('webpack-dev-middleware')(compiler, { |
||||
publicPath: webpackConfig.output.publicPath, |
||||
writeToDisk: true, |
||||
stats: { |
||||
colors: true, |
||||
chunks: false |
||||
} |
||||
}) |
||||
|
||||
var hotMiddleware = require('webpack-hot-middleware')(compiler) |
||||
|
||||
// FIXME: The statement below gives error about hooks being required in webpack 5.
|
||||
// force page reload when html-webpack-plugin template changes
|
||||
// compiler.plugin('compilation', function (compilation) {
|
||||
// compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
|
||||
// // FIXME: This supposed to reload whole page when index.html is changed,
|
||||
// // however now it reloads entire page on every breath, i suppose the order
|
||||
// // of plugins changed or something. It's a minor thing and douesn't hurt
|
||||
// // disabling it, constant reloads hurt much more
|
||||
|
||||
// // hotMiddleware.publish({ action: 'reload' })
|
||||
// // cb()
|
||||
// })
|
||||
// })
|
||||
|
||||
// proxy api requests
|
||||
Object.keys(proxyTable).forEach(function (context) { |
||||
var options = proxyTable[context] |
||||
if (typeof options === 'string') { |
||||
options = { target: options } |
||||
} |
||||
app.use(proxyMiddleware.createProxyMiddleware(context, options)) |
||||
}) |
||||
|
||||
// handle fallback for HTML5 history API
|
||||
app.use(require('connect-history-api-fallback')()) |
||||
|
||||
// serve webpack bundle output
|
||||
app.use(devMiddleware) |
||||
|
||||
// enable hot-reload and state-preserving
|
||||
// compilation error display
|
||||
app.use(hotMiddleware) |
||||
|
||||
// serve pure static assets
|
||||
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) |
||||
app.use(staticPath, express.static('./static')) |
||||
|
||||
module.exports = app.listen(port, function (err) { |
||||
if (err) { |
||||
console.log(err) |
||||
return |
||||
} |
||||
var uri = 'http://localhost:' + port |
||||
console.log('Listening at ' + uri + '\n') |
||||
// opn(uri)
|
||||
}) |
||||
@ -0,0 +1,27 @@ |
||||
|
||||
module.exports = { |
||||
updateEmoji () { |
||||
const emojis = require('@kazvmoe-infra/unicode-emoji-json/data-by-group') |
||||
const fs = require('fs') |
||||
|
||||
Object.keys(emojis) |
||||
.map(k => { |
||||
emojis[k].map(e => { |
||||
delete e.unicode_version |
||||
delete e.emoji_version |
||||
delete e.skin_tone_support_unicode_version |
||||
}) |
||||
}) |
||||
|
||||
const res = {} |
||||
Object.keys(emojis) |
||||
.map(k => { |
||||
const groupId = k.replace('&', 'and').replace(/ /g, '-').toLowerCase() |
||||
res[groupId] = emojis[k] |
||||
}) |
||||
|
||||
console.info('Updating emojis...') |
||||
fs.writeFileSync('static/emoji.json', JSON.stringify(res)) |
||||
console.info('Done.') |
||||
} |
||||
} |
||||
@ -0,0 +1,63 @@ |
||||
var path = require('path') |
||||
var config = require('../config') |
||||
var sass = require('sass') |
||||
var MiniCssExtractPlugin = require('mini-css-extract-plugin') |
||||
|
||||
exports.assetsPath = function (_path) { |
||||
var assetsSubDirectory = process.env.NODE_ENV === 'production' |
||||
? config.build.assetsSubDirectory |
||||
: config.dev.assetsSubDirectory |
||||
return path.posix.join(assetsSubDirectory, _path) |
||||
} |
||||
|
||||
exports.cssLoaders = function (options) { |
||||
options = options || {} |
||||
|
||||
function generateLoaders (loaders) { |
||||
// Extract CSS when that option is specified
|
||||
// (which is the case during production build)
|
||||
if (options.extract) { |
||||
return [MiniCssExtractPlugin.loader].concat(loaders) |
||||
} else { |
||||
return ['vue-style-loader'].concat(loaders) |
||||
} |
||||
} |
||||
|
||||
// http://vuejs.github.io/vue-loader/configurations/extract-css.html
|
||||
return [ |
||||
{ |
||||
test: /\.(post)?css$/, |
||||
use: generateLoaders(['css-loader', 'postcss-loader']), |
||||
}, |
||||
{ |
||||
test: /\.less$/, |
||||
use: generateLoaders(['css-loader', 'postcss-loader', 'less-loader']), |
||||
}, |
||||
{ |
||||
test: /\.sass$/, |
||||
use: generateLoaders([ |
||||
'css-loader', |
||||
'postcss-loader', |
||||
{ |
||||
loader: 'sass-loader', |
||||
options: { |
||||
indentedSyntax: true |
||||
} |
||||
} |
||||
]) |
||||
}, |
||||
{ |
||||
test: /\.scss$/, |
||||
use: generateLoaders(['css-loader', 'postcss-loader', 'sass-loader']) |
||||
}, |
||||
{ |
||||
test: /\.styl(us)?$/, |
||||
use: generateLoaders(['css-loader', 'postcss-loader', 'stylus-loader']), |
||||
}, |
||||
] |
||||
} |
||||
|
||||
// Generate loaders for standalone style files (outside of .vue)
|
||||
exports.styleLoaders = function (options) { |
||||
return exports.cssLoaders(options) |
||||
} |
||||
@ -0,0 +1,129 @@ |
||||
var path = require('path') |
||||
var config = require('../config') |
||||
var utils = require('./utils') |
||||
var projectRoot = path.resolve(__dirname, '../') |
||||
var ServiceWorkerWebpackPlugin = require('serviceworker-webpack5-plugin') |
||||
var CopyPlugin = require('copy-webpack-plugin'); |
||||
var { VueLoaderPlugin } = require('vue-loader') |
||||
var ESLintPlugin = require('eslint-webpack-plugin'); |
||||
var StylelintPlugin = require('stylelint-webpack-plugin'); |
||||
|
||||
var env = process.env.NODE_ENV |
||||
// check env & config/index.js to decide weither to enable CSS Sourcemaps for the
|
||||
// various preprocessor loaders added to vue-loader at the end of this file
|
||||
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap) |
||||
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap) |
||||
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd |
||||
|
||||
var now = Date.now() |
||||
|
||||
module.exports = { |
||||
entry: { |
||||
app: './src/main.js' |
||||
}, |
||||
output: { |
||||
path: config.build.assetsRoot, |
||||
publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, |
||||
filename: '[name].js', |
||||
chunkFilename: '[name].js' |
||||
}, |
||||
optimization: { |
||||
splitChunks: { |
||||
chunks: 'all' |
||||
} |
||||
}, |
||||
resolve: { |
||||
extensions: ['.mjs', '.js', '.jsx', '.vue'], |
||||
modules: [ |
||||
path.join(__dirname, '../node_modules') |
||||
], |
||||
alias: { |
||||
'static': path.resolve(__dirname, '../static'), |
||||
'src': path.resolve(__dirname, '../src'), |
||||
'assets': path.resolve(__dirname, '../src/assets'), |
||||
'components': path.resolve(__dirname, '../src/components'), |
||||
'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js' |
||||
}, |
||||
fallback: { |
||||
'querystring': require.resolve('querystring-es3'), |
||||
'url': require.resolve('url/') |
||||
} |
||||
}, |
||||
module: { |
||||
noParse: /node_modules\/localforage\/dist\/localforage.js/, |
||||
rules: [ |
||||
{ |
||||
enforce: 'post', |
||||
test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
|
||||
type: 'javascript/auto', |
||||
loader: '@intlify/vue-i18n-loader', |
||||
include: [ // Use `Rule.include` to specify the files of locale messages to be pre-compiled
|
||||
path.resolve(__dirname, '../src/i18n') |
||||
] |
||||
}, |
||||
{ |
||||
test: /\.vue$/, |
||||
loader: 'vue-loader', |
||||
options: { |
||||
compilerOptions: { |
||||
isCustomElement(tag) { |
||||
if (tag === 'pinch-zoom') { |
||||
return true |
||||
} |
||||
return false |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
{ |
||||
test: /\.jsx?$/, |
||||
include: projectRoot, |
||||
exclude: /node_modules\/(?!tributejs)/, |
||||
use: 'babel-loader' |
||||
}, |
||||
{ |
||||
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, |
||||
type: 'asset', |
||||
generator: { |
||||
filename: utils.assetsPath('img/[name].[hash:7][ext]') |
||||
} |
||||
}, |
||||
{ |
||||
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, |
||||
type: 'asset', |
||||
generator: { |
||||
filename: utils.assetsPath('fonts/[name].[hash:7][ext]') |
||||
} |
||||
}, |
||||
{ |
||||
test: /\.mjs$/, |
||||
include: /node_modules/, |
||||
type: 'javascript/auto' |
||||
} |
||||
] |
||||
}, |
||||
plugins: [ |
||||
new ServiceWorkerWebpackPlugin({ |
||||
entry: path.join(__dirname, '..', 'src/sw.js'), |
||||
filename: 'sw-pleroma.js' |
||||
}), |
||||
new ESLintPlugin({ |
||||
extensions: ['js', 'vue'], |
||||
formatter: require('eslint-formatter-friendly') |
||||
}), |
||||
new StylelintPlugin({}), |
||||
new VueLoaderPlugin(), |
||||
// This copies Ruffle's WASM to a directory so that JS side can access it
|
||||
new CopyPlugin({ |
||||
patterns: [ |
||||
{ |
||||
from: "node_modules/@ruffle-rs/ruffle/**/*", |
||||
to: "static/ruffle/[name][ext]" |
||||
}, |
||||
], |
||||
options: { |
||||
concurrency: 100, |
||||
}, |
||||
}) |
||||
] |
||||
} |
||||
@ -0,0 +1,37 @@ |
||||
var config = require('../config') |
||||
var webpack = require('webpack') |
||||
var merge = require('webpack-merge') |
||||
var utils = require('./utils') |
||||
var baseWebpackConfig = require('./webpack.base.conf') |
||||
var HtmlWebpackPlugin = require('html-webpack-plugin') |
||||
|
||||
// add hot-reload related code to entry chunks
|
||||
Object.keys(baseWebpackConfig.entry).forEach(function (name) { |
||||
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) |
||||
}) |
||||
|
||||
module.exports = merge(baseWebpackConfig, { |
||||
module: { |
||||
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) |
||||
}, |
||||
mode: 'development', |
||||
// eval-source-map is faster for development
|
||||
devtool: 'eval-source-map', |
||||
plugins: [ |
||||
new webpack.DefinePlugin({ |
||||
'process.env': config.dev.env, |
||||
'COMMIT_HASH': JSON.stringify('DEV'), |
||||
'DEV_OVERRIDES': JSON.stringify(config.dev.settings), |
||||
'__VUE_OPTIONS_API__': true, |
||||
'__VUE_PROD_DEVTOOLS__': false |
||||
}), |
||||
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
|
||||
new webpack.HotModuleReplacementPlugin(), |
||||
// https://github.com/ampedandwired/html-webpack-plugin
|
||||
new HtmlWebpackPlugin({ |
||||
filename: 'index.html', |
||||
template: 'index.html', |
||||
inject: true |
||||
}) |
||||
] |
||||
}) |
||||
@ -0,0 +1,104 @@ |
||||
var path = require('path') |
||||
var config = require('../config') |
||||
var utils = require('./utils') |
||||
var webpack = require('webpack') |
||||
var merge = require('webpack-merge') |
||||
var baseWebpackConfig = require('./webpack.base.conf') |
||||
var MiniCssExtractPlugin = require('mini-css-extract-plugin') |
||||
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin") |
||||
var HtmlWebpackPlugin = require('html-webpack-plugin') |
||||
var env = process.env.NODE_ENV === 'testing' |
||||
? require('../config/test.env') |
||||
: config.build.env |
||||
|
||||
let commitHash = (() => { |
||||
const subst = "6c78b59c99"; |
||||
if(!subst.match(/Format:/)) { |
||||
return subst; |
||||
} else { |
||||
return require('child_process') |
||||
.execSync('git rev-parse --short HEAD') |
||||
.toString(); |
||||
} |
||||
})(); |
||||
|
||||
var webpackConfig = merge(baseWebpackConfig, { |
||||
mode: 'production', |
||||
module: { |
||||
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, extract: true }) |
||||
}, |
||||
devtool: config.build.productionSourceMap ? 'source-map' : false, |
||||
optimization: { |
||||
minimize: true, |
||||
splitChunks: { |
||||
chunks: 'all' |
||||
}, |
||||
minimizer: [ |
||||
`...`, |
||||
new CssMinimizerPlugin() |
||||
] |
||||
}, |
||||
output: { |
||||
path: config.build.assetsRoot, |
||||
filename: utils.assetsPath('js/[name].[chunkhash].js'), |
||||
chunkFilename: utils.assetsPath('js/[name].[chunkhash].js') |
||||
}, |
||||
plugins: [ |
||||
// http://vuejs.github.io/vue-loader/workflow/production.html
|
||||
new webpack.DefinePlugin({ |
||||
'process.env': env, |
||||
'COMMIT_HASH': JSON.stringify(commitHash), |
||||
'DEV_OVERRIDES': JSON.stringify(undefined), |
||||
'__VUE_OPTIONS_API__': true, |
||||
'__VUE_PROD_DEVTOOLS__': false |
||||
}), |
||||
// extract css into its own file
|
||||
new MiniCssExtractPlugin({ |
||||
filename: utils.assetsPath('css/[name].[contenthash].css') |
||||
}), |
||||
// generate dist index.html with correct asset hash for caching.
|
||||
// you can customize output by editing /index.html
|
||||
// see https://github.com/ampedandwired/html-webpack-plugin
|
||||
new HtmlWebpackPlugin({ |
||||
filename: process.env.NODE_ENV === 'testing' |
||||
? 'index.html' |
||||
: config.build.index, |
||||
template: 'index.html', |
||||
inject: true, |
||||
minify: { |
||||
removeComments: true, |
||||
collapseWhitespace: true, |
||||
removeAttributeQuotes: true, |
||||
ignoreCustomComments: [/server-generated-meta/] |
||||
// more options:
|
||||
// https://github.com/kangax/html-minifier#options-quick-reference
|
||||
} |
||||
}), |
||||
// split vendor js into its own file
|
||||
// extract webpack runtime and module manifest to its own file in order to
|
||||
// prevent vendor hash from being updated whenever app bundle is updated
|
||||
// new webpack.optimize.SplitChunksPlugin({
|
||||
// name: ['app', 'vendor']
|
||||
// }),
|
||||
] |
||||
}) |
||||
|
||||
if (config.build.productionGzip) { |
||||
var CompressionWebpackPlugin = require('compression-webpack-plugin') |
||||
|
||||
webpackConfig.plugins.push( |
||||
new CompressionWebpackPlugin({ |
||||
asset: '[path].gz[query]', |
||||
algorithm: 'gzip', |
||||
test: new RegExp( |
||||
'\\.(' + |
||||
config.build.productionGzipExtensions.join('|') + |
||||
')$' |
||||
), |
||||
threshold: 10240, |
||||
minRatio: 0.8 |
||||
}) |
||||
) |
||||
} |
||||
|
||||
module.exports = webpackConfig |
||||
@ -0,0 +1,6 @@ |
||||
var merge = require('webpack-merge') |
||||
var prodEnv = require('./prod.env') |
||||
|
||||
module.exports = merge(prodEnv, { |
||||
NODE_ENV: '"development"' |
||||
}) |
||||
@ -0,0 +1,73 @@ |
||||
// see http://vuejs-templates.github.io/webpack for documentation.
|
||||
const path = require('path') |
||||
let settings = {} |
||||
try { |
||||
settings = require('./local.json') |
||||
if (settings.target && settings.target.endsWith('/')) { |
||||
// replacing trailing slash since it can conflict with some apis
|
||||
// and that's how actual BE reports its url
|
||||
settings.target = settings.target.replace(/\/$/, '') |
||||
} |
||||
console.log('Using local dev server settings (/config/local.json):') |
||||
console.log(JSON.stringify(settings, null, 2)) |
||||
} catch (e) { |
||||
console.log('Local dev server settings not found (/config/local.json)') |
||||
} |
||||
|
||||
const target = settings.target || 'http://localhost:4000/' |
||||
|
||||
module.exports = { |
||||
build: { |
||||
env: require('./prod.env'), |
||||
index: path.resolve(__dirname, '../dist/index.html'), |
||||
assetsRoot: path.resolve(__dirname, '../dist'), |
||||
assetsSubDirectory: 'static', |
||||
assetsPublicPath: '/', |
||||
productionSourceMap: true, |
||||
// Gzip off by default as many popular static hosts such as
|
||||
// Surge or Netlify already gzip all static assets for you.
|
||||
// Before setting to `true`, make sure to:
|
||||
// npm install --save-dev compression-webpack-plugin
|
||||
productionGzip: false, |
||||
productionGzipExtensions: ['js', 'css'] |
||||
}, |
||||
dev: { |
||||
env: require('./dev.env'), |
||||
port: 8080, |
||||
settings, |
||||
assetsSubDirectory: 'static', |
||||
assetsPublicPath: '/', |
||||
proxyTable: { |
||||
'/api': { |
||||
target, |
||||
changeOrigin: true, |
||||
cookieDomainRewrite: 'localhost' |
||||
}, |
||||
'/nodeinfo': { |
||||
target, |
||||
changeOrigin: true, |
||||
cookieDomainRewrite: 'localhost' |
||||
}, |
||||
'/socket': { |
||||
target, |
||||
changeOrigin: true, |
||||
cookieDomainRewrite: 'localhost', |
||||
ws: true, |
||||
headers: { |
||||
'Origin': target |
||||
} |
||||
}, |
||||
'/oauth/revoke': { |
||||
target, |
||||
changeOrigin: true, |
||||
cookieDomainRewrite: 'localhost' |
||||
} |
||||
}, |
||||
// CSS Sourcemaps off by default because relative paths are "buggy"
|
||||
// with this option, according to the CSS-Loader README
|
||||
// (https://github.com/webpack/css-loader#sourcemaps)
|
||||
// In our experience, they generally work as expected,
|
||||
// just be aware of this issue when enabling this option.
|
||||
cssSourceMap: false |
||||
} |
||||
} |
||||
@ -0,0 +1,4 @@ |
||||
{ |
||||
"target": "https://pleroma.soykaf.com/", |
||||
"staticConfigPreference": false |
||||
} |
||||
@ -0,0 +1,3 @@ |
||||
module.exports = { |
||||
NODE_ENV: '"production"' |
||||
} |
||||
@ -0,0 +1,6 @@ |
||||
var merge = require('webpack-merge') |
||||
var devEnv = require('./dev.env') |
||||
|
||||
module.exports = merge(devEnv, { |
||||
NODE_ENV: '"testing"' |
||||
}) |
||||
@ -0,0 +1,114 @@ |
||||
# Pleroma-FE configuration and customization for instance administrators |
||||
|
||||
* *For user configuration, see [Pleroma-FE user guide](../user_guide)* |
||||
* *For local development server configuration, see [Hacking, tweaking, contributing](HACKING.md)* |
||||
|
||||
## Where configuration is stored |
||||
|
||||
PleromaFE gets its configuration from several sources, in order of preference (the one above overrides ones below it) |
||||
|
||||
1. `/api/statusnet/config.json` - this is generated on Backend and contains multiple things including instance name, char limit etc. It also contains FE/Client-specific data, PleromaFE uses `pleromafe` field of it. For more info on changing config on BE, look [here](../backend/configuration/cheatsheet.md#frontend_configurations) |
||||
2. `/static/config.json` - this is a static FE-provided file, containing only FE specific configuration. This file is completely optional and could be removed but is useful as a fallback if some configuration JSON property isn't present in BE-provided config. It's also a reference point to check what default configuration are and what JSON properties even exist. In local dev mode it could be used to override BE configuration, more about that in HACKING.md. File is located [here](https://git.pleroma.social/pleroma/pleroma-fe/blob/develop/static/config.json). |
||||
3. Built-in defaults. Those are hard-coded defaults that are used when `/static/config.json` is not available and BE-provided configuration JSON is missing some JSON properties. ( [Code](https://git.pleroma.social/pleroma/pleroma-fe/blob/develop/src/modules/instance.js) ) |
||||
|
||||
## Instance-defaults |
||||
|
||||
Important note that some configurations are treated as "instance default" - it means user is able to change this configuration for themselves. Currently, defaults are only applied for new visitors and people who haven't changed the option in question. If you change some instance default option, there is a chance it won't affect some users. |
||||
|
||||
There's currently no mechanism for user-settings synchronization across several browsers, *user* essentially means *visitor*, most user settings are stored in local storage/IndexedDB and not tied to an account in any way. |
||||
|
||||
## Options |
||||
|
||||
### `alwaysShowSubjectInput` |
||||
`true` - will always show subject line input, `false` - only show when it's not empty (i.e. replying). To hide subject line input completely, set it to `false` and `subjectLineBehavior` to `"noop"` |
||||
|
||||
### `background` |
||||
Default image background. Be aware of using too big images as they may take longer to load. Currently image is fitted with `background-size: cover` which means "scaled and cropped", currently left-aligned. De-facto instance default, user can choose their own background, if they remove their own background, instance default will be used instead. |
||||
|
||||
### `collapseMessageWithSubject` |
||||
Collapse post content when post has a subject line (content warning). Instance-default. |
||||
|
||||
### `disableChat` |
||||
hides the chat (TODO: even if it's enabled on backend) |
||||
|
||||
### `greentext` |
||||
Changes lines prefixed with the `>` character to have a green text color |
||||
|
||||
### `hideFilteredStatuses` |
||||
Removes filtered statuses from timelines. |
||||
|
||||
### `hideMutedPosts` |
||||
Removes muted statuses from timelines. |
||||
|
||||
### `hidePostStats` |
||||
Hide repeats/favorites counters for posts. |
||||
|
||||
### `hideSitename` |
||||
Hide instance name in header. |
||||
|
||||
### `hideUserStats` |
||||
Hide followers/friends counters for users. |
||||
|
||||
### `loginMethod` |
||||
`"password"` - show simple password field |
||||
`"token"` - show button to log in with external method (will redirect to login form, more details in BE documentation) |
||||
|
||||
### `logo`, `logoMask`, `logoMargin` |
||||
Instance `logo`, could be any image, including svg. By default it assumes logo used will be monochrome-with-alpha one, this is done to be compatible with both light and dark themes, so that white logo designed with dark theme in mind won't be invisible over light theme, this is done via [CSS3 Masking](https://www.html5rocks.com/en/tutorials/masking/adobe/). Basically - it will take alpha channel of the image and fill non-transparent areas of it with solid color. If you really want colorful logo - it can be done by setting `logoMask` to `false`. |
||||
|
||||
`logoMargin` allows you to adjust vertical margins between logo boundary and navbar borders. The idea is that to have logo's image without any extra margins and instead adjust them to your need in layout. |
||||
|
||||
### `minimalScopesMode` |
||||
Limit scope selection to *Direct*, *User default* and *Scope of post replying to*. This also makes it impossible to reply to a DM with a non-DM post from PleromaFE. |
||||
|
||||
### `nsfwCensorImage` |
||||
Use custom image for NSFW'd images |
||||
|
||||
### `postContentType` |
||||
Default post formatting option (markdown/bbcode/plaintext/etc...) |
||||
|
||||
### `redirectRootNoLogin`, `redirectRootLogin` |
||||
These two settings should point to where FE should redirect visitor when they login/open up website root |
||||
|
||||
### `scopeCopy` |
||||
Copy post scope (visibility) when replying to a post. Instance-default. |
||||
|
||||
### `sidebarRight` |
||||
Change alignment of sidebar and panels to the right. Defaults to `false`. |
||||
|
||||
### `showFeaturesPanel` |
||||
Show panel showcasing instance features/settings to logged-out visitors |
||||
|
||||
### `showInstanceSpecificPanel` |
||||
This allows you to include arbitrary HTML content in a panel below navigation menu. PleromaFE looks for an html page `instance/panel.html`, by default it's not provided in FE, but BE bundles some [default one](https://git.pleroma.social/pleroma/pleroma/blob/develop/priv/static/instance/panel.html). De-facto instance-defaults, since user can hide instance-specific panel. |
||||
|
||||
### `subjectLineBehavior` |
||||
How to handle subject line (CW) when replying to a post. |
||||
* `"email"` - like EMail - prepend `re: ` to subject line if it doesn't already start with it. |
||||
* `"masto"` - like Mastodon - copy it as is. |
||||
* `"noop"` - do not copy |
||||
Instance-default. |
||||
|
||||
### `theme` |
||||
Default theme used for new users. De-facto instance-default, user can change theme. |
||||
|
||||
### `webPushNotifications` |
||||
Enables [PushAPI](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) - based notifications for users. Instance-default. |
||||
|
||||
|
||||
|
||||
## Indirect configuration |
||||
Some features are configured depending on how backend is configured. In general the approach is "if backend allows it there's no need to hide it, if backend doesn't allow it there's no need to show it. |
||||
|
||||
### Chat |
||||
**TODO somewhat broken, see: disableChat** chat can be disabled by disabling it in backend |
||||
|
||||
### Private Mode |
||||
If the `private` instance setting is enabled in the backend, features that are not accessible without authentication, such as the timelines and search will be disabled for unauthenticated users. |
||||
|
||||
### Rich text formatting in post formatting |
||||
Rich text formatting options are displayed depending on how many formatting options are enabled on backend, if you don't want your users to use rich text at all you can only allow "text/plain" one, frontend then will only display post text format as a label instead of dropdown (just so that users know for example if you only allow Markdown, only BBCode or only Plain text) |
||||
|
||||
### Who to follow |
||||
This is a panel intended for users to find people to follow based on randomness or on post contents. Being potentially privacy unfriendly feature it needs to be enabled and configured in backend to be enabled. |
||||
|
||||
@ -0,0 +1,110 @@ |
||||
# Hacking, tweaking, contributing |
||||
|
||||
## What PleromaFE even is, how it works |
||||
|
||||
PleromaFE is an SPA (Single-Page Application) backed by [Vue](https://vuejs.org/) framework. It means that it's just a nearly-empty HTML page with bunch of JavaScript that actually generates and controls DOM (i.e. html elements) in Runtime. Currently, there's no way around it - you have to have Javascript enabled in the browser to make it work, there is a theoretical possibility to generate some HTML server-side but it's not implemented yet. |
||||
|
||||
You can serve static html page and everything from any HTTP(S) server but currently it will try to access /api/ path at same domain it's running on, meaning that as of right now you cannot put it on one domain and access the other without proxying requests. |
||||
|
||||
Development server does exactly that - it serves static html page with javascript and all other assets, adds some code to automatically reload when changes to code are made and proxies requests to some other server. |
||||
|
||||
## Setting up develop server |
||||
|
||||
Setting up development server is fairly straight-forward. |
||||
|
||||
1. On your system you must have **[Node.js](https://nodejs.org/) version 8** and newer installed. For older systems or systems that do not package node you can try [NodeSource](https://github.com/nodesource/distributions) repositories. *Windows support theoretically possible but isn't tested.* |
||||
2. For fetching dependencies and running basic tasks you will *[Yarn](https://yarnpkg.com/)* installed. |
||||
3. Clone the repository, `cd` into it and run `yarn` to fetch dependencies. |
||||
4. If you want to point development server at some instance you will need to copy `config/local.example.json` to `config/local.json` and change the `target` to point at instance you want, otherwise it will point to `localhost:4000` which is default address for locally-run Pleroma Backend |
||||
5. Run `yarn dev` - it will start the server. |
||||
6. Open `localhost:8080` in your browser, it might take a while initially until everything is built first time. |
||||
|
||||
## Setting up production build |
||||
|
||||
This could be a bit trickier, you basically need steps 1-4 from *develop build* instructions, and run `yarn build` which will compile and copy eveything needed for production into `dist` folder. As said before, this technically could be used anywhere with some details. |
||||
|
||||
### Replacing your instance's frontend with custom FE build |
||||
|
||||
#### New way (via AdminFE, a bit janky but works) |
||||
|
||||
In backend's [static directory](../backend/configuration/static_dir.md) there should be a folder called `frontends` if you installed any frontends from AdminFE before, otherwise you can create it yourself (ensuring correct permissions). Backend will serve given frontend from path `frontends/{frontend}/{reference}`, where `{frontend}` is name of frontend (`pleroma-fe`) and `{reference}` is version. You could make a production build, move `dist` folder into `frontends/pleroma-fe` and rename it into something like `myCustomVersion`. To actually make backend serve this frontend by default, in AdminFE you'll need to set name/reference in Settings -> Frontend -> Frontends -> Primary. |
||||
|
||||
You could also install from a zip file (i.e. CI build) but AdminFE UI is a bit buggy and lacking, so this approach is not recommended. |
||||
|
||||
Take note that frontend management is in early development and currently there's no way for user to change frontend or version for themselves, primary frontend becomes default frontend for all users and visitors. |
||||
|
||||
#### Old way (replaces everything, hard to maintain, not recommended) |
||||
|
||||
Copy or symlink contents of `dist` folder into backend's [static directory](../backend/configuration/static_dir.md), by default it is located in `instance/static`, or in `/var/lib/pleroma/static` for OTP release installations, create it if it doesn't exist already. Be aware that running `yarn build` wipes the contents of `dist` folder, and this could remove emojis, other frontends etc. and therefore this approach is not recommended. |
||||
|
||||
### Running production build locally or on a separate server |
||||
|
||||
This is **highly experimental** and only tried once, with no actual simple solution available yet |
||||
|
||||
You will need an HTTP server that can proxy requests for `/api`, `/instance`, `/nodeinfo` and show index.html for every 404 page. |
||||
|
||||
For nginx you'll probably need something like this: |
||||
|
||||
```nginx |
||||
server { |
||||
listen 80 default_server; |
||||
|
||||
index index.html index.htm index.nginx-debian.html; |
||||
|
||||
root /var/www/html |
||||
|
||||
location /api { |
||||
proxy_pass https://example.tld; |
||||
} |
||||
|
||||
location /instance { |
||||
proxy_pass https://example.tld; |
||||
} |
||||
|
||||
location /nodeinfo { |
||||
proxy_pass https://example.tld; |
||||
} |
||||
|
||||
location / { |
||||
try_files $uri $uri/ /index.html; |
||||
} |
||||
} |
||||
``` |
||||
|
||||
(ed. note: this is close to what i used last time i had to do it, it may not work and need additions, i basically adjusted default nginx server in debian) |
||||
|
||||
## Basic architecture |
||||
|
||||
### API, Data, Operations |
||||
|
||||
In 99% cases PleromaFE uses [MastoAPI](https://docs.joinmastodon.org/api/) with [Pleroma Extensions](../backend/API/differences_in_mastoapi_responses.md) to fetch the data. The rest is either QvitterAPI leftovers or pleroma-exclusive APIs. QvitterAPI doesn't exactly have documentation and uses different JSON structure and sometimes different parameters and workflows, [this](https://twitter-api.readthedocs.io/en/latest/index.html) could be a good reference though. Some pleroma-exclusive API may still be using QvitterAPI JSON structure. |
||||
|
||||
PleromaFE supports both formats by transforming them into internal format which is basically QvitterAPI one with some additions and renaming. All data is passed trough [Entity Normalizer](https://git.pleroma.social/pleroma/pleroma-fe/-/blob/develop/src/services/entity_normalizer/entity_normalizer.service.js) which can serve as a reference of API and what's actually used, it's also a host for all the hacks and data transformation. |
||||
|
||||
For most part, PleromaFE tries to store all the info it can get in global vuex store - every user and post are passed trough updating mechanism where data is either added or merged with existing data, reactively updating the information throughout UI, so if in newest request user's post counter increased, it will be instantly updated in open user profile cards. This is also used to find users, posts and sometimes to build timelines and/or request parameters. |
||||
|
||||
PleromaFE also tries to persist this store, however only stable data is stored, such as user authentication and preferences, user highlights. Persistence is performed by saving and loading chunk of vuex store in browser's LocalStorage/IndexedDB. |
||||
|
||||
TODO: Refactor API code and document it here |
||||
|
||||
### Themes |
||||
|
||||
PleromaFE uses custom theme "framework" which is pretty much just a style tag rendered by vue which only contains CSS3 variables. Every color used in UI should be derived from theme. Theme is stored in a JSON object containing color, opacity, shadow and font information, with most of it being optional. |
||||
|
||||
The most basic theme can consist of 4 to 8 "basic colors", which is also what previous version of themes allowed, with all other colors being derived from those basic colors, i.e. "light background" will be "background" color lightened/darkened, "panel header" will be same as "foreground". The idea is that you can specify just basic color palette and everything else will be generated automatically, but if you really need to tweak some specific color - you can. |
||||
|
||||
As said before - older version only allowed 4 to 8 colors, it also used arrays instead of objects, we still support that. The basic colors are: background, foreground, text, links, red, orange, blue, green. First 4 are mandatory, last 4 have default fallbacks since ever more ancient theme formats only had 4 colors. |
||||
|
||||
Note that with older version themes used different internal naming when persisting state. |
||||
|
||||
Themes are meant to be backwards and somewhat forwards compatible - new colors should properly inherit from some existing one, making it compatible with older versions. When loading newer version of theme all unrecognized colors will be ignored, which for most part should be fine, however adding new features (gradients, masks, whatever it might be) might be breaky. |
||||
|
||||
Lastly, pleroma provides some contrast information and generates readable text color automatically, which is done by tracking background/text color pairs and their contrast - if contrast too low it will try to use background color with inverted lightness, if it's still unacceptable it will fall back to pure black/white. |
||||
|
||||
### Still Image |
||||
|
||||
Most images are wrapped in a component called StillImage, which does one simple thing - tries to detect if image is a GIF and if it is (and user has enabled relevant setting) it will show `<canvas>` with that image instead of actual image. It uses standard method to render an image into canvas which renders first frame of a GIF if it's animated (obviously because canvas by itself isn't animated and you'd need to animate it yourself in JS), it will show actual image on hover. Statuses also allow playing animated avatars when you hover over a post, not just image itself. |
||||
|
||||
## Contributing |
||||
|
||||
Feel free to contribute, most preferred way is by starting a Merge Request in GitLab. Please try to use descriptive names for your branches and merge requests, avoid naming them "fix-issue-777" "777" and so on. |
||||
|
After Width: | Height: | Size: 491 B |
|
After Width: | Height: | Size: 16 KiB |
@ -0,0 +1,8 @@ |
||||
# Introduction to Pleroma-FE |
||||
## What is Pleroma-FE? |
||||
|
||||
Pleroma-FE is the default user-facing frontend for Pleroma. It's user interface is modeled after Qvitter which is modeled after an older Twitter design. It provides a simple 2-column interface for microblogging. While being simple by default it also provides many powerful customization options. |
||||
|
||||
## How can I use it? |
||||
|
||||
If your instance uses Pleroma-FE, you can acces it by going to your instance (e.g. <https://pleroma.soykaf.com>). You can read more about it's basic functionality in the [Pleroma-FE User Guide](./user_guide/). We also have [a guide for administrators](./CONFIGURATION.md) and for [hackers/contributors](./HACKING.md). |
||||
@ -0,0 +1,44 @@ |
||||
# General overview |
||||
|
||||
> Be prepared for breaking changes, unexpected behavior and this user guide becoming obsolete and wrong. |
||||
|
||||
> If there was no insanity |
||||
> |
||||
> it would be necessary to create it. |
||||
> |
||||
> --Catbag |
||||
|
||||
Pleroma-FE is the default user-facing frontend for Pleroma. If your instance uses Pleroma-FE, you can access it by going to your instance (e.g. <https://pleroma.soykaf.com>). After logging in you will have two columns in front of you. Here we're going to keep it to the default behaviour, but some instances swap the left and right columns. If you're on such an instance what we refer to as the left column will be on your right and vice versa. |
||||
|
||||
### Left column |
||||
|
||||
- first block: This section is dedicated to [posting](posting_reading_basic_functions.md) |
||||
- second block: Here you can switch between the different views for the right column. |
||||
- Optional third block: This is the Instance panel that can be activated, but is deactivated by default. It's fully customisable by instance admins and by default has links to the Pleroma-FE and Mastodon-FE. |
||||
- fourth block: This is the Notifications block, here you will get notified whenever somebody mentions you, follows you, repeats or favorites one of your statuses |
||||
|
||||
### Right column |
||||
This is where the interesting stuff happens! There are different views depending on what you choose in the second block of the left panel. |
||||
|
||||
- **Timelines** Depending on the [timeline](timelines.md) you will see different statuses, but each status has a standard structure: |
||||
- Profile pic, name and link to profile. An optional left-arrow if it's a reply to another status (hovering will reveal the reply-to status). Clicking on the profile pic will uncollapse the user's profile where you can find information about the account and can [follow, mute or block the account](users_follow_mute_block.md). |
||||
- An arrow icon on the right side allows you to open the status on the instance where it's originating from. |
||||
- A `+` button on the rightmost side allows you to Expand/Collapse an entire discussion thread. |
||||
- The text of the status, including mentions and attachments. If you click on a mention, it will automatically open the profile page of that person. |
||||
- Four buttons (left to right): Reply, Repeat, Favorite and Add Reaction. The three dots next to it are a dropdown menu for extra options including simple moderation, bookmarking, deleting posts, pinning your own posts to your profile and more. |
||||
- **Interactions** shows all interactions you've had with people on the network, basically same as notifications except grouped in convenient way. |
||||
- **Chats** is the chat feature. You can find your friends and start chatting with them. At the moment chat are only one-on-one, but once groups are introduced groupchats will also be possible. |
||||
- **About** is the about-page and lists the staff, the TOS, activated MRF's, and enabled features |
||||
|
||||
### Top right |
||||
|
||||
- The magnifier icon opens the search screen |
||||
- You can search for statuses, people and hashtags. |
||||
- You can import statuses from remote servers by pasting the url to the post in the search field. |
||||
- If you want to search for users that your instance doesn't know about yet, you can search for them using the full `name@instance.tld` handle. You can also use the full url from their remote profile. |
||||
- The gear icon gives you [settings](settings.md) |
||||
- If you have admin rights, you'll see an icon that opens the admin interface |
||||
- The last icon is to log out |
||||
|
||||
### Bottom right |
||||
On the bottom right you have the Shoutbox. Here you can communicate with people on the same instance in realtime. It is local-only, very basic and will most probably be removed once the Chats functionality allows group chats. |
||||
@ -0,0 +1,76 @@ |
||||
# Posting, reading, basic functions. |
||||
|
||||
!!! warning |
||||
Depending on your instance some of the options might not be available or have different defaults |
||||
|
||||
After registering and logging in you're presented with your timeline in right column and new post form with timeline list and notifications in the left column. |
||||
|
||||
Posts will contain the text you are posting, but some content will be modified: |
||||
|
||||
1. Mentions: Mentions have the form of @user or @user<span></span>@instance.tld. These will become links to the user's profile. In addition, the mentioned user will always get a notification about the post they have been mentioned in, so only mention users that you want to receive this message. |
||||
2. URLs: URLs like `http://example.com` will be automatically be turned into a clickable links. |
||||
3. Hashtags: Hashtags like #cofe will also be turned into links. |
||||
4. There is a default character limit of 5000 characters. |
||||
|
||||
Let's clear up some basic stuff. When you post something it's called a **post** or it could be called a **status** or even a **toot** or a **prööt** depending on whom you ask. Post has body/content but it also has some other stuff in it - from attachments, visibility scope, subject line... |
||||
|
||||
**Emoji** are small images embedded in text, there are two major types of emoji: [unicode emoji](https://en.wikipedia.org/wiki/Emoji) and custom emoji. While unicode emoji are universal and standardized, they can appear differently depending on where you are using them or may not appear at all on older systems. Custom emoji are a more *fun* kind - instance administrator can define many images as *custom emoji* for their users. This works very simple - custom emoji is defined by its *shortcode* and an image, so that any shortcode enclosed in colons get replaced with image if such shortcode exist. |
||||
Let's say there's a `:pleroma:` emoji defined on an instance. That means |
||||
> First time using :pleroma: pleroma! |
||||
|
||||
will become |
||||
> First time using  pleroma! |
||||
|
||||
Note that you can only use emoji defined on your instance, you cannot "copy" someone else's emoji, and will have to ask your administrator to copy emoji from other instance to yours. |
||||
Lastly, there's two convenience options for emoji: an emoji picker (smiley face to the right of "submit" button) and autocomplete suggestions - when you start typing :shortcode: it will automatically try to suggest you emoji and complete the shortcode for you if you select one. If emoji doesn't show up in suggestions nor in emoji picker it means there's no such emoji on your instance, if shortcode doesn't match any defined emoji it will appear as text. |
||||
|
||||
**Attachments** are fairly simple - you can attach any file to a post as long as the file is within maximum size limits. If you're uploading explicit material you can mark all of your attachments as sensitive (or add the `#nsfw` tag) - it will hide the images and videos behind a warning so that it won't be displayed instantly. |
||||
|
||||
**Subject line** also known as **CW** (Content Warning) could be used as a header to the post and/or to warn others about contents of the post having something that might upset somebody or something among those lines. Several applications allow to hide post content leaving only subject line visible. Using a subject line will not mark your images as sensitive, you will have to do that explicitly (see above). |
||||
|
||||
**Visiblity scope** controls who will be able to see your posts. There are four scopes available: |
||||
|
||||
1. `Public`: This is the default, and some fediverse software, like GNU Social, only supports this. This means that your post is accessible by anyone and will be shown in the public timelines. |
||||
2. `Unlisted`: This is the same as public, but your post won't appear in the public timelines. The post will still be accessible by anyone who comes across it (for example, by looking at your profile) or by direct linking. They will also appear in public searches. |
||||
3. `Followers only`: This will show your post only to your followers. Only they will be able to interact with it. Be careful: When somebody follows you, they will be able to see all your previous `followers only` posts as well! If you want to restrict who can follow you, consider [locking your account down to only approved followers](../settings#profile). |
||||
4. `Direct`: This will only send the message to the people explicitly mentioned in the post. |
||||
|
||||
A few things to consider about the security and usage of these scopes: |
||||
|
||||
- None of these options will change the fact that the messages are all saved in the database unencrypted. They will be visible to your server admin and to any other admin of a server who receives this post. Do not share information that you would consider secret or dangerous. Use encrypted messaging systems for these things. |
||||
- Follower-only posts can lead to fragmented conversations. If you post a follower-only post and somebody else replies to it with a follower-only post, only people following both of you will see the whole conversation thread. Everybody else will only see half of it. Keep this in mind and keep conversations public if possible. |
||||
- Changing scopes during a thread or adding people to a direct message will not retroactively make them see the whole conversation. If you add someone to a direct message conversation, they will not see the post that happened before they were mentioned. |
||||
* **Reply-to** if you are replying to someone, your post will also contain a note that your post is referring to the post you're replying to. Person you're replying to will receive a notification *even* if you remove them from mentioned people. You won't receive notifications when replying to your own posts, but it's useful to reply to your own posts to provide people some context if it's a follow-up to a previous post. There's a small "Reply to ..." label under post author's name which you can hover on to see what post it's referring to. |
||||
|
||||
Sometimes you may encounter posts that seem different than what they are supposed to. For example, you might see a direct message without any mentions in the text. This can happen because internally, the Fediverse has a different addressing mechanism similar to email, with `to` and `cc` fields. While these are not directly accessible in PleromaFE, other software in the Fediverse might generate those posts. Do not worry in these cases, these are normal and not a bug. |
||||
|
||||
## Rich text |
||||
|
||||
By default new posts you make are plaintext, meaning you can't make text **bold** or add custom links or make lists or anything like that. However if your instance allows it you can use Markdown or BBCode or HTML to spice up your text, however there are certain limitations to what HTML tags and what features of Markdown you can use. |
||||
|
||||
Here is a small example of some text in markdown. |
||||
|
||||
``` |
||||
This is an example of markdown text using **bold** and *cursive* text. |
||||
To get a newline we add two spaces at the end of the previous line. |
||||
|
||||
Let's also add a list |
||||
|
||||
* with |
||||
* some |
||||
* items |
||||
``` |
||||
|
||||
If you set the input-method to Markdown, and post this, it will look something like |
||||
|
||||
 |
||||
|
||||
## Other actions |
||||
|
||||
In addition to posting you can also *favorite* posts also known as *liking* them and *repeat* posts (also known as *retweeting*, *boosting* and even *reprööting*). Favoriting a post increments a counter on it, notifies the post author of your affection towards that post and also adds that post to your "favorited" posts list (in your own profile, "Favorites" tab). Reprööting a post does all that and also repeats this post to your followers and your profile page with a note "*user* repeated post". |
||||
|
||||
Your own posts can be deleted, but this will only reliably delete the post from your own instance. Other instances will receive a deletion notice, but there's no way to force them to actually delete a post. In addition, not all instances that contain the message might even receive the deletion notice, because they might be offline or not known to have the post because they received it through a repeat. Lastly, deletion notice might not reach certain frontends and clients - post will be visible for them until page refresh or cache clear, they probably won't be able to interact with it apart from replying to it (which will have reply-to mark missing). |
||||
|
||||
If you are a moderator, you can also delete posts by other people. If those people are on your instance, it will delete the post and send out the deletion notice to other servers. If they are not on your instance, it will just remove the post from your local instance. |
||||
|
||||
There's also an option to report a user's post which can be used to notify your (and optionally the other instance's) admin that someone is being naughty. |
||||
@ -0,0 +1,116 @@ |
||||
# Settings |
||||
|
||||
On the top-right you will see a gear icon. Click it to open the settings. |
||||
|
||||
## General |
||||
|
||||
### Interface |
||||
|
||||
- **Interface language** is where you can set the interface language. The default language is the one that you set in your browser settings. |
||||
- **Hide instance-specific panel** hides the panel in the lower left that usually contains general information about the server. This will only be visible if your admin has activated this panel and is deactivated by default. |
||||
|
||||
### Timeline |
||||
|
||||
- **Hide posts of muted users** If this is set, 'muting' a user will completely hide their posts instead of collapsing them. |
||||
- **Collapse posts with subjects** This will collapse posts that contain a subject, hiding their content. Subjects are also sometimes called content warnings. |
||||
- **Enable automatic streaming of new posts when scrolled to the top** With this enabled, new posts will automatically stream in when you are scrolled to the top. Otherwise, you will see a button on the timeline that will let you display the new posts. |
||||
- **Pause streaming when tab is not focused** This pauses the automatic streaming that the previous option enables when the tab is out of focus. This is useful if you don't want to miss any new posts. |
||||
- **Enable automatic loading when scrolled to the bottom** When this is disabled, a button will be shown on the bottom of the timeline that will let you load older posts. |
||||
- **Enable reply-link preview on hover** Status posts in the timeline and notifications contain links to replies and to the post they are a reply to. If this setting is enabled, hovering over that link will display that linked post in a small hovering overlay. |
||||
|
||||
### Composing |
||||
|
||||
- **Copy scope when replying** makes the scope of a reply be the same as the scope of the post it is replying to. This is useful to prevent accidentally moving private discussions to public, or vice versa. |
||||
- **Always show subject field** Whether or not to display the 'subject' input field in the post form. If you do not want to use subjects, you can deactivate this. |
||||
- **Copy subject when replying** controls if the subject of a post will be copied from the post it is replying to. |
||||
- **Post status content type** selects the default content type of your post. The options are: Plain text, HTML, BBCode and Markdown. |
||||
- **Minimize scope selection options** will reduce the visibility scopes to 'direct', your default post scope and post scope of post you're replying to. |
||||
- **Automatically hide New Post button** hides the floating "New post" button when scrolling on mobile view. |
||||
- **Pad emoji with spaces when adding from picker** Will add spaces around emoji you select it from the picker. |
||||
|
||||
### Attachments |
||||
|
||||
- **Hide attachments in timeline** Do not display attachments in timelines. They will still display in expanded conversations. This is useful to save bandwidth and for browsing in public. |
||||
- **Hide attachments in conversations** Also hide attachments in expanded conversations. |
||||
- **Maximum amount of thumbnails per post** Exactly that :) |
||||
- **Enable clickthrough NSFW attachment hiding** Hide attachments that are marked as NSFW/sensitive behind a click-through image.` |
||||
- **Preload images** This will preload the hidden images so that they display faster when clicking through. |
||||
- **Open NSFW attachments with just one click** Directly open NSFW attachments in a maximised state instead of revealing the image thumbnail. |
||||
- **Play-on-hover GIFs** With this activated, GIFs images and avatars will only be animated on mouse hover. Otherwise, they will be always animated. This is very useful if your timeline looks too flashy from people's animated avatars and eases the CPU load. |
||||
- **Loop videos** Whether to loop videos indefinitely. |
||||
- **Loop only videos without sound** Some instances will use videos without sounds instead of GIFs. This will make only those videos autoplay. |
||||
- **Play videos directly in the media viewer** Play videos right in the timeline instead of opening it in a modal |
||||
- **Don't crop the attachment in thumbnails** if enabled, images in attachments will be fit entirely inside the container instead of being zoomed in and cropped. |
||||
|
||||
### Notifications |
||||
|
||||
- **Enable web push notifications** this enables Web Push notifications, to allow receiving notifications even when the page isn't opened, doesn't affect regular notifications. |
||||
|
||||
### Fun |
||||
|
||||
- **Meme arrows** will make `> greentext` be shown in green (using the "green" from the theme that is used). |
||||
|
||||
## Profile |
||||
|
||||
Here you can set up how you appear to other users among with some other settings: |
||||
|
||||
- **Name** is text that displays next to your avatar in posts. Please note that you **cannot** change your *@handle* |
||||
- **Bio** will be displayed under your profile - you can put anything you want there you want for everyone to see. |
||||
- **Restrict your account to approved followers only** makes your account "locked", when people follow you - you have to approve or deny their follow requests, this gives more control over who sees your followers only posts. |
||||
- **Default visibility scope** is your default post scope for new posts |
||||
- **Strip rich text from all posts** strips rich text formatting (bold/italics/lists etc) from all incoming posts. This will only affect newly fetched posts. |
||||
|
||||
If you're admin or moderator on your instance you also get **Show [role] badge in my profile** - this controls whether to show "Admin" or "Moderator** label on your profile page. |
||||
|
||||
**For all options mentioned above you have to click "Submit" button for changes to take place** |
||||
|
||||
- **Avatar** this changes picture next to your posts. Your avatar shouldn't exceed 2 MiB (2097152 bytes) or it could cause problems with certain instances. |
||||
- **Banner** this changes background on your profile card. Same as avatar it shouldn't exceed 2 MiB limit. |
||||
- **Profile Background** this changes background picture for UI. It isn't shown to anyone else *yet*, but some time later it will be shown when viewing your profisle. |
||||
|
||||
## Security |
||||
|
||||
Here you can change your password, revoke access tokens, configure 2-factor authentication (if available). |
||||
|
||||
## Filtering |
||||
|
||||
- **Types of notifications to show** This controls what kind of notifications will appear in notification column and which notifications to get in your system outside the web page |
||||
- **Replies in timeline** You may know that other social networks like Twitter will often not display replies to other people in your timeline, even if you are following the poster. Pleroma usually will show these posts to you to encourage conversation. If you do not like this behavior, you can change it here. |
||||
- **Hide post statistics** This hides the number of favorites, number of replies, etc. |
||||
- **Hide user statistics** This hides the number of followers, friends, etc. |
||||
- **Muted words** allows a list of words that will be muted (i.e. displayed in a collapsed state) on the timeline and in notifications. An easy way to tune down noise in your timeline. By default posts can be expanded if you want to see them. |
||||
- **Hide filtered statuses** will hide the filtered / muted posts completely instead of collapsing them. |
||||
|
||||
## Theme |
||||
|
||||
Here you can change the look and feel of Pleroma-FE. You can choose from several instance-provided presets and you can load one from file and save current theme to file. Before you apply new theme you can see what it will look like approximately in preview section. |
||||
|
||||
The themes engine was made to be easy to use while giving an option for powerful in-depth customization - you can just tweak colors on "Common" tab and leave everything else as is. |
||||
|
||||
If there's a little check box next to a color picker it means that color is optional and unless checked will be automatically picked based on some other color or defaults. |
||||
|
||||
For some features you can also adjust transparency of it by changing its opacity, you just need to tick checkbox next to it, otherwise it will be using default opacity. |
||||
|
||||
Contrast information is also provided - you can see how readable text is based on contrast between text color and background, icons under color pickers represent contrast rating based on [WCAG](https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast) - thumbs up means AAA rating (good), half-filled circle means AA rating (acceptable) and warning icon means it doesn't pass the minimal contrast requirement and probably will be less readable, especially for vision-challenged people, you can hover over icon to see more detailed information. *Please note* that if background is not opaque (opacity != 1) contrast will be measured based on "worst case scenario", i.e. behind semi-transparent background lies some solid color that makes text harder to read, this however is still inaccurate because it doesn't account that background can be noisy/busy, making text even harder to read. |
||||
|
||||
Apart from colors you can also tweak shadow and lighting, which is used mostly to give buttons proper relief based on their state, give panes their shade, make things glow etc. It's quite powerful, and basically provides somewhat convenient interface for [CSS Shadows](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow). |
||||
|
||||
Another thing you can tweak is theme's roundness - some people like sharp edges, some want things more rounded. This is also used if you want circled or square avatars. |
||||
|
||||
Lastly, you can redefine fonts used in UI without changing fonts in your browser or system, this however requires you to enter font's full name and having that font installed on your system. |
||||
|
||||
## Notifications |
||||
|
||||
This screen allows more fine-grained control over what notifications to show to you based on whom it comes from. |
||||
|
||||
## Data Import/Export |
||||
|
||||
This allows you to export and import a list of people you follow and block, in case instance's database gets reverted or if you want to move to another server. Note that you **CANNOT export/import list of people who *follow you***, they'll need to follow you back themselves. |
||||
|
||||
## Mutes and Blocks |
||||
|
||||
These screens give access to full list of people you block/mute, useful for *un*blocking/*un*muting people because blocking/muting them most likely removes them out of your sight completely. |
||||
|
||||
## Version |
||||
|
||||
Just displays the backend and frontend version. Useful to mention in bug reports. |
||||
@ -0,0 +1,13 @@ |
||||
# Timelines |
||||
|
||||
You have several timelines to browse trough |
||||
|
||||
- **Timeline** aka Home Timeline - this timeline contains all posts by people you follow and your own posts, as well as posts mentioning you directly. |
||||
- **Bookmarks** all the posts you've bookmarked. You can bookmark a post by clicking the three dots on the bottom right of the post and choose Bookmark. |
||||
- **Direct Messages** all posts with `direct` scope addressed to you or mentioning you. |
||||
- **Public Timelines** all public posts made by users on the instance you're on |
||||
- **The Whole Known Network** also known as **TWKN** or **Federated Timeline** - all public posts known by your instance. Due to nature of the network your instance may not know *all* the posts on the network, so only posts known by your instance are shown there. |
||||
|
||||
Note that by default you will see all posts made by other users on your Home Timeline, this contrast behavior of Twitter and Mastodon, which shows you only non-reply posts and replies to people you follow. You can change said behavior in the [settings](settings.md#filtering). |
||||
|
||||
By default instances will try to send activities (e.g. posts, favorites, etc.) up to 7 days or until the target server received them. For this reason posts that are up to 7 days old and your server didn't know about yet can pop up on your timeline. This is the default behaviour and can be changed by your admin. |
||||
@ -0,0 +1,11 @@ |
||||
# Users: follow, mute, block |
||||
|
||||
When you see someone, you can click on their user picture to view their profile, and click on the userpic in that to see *full* profile. You can **follow** them, **mute** and **block** them. |
||||
|
||||
**Following** is self-explanatory, it adds them to your Home Timeline, lists you as a follower and gives you access to follower-only posts if they have any. |
||||
|
||||
**Muting** collapses posts and notifications made by them, giving you an option to see the post if you're curious. Clients other than PleromaFE may completely remove their posts. |
||||
|
||||
**Blocking** a user removes them from your timeline and notifications and prevents them from following you (automatically unfollows them from you). |
||||
|
||||
Please note that some users can be "locked", meaning instead of following them you send a follow request they need to approve for you to become their follower. |
||||
|
After Width: | Height: | Size: 883 KiB |
@ -0,0 +1,16 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"> |
||||
<link rel="icon" type="image/png" href="/favicon.png"> |
||||
<!--server-generated-meta--> |
||||
</head> |
||||
<body class="hidden"> |
||||
<noscript>To use Pleroma, please enable JavaScript.</noscript> |
||||
<div id="app"></div> |
||||
<div id="modal"></div> |
||||
<!-- built files will be auto injected --> |
||||
<div id="popovers" /> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,2 @@ |
||||
src/components/settings_modal/tabs/general_tab.vue |
||||
src/components/shout_panel/shout_panel.js |
||||
@ -0,0 +1,135 @@ |
||||
{ |
||||
"name": "pleroma_fe", |
||||
"version": "2.6.1", |
||||
"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>", |
||||
"private": false, |
||||
"scripts": { |
||||
"dev": "node build/dev-server.js", |
||||
"build": "node build/build.js", |
||||
"unit": "karma start test/unit/karma.conf.js --single-run", |
||||
"unit:watch": "karma start test/unit/karma.conf.js --single-run=false", |
||||
"e2e": "node test/e2e/runner.js", |
||||
"test": "npm run unit && npm run e2e", |
||||
"stylelint": "npx stylelint '**/*.scss' '**/*.vue'", |
||||
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs", |
||||
"lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs" |
||||
}, |
||||
"dependencies": { |
||||
"@babel/runtime": "7.21.5", |
||||
"@chenfengyuan/vue-qrcode": "2.0.0", |
||||
"@fortawesome/fontawesome-svg-core": "6.4.0", |
||||
"@fortawesome/free-regular-svg-icons": "6.4.0", |
||||
"@fortawesome/free-solid-svg-icons": "6.4.0", |
||||
"@fortawesome/vue-fontawesome": "3.0.3", |
||||
"@kazvmoe-infra/pinch-zoom-element": "1.2.0", |
||||
"@kazvmoe-infra/unicode-emoji-json": "0.4.0", |
||||
"@ruffle-rs/ruffle": "0.1.0-nightly.2022.7.12", |
||||
"@vuelidate/core": "2.0.2", |
||||
"@vuelidate/validators": "2.0.0", |
||||
"body-scroll-lock": "3.1.5", |
||||
"chromatism": "3.0.0", |
||||
"click-outside-vue3": "4.0.1", |
||||
"cropperjs": "1.5.13", |
||||
"escape-html": "1.0.3", |
||||
"js-cookie": "3.0.1", |
||||
"localforage": "1.10.0", |
||||
"parse-link-header": "2.0.0", |
||||
"phoenix": "1.7.7", |
||||
"punycode.js": "2.3.0", |
||||
"qrcode": "1.5.3", |
||||
"querystring-es3": "0.2.1", |
||||
"url": "0.11.0", |
||||
"utf8": "3.0.0", |
||||
"vue": "3.2.45", |
||||
"vue-i18n": "9.2.2", |
||||
"vue-router": "4.1.6", |
||||
"vue-template-compiler": "2.7.14", |
||||
"vue-virtual-scroller": "^2.0.0-beta.7", |
||||
"vuex": "4.1.0" |
||||
}, |
||||
"devDependencies": { |
||||
"@babel/core": "7.21.8", |
||||
"@babel/eslint-parser": "7.21.8", |
||||
"@babel/plugin-transform-runtime": "7.21.4", |
||||
"@babel/preset-env": "7.21.5", |
||||
"@babel/register": "7.21.0", |
||||
"@intlify/vue-i18n-loader": "5.0.1", |
||||
"@ungap/event-target": "0.2.3", |
||||
"@vue/babel-helper-vue-jsx-merge-props": "1.4.0", |
||||
"@vue/babel-plugin-jsx": "1.1.1", |
||||
"@vue/compiler-sfc": "3.2.45", |
||||
"@vue/test-utils": "2.2.8", |
||||
"autoprefixer": "10.4.14", |
||||
"babel-loader": "9.1.2", |
||||
"babel-plugin-lodash": "3.3.4", |
||||
"chai": "4.3.7", |
||||
"chalk": "1.1.3", |
||||
"chromedriver": "108.0.0", |
||||
"connect-history-api-fallback": "2.0.0", |
||||
"copy-webpack-plugin": "11.0.0", |
||||
"cross-spawn": "7.0.3", |
||||
"css-loader": "6.7.3", |
||||
"css-minimizer-webpack-plugin": "4.2.2", |
||||
"custom-event-polyfill": "1.0.7", |
||||
"eslint": "8.33.0", |
||||
"eslint-config-standard": "17.0.0", |
||||
"eslint-formatter-friendly": "7.0.0", |
||||
"eslint-plugin-import": "2.27.5", |
||||
"eslint-plugin-n": "15.6.1", |
||||
"eslint-plugin-promise": "6.1.1", |
||||
"eslint-plugin-vue": "9.9.0", |
||||
"eslint-webpack-plugin": "3.2.0", |
||||
"eventsource-polyfill": "0.9.6", |
||||
"express": "4.18.2", |
||||
"function-bind": "1.1.1", |
||||
"html-webpack-plugin": "5.5.1", |
||||
"http-proxy-middleware": "2.0.6", |
||||
"iso-639-1": "2.1.15", |
||||
"json-loader": "0.5.7", |
||||
"karma": "6.4.2", |
||||
"karma-coverage": "2.2.0", |
||||
"karma-firefox-launcher": "2.1.2", |
||||
"karma-mocha": "2.0.1", |
||||
"karma-mocha-reporter": "2.2.5", |
||||
"karma-sinon-chai": "2.0.2", |
||||
"karma-sourcemap-loader": "0.3.8", |
||||
"karma-spec-reporter": "0.0.36", |
||||
"karma-webpack": "5.0.0", |
||||
"lodash": "4.17.21", |
||||
"mini-css-extract-plugin": "2.7.6", |
||||
"mocha": "10.2.0", |
||||
"nightwatch": "2.6.20", |
||||
"opn": "5.5.0", |
||||
"ora": "0.4.1", |
||||
"postcss": "8.4.23", |
||||
"postcss-html": "^1.5.0", |
||||
"postcss-loader": "7.0.2", |
||||
"postcss-scss": "^4.0.6", |
||||
"sass": "1.60.0", |
||||
"sass-loader": "13.2.2", |
||||
"selenium-server": "2.53.1", |
||||
"semver": "7.3.8", |
||||
"serviceworker-webpack5-plugin": "2.0.0", |
||||
"shelljs": "0.8.5", |
||||
"sinon": "15.0.4", |
||||
"sinon-chai": "3.7.0", |
||||
"stylelint": "14.16.1", |
||||
"stylelint-config-html": "^1.1.0", |
||||
"stylelint-config-recommended-scss": "^8.0.0", |
||||
"stylelint-config-recommended-vue": "^1.4.0", |
||||
"stylelint-config-standard": "29.0.0", |
||||
"stylelint-rscss": "0.4.0", |
||||
"stylelint-webpack-plugin": "^3.3.0", |
||||
"vue-loader": "17.0.1", |
||||
"vue-style-loader": "4.1.3", |
||||
"webpack": "5.75.0", |
||||
"webpack-dev-middleware": "3.7.3", |
||||
"webpack-hot-middleware": "2.25.3", |
||||
"webpack-merge": "0.20.0" |
||||
}, |
||||
"engines": { |
||||
"node": ">= 16.0.0", |
||||
"npm": ">= 3.0.0" |
||||
} |
||||
} |
||||
@ -0,0 +1,5 @@ |
||||
module.exports = { |
||||
plugins: [ |
||||
require('autoprefixer') |
||||
] |
||||
} |
||||
@ -0,0 +1,6 @@ |
||||
{ |
||||
"$schema": "https://docs.renovatebot.com/renovate-schema.json", |
||||
"extends": [ |
||||
"config:base" |
||||
] |
||||
} |
||||
@ -0,0 +1,138 @@ |
||||
import UserPanel from './components/user_panel/user_panel.vue' |
||||
import NavPanel from './components/nav_panel/nav_panel.vue' |
||||
import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue' |
||||
import FeaturesPanel from './components/features_panel/features_panel.vue' |
||||
import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue' |
||||
import ShoutPanel from './components/shout_panel/shout_panel.vue' |
||||
import MediaModal from './components/media_modal/media_modal.vue' |
||||
import SideDrawer from './components/side_drawer/side_drawer.vue' |
||||
import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue' |
||||
import MobileNav from './components/mobile_nav/mobile_nav.vue' |
||||
import DesktopNav from './components/desktop_nav/desktop_nav.vue' |
||||
import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue' |
||||
import EditStatusModal from './components/edit_status_modal/edit_status_modal.vue' |
||||
import PostStatusModal from './components/post_status_modal/post_status_modal.vue' |
||||
import StatusHistoryModal from './components/status_history_modal/status_history_modal.vue' |
||||
import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue' |
||||
import { windowWidth, windowHeight } from './services/window_utils/window_utils' |
||||
import { mapGetters } from 'vuex' |
||||
import { defineAsyncComponent } from 'vue' |
||||
|
||||
export default { |
||||
name: 'app', |
||||
components: { |
||||
UserPanel, |
||||
NavPanel, |
||||
Notifications: defineAsyncComponent(() => import('./components/notifications/notifications.vue')), |
||||
InstanceSpecificPanel, |
||||
FeaturesPanel, |
||||
WhoToFollowPanel, |
||||
ShoutPanel, |
||||
MediaModal, |
||||
SideDrawer, |
||||
MobilePostStatusButton, |
||||
MobileNav, |
||||
DesktopNav, |
||||
SettingsModal: defineAsyncComponent(() => import('./components/settings_modal/settings_modal.vue')), |
||||
UpdateNotification: defineAsyncComponent(() => import('./components/update_notification/update_notification.vue')), |
||||
UserReportingModal, |
||||
PostStatusModal, |
||||
EditStatusModal, |
||||
StatusHistoryModal, |
||||
GlobalNoticeList |
||||
}, |
||||
data: () => ({ |
||||
mobileActivePanel: 'timeline' |
||||
}), |
||||
created () { |
||||
// Load the locale from the storage
|
||||
const val = this.$store.getters.mergedConfig.interfaceLanguage |
||||
this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val }) |
||||
window.addEventListener('resize', this.updateMobileState) |
||||
}, |
||||
unmounted () { |
||||
window.removeEventListener('resize', this.updateMobileState) |
||||
}, |
||||
computed: { |
||||
classes () { |
||||
return [ |
||||
{ |
||||
'-reverse': this.reverseLayout, |
||||
'-no-sticky-headers': this.noSticky, |
||||
'-has-new-post-button': this.newPostButtonShown |
||||
}, |
||||
'-' + this.layoutType |
||||
] |
||||
}, |
||||
navClasses () { |
||||
const { navbarColumnStretch } = this.$store.getters.mergedConfig |
||||
return [ |
||||
'-' + this.layoutType, |
||||
...(navbarColumnStretch ? ['-column-stretch'] : []) |
||||
] |
||||
}, |
||||
currentUser () { return this.$store.state.users.currentUser }, |
||||
userBackground () { return this.currentUser.background_image }, |
||||
instanceBackground () { |
||||
return this.mergedConfig.hideInstanceWallpaper |
||||
? null |
||||
: this.$store.state.instance.background |
||||
}, |
||||
background () { return this.userBackground || this.instanceBackground }, |
||||
bgStyle () { |
||||
if (this.background) { |
||||
return { |
||||
'--body-background-image': `url(${this.background})` |
||||
} |
||||
} |
||||
}, |
||||
shout () { return this.$store.state.shout.joined }, |
||||
suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled }, |
||||
showInstanceSpecificPanel () { |
||||
return this.$store.state.instance.showInstanceSpecificPanel && |
||||
!this.$store.getters.mergedConfig.hideISP && |
||||
this.$store.state.instance.instanceSpecificPanelContent |
||||
}, |
||||
isChats () { |
||||
return this.$route.name === 'chat' || this.$route.name === 'chats' |
||||
}, |
||||
isListEdit () { |
||||
return this.$route.name === 'lists-edit' |
||||
}, |
||||
newPostButtonShown () { |
||||
if (this.isChats) return false |
||||
if (this.isListEdit) return false |
||||
return this.$store.getters.mergedConfig.alwaysShowNewPostButton || this.layoutType === 'mobile' |
||||
}, |
||||
showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }, |
||||
editingAvailable () { return this.$store.state.instance.editingAvailable }, |
||||
shoutboxPosition () { |
||||
return this.$store.getters.mergedConfig.alwaysShowNewPostButton || false |
||||
}, |
||||
hideShoutbox () { |
||||
return this.$store.getters.mergedConfig.hideShoutbox |
||||
}, |
||||
hideShoutboxTheory () { |
||||
return this.$store.getters.mergedConfig.hideShoutboxTheory |
||||
}, |
||||
layoutType () { return this.$store.state.interface.layoutType }, |
||||
privateMode () { return this.$store.state.instance.private }, |
||||
reverseLayout () { |
||||
const { thirdColumnMode, sidebarRight: reverseSetting } = this.$store.getters.mergedConfig |
||||
if (this.layoutType !== 'wide') { |
||||
return reverseSetting |
||||
} else { |
||||
return thirdColumnMode === 'notifications' ? reverseSetting : !reverseSetting |
||||
} |
||||
}, |
||||
noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders }, |
||||
showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars }, |
||||
...mapGetters(['mergedConfig']) |
||||
}, |
||||
methods: { |
||||
updateMobileState () { |
||||
this.$store.dispatch('setLayoutWidth', windowWidth()) |
||||
this.$store.dispatch('setLayoutHeight', windowHeight()) |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,916 @@ |
||||
// stylelint-disable rscss/class-format |
||||
/* stylelint-disable no-descending-specificity */ |
||||
@import "./variables"; |
||||
@import "./panel"; |
||||
|
||||
:root { |
||||
--navbar-height: 3.5rem; |
||||
--post-line-height: 1.4; |
||||
// Z-Index stuff |
||||
--ZI_media_modal: 9000; |
||||
--ZI_modals_popovers: 8500; |
||||
--ZI_modals: 8000; |
||||
--ZI_navbar_popovers: 7500; |
||||
--ZI_navbar: 7000; |
||||
--ZI_popovers: 6000; |
||||
} |
||||
|
||||
html { |
||||
font-size: 14px; |
||||
// overflow-x: clip causes my browser's tab to crash with SIGILL lul |
||||
} |
||||
|
||||
body { |
||||
font-family: sans-serif; |
||||
font-family: var(--interfaceFont, sans-serif); |
||||
margin: 0; |
||||
color: $fallback--text; |
||||
color: var(--text, $fallback--text); |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
overscroll-behavior-y: none; |
||||
overflow-x: clip; |
||||
overflow-y: scroll; |
||||
|
||||
&.hidden { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
// ## Custom scrollbars |
||||
// Only show custom scrollbars on devices which |
||||
// have a cursor/pointer to operate them |
||||
@media (any-pointer: fine) { |
||||
* { |
||||
scrollbar-color: var(--btn) transparent; |
||||
|
||||
&::-webkit-scrollbar { |
||||
background: transparent; |
||||
} |
||||
|
||||
&::-webkit-scrollbar-button, |
||||
&::-webkit-scrollbar-thumb { |
||||
background-color: var(--btn); |
||||
box-shadow: var(--buttonShadow); |
||||
border-radius: var(--btnRadius); |
||||
} |
||||
|
||||
// horizontal/vertical/increment/decrement are webkit-specific stuff |
||||
// that indicates whether we're affecting vertical scrollbar, increase button etc |
||||
// stylelint-disable selector-pseudo-class-no-unknown |
||||
&::-webkit-scrollbar-button { |
||||
--___bgPadding: 2px; |
||||
|
||||
color: var(--btnText); |
||||
background-repeat: no-repeat, no-repeat; |
||||
|
||||
&:horizontal { |
||||
background-size: 50% calc(50% - var(--___bgPadding)), 50% calc(50% - var(--___bgPadding)); |
||||
|
||||
&:increment { |
||||
background-image: |
||||
linear-gradient(45deg, var(--btnText) 50%, transparent 51%), |
||||
linear-gradient(-45deg, transparent 50%, var(--btnText) 51%); |
||||
background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding); |
||||
} |
||||
|
||||
&:decrement { |
||||
background-image: |
||||
linear-gradient(45deg, transparent 50%, var(--btnText) 51%), |
||||
linear-gradient(-45deg, var(--btnText) 50%, transparent 51%); |
||||
background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding); |
||||
} |
||||
} |
||||
|
||||
&:vertical { |
||||
background-size: calc(50% - var(--___bgPadding)) 50%, calc(50% - var(--___bgPadding)) 50%; |
||||
|
||||
&:increment { |
||||
background-image: |
||||
linear-gradient(-45deg, transparent 50%, var(--btnText) 51%), |
||||
linear-gradient(45deg, transparent 50%, var(--btnText) 51%); |
||||
background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%; |
||||
} |
||||
|
||||
&:decrement { |
||||
background-image: |
||||
linear-gradient(-45deg, var(--btnText) 50%, transparent 51%), |
||||
linear-gradient(45deg, var(--btnText) 50%, transparent 51%); |
||||
background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%; |
||||
} |
||||
} |
||||
} |
||||
// stylelint-enable selector-pseudo-class-no-unknown |
||||
} |
||||
// Body should have background to scrollbar otherwise it will use white (body color?) |
||||
html { |
||||
scrollbar-color: var(--selectedMenu) var(--wallpaper); |
||||
background: var(--wallpaper); |
||||
} |
||||
} |
||||
|
||||
a { |
||||
text-decoration: none; |
||||
color: $fallback--link; |
||||
color: var(--link, $fallback--link); |
||||
} |
||||
|
||||
h4 { |
||||
margin: 0; |
||||
} |
||||
|
||||
.iconLetter { |
||||
display: inline-block; |
||||
text-align: center; |
||||
font-weight: 1000; |
||||
} |
||||
|
||||
i[class*="icon-"], |
||||
.svg-inline--fa, |
||||
.iconLetter { |
||||
color: $fallback--icon; |
||||
color: var(--icon, $fallback--icon); |
||||
} |
||||
|
||||
.button-unstyled:hover, |
||||
a:hover { |
||||
> i[class*="icon-"], |
||||
> .svg-inline--fa, |
||||
> .iconLetter { |
||||
color: var(--text); |
||||
} |
||||
} |
||||
|
||||
nav { |
||||
z-index: var(--ZI_navbar); |
||||
background-color: $fallback--fg; |
||||
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; |
||||
height: var(--navbar-height); |
||||
position: fixed; |
||||
} |
||||
|
||||
#sidebar { |
||||
grid-area: sidebar; |
||||
} |
||||
|
||||
#modal { |
||||
position: absolute; |
||||
z-index: var(--ZI_modals); |
||||
} |
||||
|
||||
.column.-scrollable { |
||||
top: var(--navbar-height); |
||||
position: sticky; |
||||
} |
||||
|
||||
#main-scroller { |
||||
grid-area: content; |
||||
position: relative; |
||||
} |
||||
|
||||
#notifs-column { |
||||
grid-area: notifs; |
||||
} |
||||
|
||||
.app-bg-wrapper { |
||||
position: fixed; |
||||
height: 100%; |
||||
top: var(--navbar-height); |
||||
z-index: -1000; |
||||
left: 0; |
||||
right: -20px; |
||||
background-size: cover; |
||||
background-repeat: no-repeat; |
||||
background-color: var(--wallpaper); |
||||
background-image: var(--body-background-image); |
||||
background-position: 50%; |
||||
} |
||||
|
||||
.underlay { |
||||
grid-column: 1 / span 3; |
||||
grid-row: 1 / 1; |
||||
pointer-events: none; |
||||
background-color: rgb(0 0 0 / 15%); |
||||
background-color: var(--underlay, rgb(0 0 0 / 15%)); |
||||
z-index: -1000; |
||||
} |
||||
|
||||
.app-layout { |
||||
--miniColumn: 25rem; |
||||
--maxiColumn: 45rem; |
||||
--columnGap: 1em; |
||||
--status-margin: 0.75em; |
||||
--effectiveSidebarColumnWidth: minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn))); |
||||
--effectiveNotifsColumnWidth: minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn))); |
||||
--effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn))); |
||||
|
||||
position: relative; |
||||
display: grid; |
||||
grid-template-columns: |
||||
var(--effectiveSidebarColumnWidth) |
||||
var(--effectiveContentColumnWidth); |
||||
grid-template-areas: "sidebar content"; |
||||
grid-template-rows: 1fr; |
||||
box-sizing: border-box; |
||||
margin: 0 auto; |
||||
align-content: flex-start; |
||||
flex-wrap: wrap; |
||||
justify-content: center; |
||||
min-height: 100vh; |
||||
overflow-x: clip; |
||||
|
||||
.column { |
||||
--___columnMargin: var(--columnGap); |
||||
|
||||
display: grid; |
||||
grid-template-columns: 100%; |
||||
box-sizing: border-box; |
||||
grid-row: 1 / 1; |
||||
margin: 0 calc(var(--___columnMargin) / 2); |
||||
padding: calc(var(--___columnMargin)) 0; |
||||
row-gap: var(--___columnMargin); |
||||
align-content: start; |
||||
|
||||
&:not(.-scrollable) { |
||||
margin-top: var(--navbar-height); |
||||
} |
||||
|
||||
&:hover { |
||||
z-index: 2; |
||||
} |
||||
|
||||
&.-full-height { |
||||
margin-bottom: 0; |
||||
padding-top: 0; |
||||
padding-bottom: 0; |
||||
} |
||||
|
||||
&.-scrollable { |
||||
--___paddingIncrease: calc(var(--columnGap) / 2); |
||||
|
||||
position: sticky; |
||||
top: var(--navbar-height); |
||||
max-height: calc(100vh - var(--navbar-height)); |
||||
overflow-y: auto; |
||||
overflow-x: hidden; |
||||
margin-left: calc(var(--___paddingIncrease) * -1); |
||||
padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2); |
||||
|
||||
// On browsers that don't support hiding scrollbars we enforce "show scrolbars" mode |
||||
// might implement old style of hiding scrollbars later if there's demand |
||||
@supports (scrollbar-width: none) or (-webkit-text-fill-color: initial) { |
||||
&:not(.-show-scrollbar) { |
||||
scrollbar-width: none; |
||||
margin-right: calc(var(--___paddingIncrease) * -1); |
||||
padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2); |
||||
|
||||
&::-webkit-scrollbar { |
||||
display: block; |
||||
width: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.panel-heading.-sticky { |
||||
top: calc(var(--columnGap) / -1); |
||||
} |
||||
} |
||||
} |
||||
|
||||
&.-has-new-post-button { |
||||
.column { |
||||
padding-bottom: 10rem; |
||||
} |
||||
} |
||||
|
||||
&.-no-sticky-headers { |
||||
.column { |
||||
.panel-heading.-sticky { |
||||
position: relative; |
||||
top: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.column-inner { |
||||
display: grid; |
||||
grid-template-columns: 100%; |
||||
box-sizing: border-box; |
||||
row-gap: 1em; |
||||
align-content: start; |
||||
} |
||||
|
||||
&.-reverse:not(.-wide, .-mobile) { |
||||
grid-template-columns: |
||||
var(--effectiveContentColumnWidth) |
||||
var(--effectiveSidebarColumnWidth); |
||||
grid-template-areas: "content sidebar"; |
||||
} |
||||
|
||||
&.-wide { |
||||
grid-template-columns: |
||||
var(--effectiveSidebarColumnWidth) |
||||
var(--effectiveContentColumnWidth) |
||||
var(--effectiveNotifsColumnWidth); |
||||
grid-template-areas: "sidebar content notifs"; |
||||
|
||||
&.-reverse { |
||||
grid-template-columns: |
||||
var(--effectiveNotifsColumnWidth) |
||||
var(--effectiveContentColumnWidth) |
||||
var(--effectiveSidebarColumnWidth); |
||||
grid-template-areas: "notifs content sidebar"; |
||||
} |
||||
} |
||||
|
||||
&.-mobile { |
||||
grid-template-columns: 100vw; |
||||
grid-template-areas: "content"; |
||||
padding: 0; |
||||
|
||||
.column { |
||||
padding-top: 0; |
||||
margin: var(--navbar-height) 0 0 0; |
||||
} |
||||
|
||||
.panel-heading, |
||||
.panel-heading::after, |
||||
.panel-heading::before, |
||||
.panel, |
||||
.panel::after { |
||||
border-top-left-radius: 0; |
||||
border-top-right-radius: 0; |
||||
} |
||||
|
||||
#sidebar, |
||||
#notifs-column { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
&.-normal { |
||||
#notifs-column { |
||||
display: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.text-center { |
||||
text-align: center; |
||||
} |
||||
|
||||
.button-default { |
||||
user-select: none; |
||||
color: $fallback--text; |
||||
color: var(--btnText, $fallback--text); |
||||
background-color: $fallback--fg; |
||||
background-color: var(--btn, $fallback--fg); |
||||
border: none; |
||||
border-radius: $fallback--btnRadius; |
||||
border-radius: var(--btnRadius, $fallback--btnRadius); |
||||
cursor: pointer; |
||||
box-shadow: $fallback--buttonShadow; |
||||
box-shadow: var(--buttonShadow); |
||||
font-size: 1em; |
||||
font-family: sans-serif; |
||||
font-family: var(--interfaceFont, sans-serif); |
||||
|
||||
&.-sublime { |
||||
background: transparent; |
||||
} |
||||
|
||||
i[class*="icon-"], |
||||
.svg-inline--fa { |
||||
color: $fallback--text; |
||||
color: var(--btnText, $fallback--text); |
||||
} |
||||
|
||||
&::-moz-focus-inner { |
||||
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 { |
||||
cursor: not-allowed; |
||||
color: $fallback--text; |
||||
color: var(--btnDisabledText, $fallback--text); |
||||
background-color: $fallback--fg; |
||||
background-color: var(--btnDisabled, $fallback--fg); |
||||
|
||||
svg, |
||||
i { |
||||
color: $fallback--text; |
||||
color: var(--btnDisabledText, $fallback--text); |
||||
} |
||||
} |
||||
|
||||
&.toggled { |
||||
color: $fallback--text; |
||||
color: var(--btnToggledText, $fallback--text); |
||||
background-color: $fallback--fg; |
||||
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 { |
||||
// TODO: add better color variable |
||||
color: $fallback--text; |
||||
color: var(--alertErrorPanelText, $fallback--text); |
||||
background-color: $fallback--alertError; |
||||
background-color: var(--alertError, $fallback--alertError); |
||||
} |
||||
} |
||||
|
||||
.button-unstyled { |
||||
background: none; |
||||
border: none; |
||||
outline: none; |
||||
display: inline; |
||||
text-align: initial; |
||||
font-size: 100%; |
||||
font-family: inherit; |
||||
padding: 0; |
||||
line-height: unset; |
||||
cursor: pointer; |
||||
box-sizing: content-box; |
||||
color: inherit; |
||||
|
||||
&.-link { |
||||
color: $fallback--link; |
||||
color: var(--link, $fallback--link); |
||||
} |
||||
|
||||
&.-fullwidth { |
||||
width: 100%; |
||||
} |
||||
|
||||
&.-hover-highlight { |
||||
&:hover svg { |
||||
color: $fallback--lightText; |
||||
color: var(--lightText, $fallback--lightText); |
||||
} |
||||
} |
||||
} |
||||
|
||||
input, |
||||
textarea, |
||||
.input { |
||||
&.unstyled { |
||||
border-radius: 0; |
||||
background: none; |
||||
box-shadow: none; |
||||
height: unset; |
||||
} |
||||
|
||||
--_padding: 0.5em; |
||||
|
||||
border: none; |
||||
border-radius: $fallback--inputRadius; |
||||
border-radius: var(--inputRadius, $fallback--inputRadius); |
||||
box-shadow: |
||||
0 1px 0 0 rgb(0 0 0 / 20%) inset, |
||||
0 -1px 0 0 rgb(255 255 255 / 20%) inset, |
||||
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; |
||||
margin: 0; |
||||
box-sizing: border-box; |
||||
display: inline-block; |
||||
position: relative; |
||||
line-height: 2; |
||||
hyphens: none; |
||||
padding: 0 var(--_padding); |
||||
|
||||
&:disabled, |
||||
&[disabled="disabled"], |
||||
&.disabled { |
||||
cursor: not-allowed; |
||||
opacity: 0.5; |
||||
} |
||||
|
||||
&[type="range"] { |
||||
background: none; |
||||
border: none; |
||||
margin: 0; |
||||
box-shadow: none; |
||||
flex: 1; |
||||
} |
||||
|
||||
&[type="radio"] { |
||||
display: none; |
||||
|
||||
&:checked + label::before { |
||||
box-shadow: 0 0 2px black inset, 0 0 0 4px $fallback--fg inset; |
||||
box-shadow: var(--inputShadow), 0 0 0 4px var(--fg, $fallback--fg) inset; |
||||
background-color: var(--accent, $fallback--link); |
||||
} |
||||
|
||||
&:disabled { |
||||
&, |
||||
& + label, |
||||
& + label::before { |
||||
opacity: 0.5; |
||||
} |
||||
} |
||||
|
||||
+ label::before { |
||||
flex-shrink: 0; |
||||
display: inline-block; |
||||
content: ""; |
||||
transition: box-shadow 200ms; |
||||
width: 1.1em; |
||||
height: 1.1em; |
||||
border-radius: 100%; // Radio buttons should always be circle |
||||
box-shadow: 0 0 2px black inset; |
||||
box-shadow: var(--inputShadow); |
||||
margin-right: 0.5em; |
||||
background-color: $fallback--fg; |
||||
background-color: var(--input, $fallback--fg); |
||||
vertical-align: top; |
||||
text-align: center; |
||||
line-height: 1.1; |
||||
font-size: 1.1em; |
||||
box-sizing: border-box; |
||||
color: transparent; |
||||
overflow: hidden; |
||||
} |
||||
} |
||||
|
||||
&[type="checkbox"] { |
||||
&:checked + label::before { |
||||
color: $fallback--text; |
||||
color: var(--inputText, $fallback--text); |
||||
} |
||||
|
||||
&:disabled { |
||||
&, |
||||
& + label, |
||||
& + label::before { |
||||
opacity: 0.5; |
||||
} |
||||
} |
||||
|
||||
+ label::before { |
||||
flex-shrink: 0; |
||||
display: inline-block; |
||||
content: "✓"; |
||||
transition: color 200ms; |
||||
width: 1.1em; |
||||
height: 1.1em; |
||||
border-radius: $fallback--checkboxRadius; |
||||
border-radius: var(--checkboxRadius, $fallback--checkboxRadius); |
||||
box-shadow: 0 0 2px black inset; |
||||
box-shadow: var(--inputShadow); |
||||
margin-right: 0.5em; |
||||
background-color: $fallback--fg; |
||||
background-color: var(--input, $fallback--fg); |
||||
vertical-align: top; |
||||
text-align: center; |
||||
line-height: 1.1; |
||||
font-size: 1.1em; |
||||
box-sizing: border-box; |
||||
color: transparent; |
||||
overflow: hidden; |
||||
} |
||||
} |
||||
|
||||
&.resize-height { |
||||
resize: vertical; |
||||
} |
||||
} |
||||
|
||||
// Textareas should have stock line-height + vertical padding instead of huge line-height |
||||
textarea { |
||||
padding: var(--_padding); |
||||
line-height: var(--post-line-height); |
||||
} |
||||
|
||||
option { |
||||
color: $fallback--text; |
||||
color: var(--text, $fallback--text); |
||||
background-color: $fallback--bg; |
||||
background-color: var(--bg, $fallback--bg); |
||||
} |
||||
|
||||
.hide-number-spinner { |
||||
appearance: textfield; |
||||
|
||||
&[type="number"]::-webkit-inner-spin-button, |
||||
&[type="number"]::-webkit-outer-spin-button { |
||||
opacity: 0; |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
.cards-list { |
||||
list-style: none; |
||||
display: grid; |
||||
grid-auto-flow: row dense; |
||||
grid-template-columns: 1fr 1fr; |
||||
|
||||
li { |
||||
border: 1px solid var(--border); |
||||
border-radius: var(--inputRadius); |
||||
padding: 0.5em; |
||||
margin: 0.25em; |
||||
} |
||||
} |
||||
|
||||
.btn-block { |
||||
display: block; |
||||
width: 100%; |
||||
} |
||||
|
||||
.btn-group { |
||||
position: relative; |
||||
display: inline-flex; |
||||
vertical-align: middle; |
||||
|
||||
button, |
||||
.button-dropdown { |
||||
position: relative; |
||||
flex: 1 1 auto; |
||||
|
||||
&:not(:last-child), |
||||
&:not(:last-child) .button-default { |
||||
border-top-right-radius: 0; |
||||
border-bottom-right-radius: 0; |
||||
} |
||||
|
||||
&:not(:first-child), |
||||
&:not(:first-child) .button-default { |
||||
border-top-left-radius: 0; |
||||
border-bottom-left-radius: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.fa { |
||||
color: grey; |
||||
} |
||||
|
||||
.mobile-shown { |
||||
display: none; |
||||
} |
||||
|
||||
.badge { |
||||
box-sizing: border-box; |
||||
display: inline-block; |
||||
border-radius: 99px; |
||||
max-width: 10em; |
||||
min-width: 1.7em; |
||||
height: 1.3em; |
||||
padding: 0.15em; |
||||
vertical-align: middle; |
||||
font-weight: normal; |
||||
font-style: normal; |
||||
font-size: 0.9em; |
||||
line-height: 1; |
||||
text-align: center; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
|
||||
&.badge-notification { |
||||
background-color: $fallback--cRed; |
||||
background-color: var(--badgeNotification, $fallback--cRed); |
||||
color: white; |
||||
color: var(--badgeNotificationText, white); |
||||
} |
||||
} |
||||
|
||||
.alert { |
||||
margin: 0 0.35em; |
||||
padding: 0 0.25em; |
||||
border-radius: $fallback--tooltipRadius; |
||||
border-radius: var(--tooltipRadius, $fallback--tooltipRadius); |
||||
|
||||
&.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 { |
||||
color: $fallback--faint; |
||||
color: var(--faint, $fallback--faint); |
||||
} |
||||
|
||||
.faint-link { |
||||
color: $fallback--faint; |
||||
color: var(--faint, $fallback--faint); |
||||
|
||||
&:hover { |
||||
text-decoration: underline; |
||||
} |
||||
} |
||||
|
||||
.visibility-notice { |
||||
padding: 0.5em; |
||||
border: 1px solid $fallback--faint; |
||||
border: 1px solid var(--faint, $fallback--faint); |
||||
border-radius: $fallback--inputRadius; |
||||
border-radius: var(--inputRadius, $fallback--inputRadius); |
||||
} |
||||
|
||||
.notice-dismissible { |
||||
padding-right: 4rem; |
||||
position: relative; |
||||
|
||||
.dismiss { |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
padding: 0.5em; |
||||
color: inherit; |
||||
} |
||||
} |
||||
|
||||
.fa-scale-110 { |
||||
&.svg-inline--fa, |
||||
&.iconLetter { |
||||
font-size: 1.1em; |
||||
} |
||||
} |
||||
|
||||
.fa-old-padding { |
||||
&.iconLetter, |
||||
&.svg-inline--fa, |
||||
&-layer { |
||||
padding: 0 0.3em; |
||||
} |
||||
} |
||||
|
||||
.veryfaint { |
||||
opacity: 0.25; |
||||
} |
||||
|
||||
.login-hint { |
||||
text-align: center; |
||||
|
||||
@media all and (min-width: 801px) { |
||||
display: none; |
||||
} |
||||
|
||||
a { |
||||
display: inline-block; |
||||
padding: 1em 0; |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
.btn.button-default { |
||||
min-height: 2em; |
||||
} |
||||
|
||||
.new-status-notification { |
||||
position: relative; |
||||
font-size: 1.1em; |
||||
z-index: 1; |
||||
flex: 1; |
||||
} |
||||
|
||||
@media all and (max-width: 800px) { |
||||
.mobile-hidden { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
@keyframes spin { |
||||
0% { |
||||
transform: rotate(0deg); |
||||
} |
||||
|
||||
100% { |
||||
transform: rotate(359deg); |
||||
} |
||||
} |
||||
|
||||
@keyframes shakeError { |
||||
0% { |
||||
transform: translateX(0); |
||||
} |
||||
|
||||
15% { |
||||
transform: translateX(0.375rem); |
||||
} |
||||
|
||||
30% { |
||||
transform: translateX(-0.375rem); |
||||
} |
||||
|
||||
45% { |
||||
transform: translateX(0.375rem); |
||||
} |
||||
|
||||
60% { |
||||
transform: translateX(-0.375rem); |
||||
} |
||||
|
||||
75% { |
||||
transform: translateX(0.375rem); |
||||
} |
||||
|
||||
90% { |
||||
transform: translateX(-0.375rem); |
||||
} |
||||
|
||||
100% { |
||||
transform: translateX(0); |
||||
} |
||||
} |
||||
|
||||
// Vue transitions |
||||
.fade-enter-active, |
||||
.fade-leave-active { |
||||
transition: opacity 0.3s; |
||||
} |
||||
|
||||
.fade-enter-from, |
||||
.fade-leave-active { |
||||
opacity: 0; |
||||
} |
||||
/* stylelint-enable no-descending-specificity */ |
||||
|
||||
.visible-for-screenreader-only { |
||||
display: block; |
||||
width: 1px; |
||||
height: 1px; |
||||
margin: -1px; |
||||
overflow: hidden; |
||||
visibility: visible; |
||||
clip: rect(0 0 0 0); |
||||
padding: 0; |
||||
position: absolute; |
||||
} |
||||
@ -0,0 +1,80 @@ |
||||
<template> |
||||
<div |
||||
id="app-loaded" |
||||
:style="bgStyle" |
||||
> |
||||
<div |
||||
id="app_bg_wrapper" |
||||
class="app-bg-wrapper" |
||||
/> |
||||
<MobileNav v-if="layoutType === 'mobile'" /> |
||||
<DesktopNav |
||||
v-else |
||||
:class="navClasses" |
||||
/> |
||||
<Notifications v-if="currentUser" /> |
||||
<div |
||||
id="content" |
||||
class="app-layout container" |
||||
:class="classes" |
||||
> |
||||
<div class="underlay" /> |
||||
<div |
||||
id="sidebar" |
||||
class="column -scrollable" |
||||
:class="{ '-show-scrollbar': showScrollbars }" |
||||
> |
||||
<user-panel /> |
||||
<template v-if="layoutType !== 'mobile'"> |
||||
<nav-panel /> |
||||
<instance-specific-panel v-if="showInstanceSpecificPanel" /> |
||||
<features-panel v-if="!currentUser && showFeaturesPanel" /> |
||||
<who-to-follow-panel v-if="currentUser && suggestionsEnabled" /> |
||||
<div id="notifs-sidebar" /> |
||||
</template> |
||||
</div> |
||||
<main |
||||
id="main-scroller" |
||||
class="column main" |
||||
:class="{ '-full-height': isChats || isListEdit }" |
||||
> |
||||
<div |
||||
v-if="!currentUser" |
||||
class="login-hint panel panel-default" |
||||
> |
||||
<router-link |
||||
:to="{ name: 'login' }" |
||||
class="panel-body" |
||||
> |
||||
{{ $t("login.hint") }} |
||||
</router-link> |
||||
</div> |
||||
<router-view /> |
||||
</main> |
||||
<div |
||||
id="notifs-column" |
||||
class="column -scrollable" |
||||
:class="{ '-show-scrollbar': showScrollbars }" |
||||
/> |
||||
</div> |
||||
<MediaModal /> |
||||
<shout-panel |
||||
v-if="currentUser && shout && !hideShoutbox" |
||||
:floating="true" |
||||
:hide-theory="hideShoutboxTheory" |
||||
class="floating-shout mobile-hidden" |
||||
:class="{ '-left': shoutboxPosition }" |
||||
/> |
||||
<MobilePostStatusButton /> |
||||
<UserReportingModal /> |
||||
<PostStatusModal /> |
||||
<EditStatusModal v-if="editingAvailable" /> |
||||
<StatusHistoryModal v-if="editingAvailable" /> |
||||
<SettingsModal /> |
||||
<UpdateNotification /> |
||||
<GlobalNoticeList /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script src="./App.js"></script> |
||||
<style lang="scss" src="./App.scss"></style> |
||||
@ -0,0 +1,18 @@ |
||||
@mixin unfocused-style { |
||||
@content; |
||||
|
||||
&:focus:not(:focus-visible, :hover) { |
||||
@content; |
||||
} |
||||
} |
||||
|
||||
@mixin focused-style { |
||||
&:hover, |
||||
&:focus { |
||||
@content; |
||||
} |
||||
|
||||
&:focus-visible { |
||||
@content; |
||||
} |
||||
} |
||||
@ -0,0 +1,36 @@ |
||||
$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; |
||||
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 396 KiB |
|
After Width: | Height: | Size: 521 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 23 KiB |
@ -0,0 +1,419 @@ |
||||
import { createApp } from 'vue' |
||||
import { createRouter, createWebHistory } from 'vue-router' |
||||
import vClickOutside from 'click-outside-vue3' |
||||
import VueVirtualScroller from 'vue-virtual-scroller' |
||||
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css' |
||||
|
||||
import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome' |
||||
|
||||
import App from '../App.vue' |
||||
import routes from './routes' |
||||
import VBodyScrollLock from 'src/directives/body_scroll_lock' |
||||
|
||||
import { windowWidth, windowHeight } from '../services/window_utils/window_utils' |
||||
import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js' |
||||
import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js' |
||||
import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js' |
||||
import { applyTheme, applyConfig } from '../services/style_setter/style_setter.js' |
||||
import FaviconService from '../services/favicon_service/favicon_service.js' |
||||
|
||||
let staticInitialResults = null |
||||
|
||||
const parsedInitialResults = () => { |
||||
if (!document.getElementById('initial-results')) { |
||||
return null |
||||
} |
||||
if (!staticInitialResults) { |
||||
staticInitialResults = JSON.parse(document.getElementById('initial-results').textContent) |
||||
} |
||||
return staticInitialResults |
||||
} |
||||
|
||||
const decodeUTF8Base64 = (data) => { |
||||
const rawData = atob(data) |
||||
const array = Uint8Array.from([...rawData].map((char) => char.charCodeAt(0))) |
||||
const text = new TextDecoder().decode(array) |
||||
return text |
||||
} |
||||
|
||||
const preloadFetch = async (request) => { |
||||
const data = parsedInitialResults() |
||||
if (!data || !data[request]) { |
||||
return window.fetch(request) |
||||
} |
||||
const decoded = decodeUTF8Base64(data[request]) |
||||
const requestData = JSON.parse(decoded) |
||||
return { |
||||
ok: true, |
||||
json: () => requestData, |
||||
text: () => requestData |
||||
} |
||||
} |
||||
|
||||
const getInstanceConfig = async ({ store }) => { |
||||
try { |
||||
const res = await preloadFetch('/api/v1/instance') |
||||
if (res.ok) { |
||||
const data = await res.json() |
||||
const textlimit = data.max_toot_chars |
||||
const vapidPublicKey = data.pleroma.vapid_public_key |
||||
|
||||
store.dispatch('setInstanceOption', { name: 'textlimit', value: textlimit }) |
||||
store.dispatch('setInstanceOption', { name: 'accountApprovalRequired', value: data.approval_required }) |
||||
store.dispatch('setInstanceOption', { name: 'birthdayRequired', value: !!data.pleroma.metadata.birthday_required }) |
||||
store.dispatch('setInstanceOption', { name: 'birthdayMinAge', value: data.pleroma.metadata.birthday_min_age || 0 }) |
||||
|
||||
if (vapidPublicKey) { |
||||
store.dispatch('setInstanceOption', { name: 'vapidPublicKey', value: vapidPublicKey }) |
||||
} |
||||
} else { |
||||
throw (res) |
||||
} |
||||
} catch (error) { |
||||
console.error('Could not load instance config, potentially fatal') |
||||
console.error(error) |
||||
} |
||||
} |
||||
|
||||
const getBackendProvidedConfig = async ({ store }) => { |
||||
try { |
||||
const res = await window.fetch('/api/pleroma/frontend_configurations') |
||||
if (res.ok) { |
||||
const data = await res.json() |
||||
return data.pleroma_fe |
||||
} else { |
||||
throw (res) |
||||
} |
||||
} catch (error) { |
||||
console.error('Could not load backend-provided frontend config, potentially fatal') |
||||
console.error(error) |
||||
} |
||||
} |
||||
|
||||
const getStaticConfig = async () => { |
||||
try { |
||||
const res = await window.fetch('/static/config.json') |
||||
if (res.ok) { |
||||
return res.json() |
||||
} else { |
||||
throw (res) |
||||
} |
||||
} catch (error) { |
||||
console.warn('Failed to load static/config.json, continuing without it.') |
||||
console.warn(error) |
||||
return {} |
||||
} |
||||
} |
||||
|
||||
const setSettings = async ({ apiConfig, staticConfig, store }) => { |
||||
const overrides = window.___pleromafe_dev_overrides || {} |
||||
const env = window.___pleromafe_mode.NODE_ENV |
||||
|
||||
// This takes static config and overrides properties that are present in apiConfig
|
||||
let config = {} |
||||
if (overrides.staticConfigPreference && env === 'development') { |
||||
console.warn('OVERRIDING API CONFIG WITH STATIC CONFIG') |
||||
config = Object.assign({}, apiConfig, staticConfig) |
||||
} else { |
||||
config = Object.assign({}, staticConfig, apiConfig) |
||||
} |
||||
|
||||
const copyInstanceOption = (name) => { |
||||
store.dispatch('setInstanceOption', { name, value: config[name] }) |
||||
} |
||||
|
||||
copyInstanceOption('nsfwCensorImage') |
||||
copyInstanceOption('background') |
||||
copyInstanceOption('hidePostStats') |
||||
copyInstanceOption('hideBotIndication') |
||||
copyInstanceOption('hideUserStats') |
||||
copyInstanceOption('hideFilteredStatuses') |
||||
copyInstanceOption('logo') |
||||
|
||||
store.dispatch('setInstanceOption', { |
||||
name: 'logoMask', |
||||
value: typeof config.logoMask === 'undefined' |
||||
? true |
||||
: config.logoMask |
||||
}) |
||||
|
||||
store.dispatch('setInstanceOption', { |
||||
name: 'logoMargin', |
||||
value: typeof config.logoMargin === 'undefined' |
||||
? 0 |
||||
: config.logoMargin |
||||
}) |
||||
copyInstanceOption('logoLeft') |
||||
store.commit('authFlow/setInitialStrategy', config.loginMethod) |
||||
|
||||
copyInstanceOption('redirectRootNoLogin') |
||||
copyInstanceOption('redirectRootLogin') |
||||
copyInstanceOption('showInstanceSpecificPanel') |
||||
copyInstanceOption('minimalScopesMode') |
||||
copyInstanceOption('hideMutedPosts') |
||||
copyInstanceOption('collapseMessageWithSubject') |
||||
copyInstanceOption('scopeCopy') |
||||
copyInstanceOption('subjectLineBehavior') |
||||
copyInstanceOption('postContentType') |
||||
copyInstanceOption('alwaysShowSubjectInput') |
||||
copyInstanceOption('showFeaturesPanel') |
||||
copyInstanceOption('hideSitename') |
||||
copyInstanceOption('sidebarRight') |
||||
|
||||
return store.dispatch('setTheme', config.theme) |
||||
} |
||||
|
||||
const getTOS = async ({ store }) => { |
||||
try { |
||||
const res = await window.fetch('/static/terms-of-service.html') |
||||
if (res.ok) { |
||||
const html = await res.text() |
||||
store.dispatch('setInstanceOption', { name: 'tos', value: html }) |
||||
} else { |
||||
throw (res) |
||||
} |
||||
} catch (e) { |
||||
console.warn("Can't load TOS") |
||||
console.warn(e) |
||||
} |
||||
} |
||||
|
||||
const getInstancePanel = async ({ store }) => { |
||||
try { |
||||
const res = await preloadFetch('/instance/panel.html') |
||||
if (res.ok) { |
||||
const html = await res.text() |
||||
store.dispatch('setInstanceOption', { name: 'instanceSpecificPanelContent', value: html }) |
||||
} else { |
||||
throw (res) |
||||
} |
||||
} catch (e) { |
||||
console.warn("Can't load instance panel") |
||||
console.warn(e) |
||||
} |
||||
} |
||||
|
||||
const getStickers = async ({ store }) => { |
||||
try { |
||||
const res = await window.fetch('/static/stickers.json') |
||||
if (res.ok) { |
||||
const values = await res.json() |
||||
const stickers = (await Promise.all( |
||||
Object.entries(values).map(async ([name, path]) => { |
||||
const resPack = await window.fetch(path + 'pack.json') |
||||
let meta = {} |
||||
if (resPack.ok) { |
||||
meta = await resPack.json() |
||||
} |
||||
return { |
||||
pack: name, |
||||
path, |
||||
meta |
||||
} |
||||
}) |
||||
)).sort((a, b) => { |
||||
return a.meta.title.localeCompare(b.meta.title) |
||||
}) |
||||
store.dispatch('setInstanceOption', { name: 'stickers', value: stickers }) |
||||
} else { |
||||
throw (res) |
||||
} |
||||
} catch (e) { |
||||
console.warn("Can't load stickers") |
||||
console.warn(e) |
||||
} |
||||
} |
||||
|
||||
const getAppSecret = async ({ store }) => { |
||||
const { state, commit } = store |
||||
const { oauth, instance } = state |
||||
return getOrCreateApp({ ...oauth, instance: instance.server, commit }) |
||||
.then((app) => getClientToken({ ...app, instance: instance.server })) |
||||
.then((token) => { |
||||
commit('setAppToken', token.access_token) |
||||
commit('setBackendInteractor', backendInteractorService(store.getters.getToken())) |
||||
}) |
||||
} |
||||
|
||||
const resolveStaffAccounts = ({ store, accounts }) => { |
||||
const nicknames = accounts.map(uri => uri.split('/').pop()) |
||||
store.dispatch('setInstanceOption', { name: 'staffAccounts', value: nicknames }) |
||||
} |
||||
|
||||
const getNodeInfo = async ({ store }) => { |
||||
try { |
||||
const res = await preloadFetch('/nodeinfo/2.0.json') |
||||
if (res.ok) { |
||||
const data = await res.json() |
||||
const metadata = data.metadata |
||||
const features = metadata.features |
||||
store.dispatch('setInstanceOption', { name: 'name', value: metadata.nodeName }) |
||||
store.dispatch('setInstanceOption', { name: 'registrationOpen', value: data.openRegistrations }) |
||||
store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') }) |
||||
store.dispatch('setInstanceOption', { name: 'safeDM', value: features.includes('safe_dm_mentions') }) |
||||
store.dispatch('setInstanceOption', { name: 'shoutAvailable', value: features.includes('chat') }) |
||||
store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') }) |
||||
store.dispatch('setInstanceOption', { name: 'pleromaCustomEmojiReactionsAvailable', value: features.includes('pleroma_custom_emoji_reactions') }) |
||||
store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') }) |
||||
store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') }) |
||||
store.dispatch('setInstanceOption', { name: 'editingAvailable', value: features.includes('editing') }) |
||||
store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits }) |
||||
store.dispatch('setInstanceOption', { name: 'mailerEnabled', value: metadata.mailerEnabled }) |
||||
store.dispatch('setInstanceOption', { name: 'quotingAvailable', value: features.includes('quote_posting') }) |
||||
|
||||
const uploadLimits = metadata.uploadLimits |
||||
store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadLimits.general) }) |
||||
store.dispatch('setInstanceOption', { name: 'avatarlimit', value: parseInt(uploadLimits.avatar) }) |
||||
store.dispatch('setInstanceOption', { name: 'backgroundlimit', value: parseInt(uploadLimits.background) }) |
||||
store.dispatch('setInstanceOption', { name: 'bannerlimit', value: parseInt(uploadLimits.banner) }) |
||||
store.dispatch('setInstanceOption', { name: 'fieldsLimits', value: metadata.fieldsLimits }) |
||||
|
||||
store.dispatch('setInstanceOption', { name: 'restrictedNicknames', value: metadata.restrictedNicknames }) |
||||
store.dispatch('setInstanceOption', { name: 'postFormats', value: metadata.postFormats }) |
||||
|
||||
const suggestions = metadata.suggestions |
||||
store.dispatch('setInstanceOption', { name: 'suggestionsEnabled', value: suggestions.enabled }) |
||||
store.dispatch('setInstanceOption', { name: 'suggestionsWeb', value: suggestions.web }) |
||||
|
||||
const software = data.software |
||||
store.dispatch('setInstanceOption', { name: 'backendVersion', value: software.version }) |
||||
store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: software.name === 'pleroma' }) |
||||
|
||||
const priv = metadata.private |
||||
store.dispatch('setInstanceOption', { name: 'private', value: priv }) |
||||
|
||||
const frontendVersion = window.___pleromafe_commit_hash |
||||
store.dispatch('setInstanceOption', { name: 'frontendVersion', value: frontendVersion }) |
||||
|
||||
const federation = metadata.federation |
||||
|
||||
store.dispatch('setInstanceOption', { |
||||
name: 'tagPolicyAvailable', |
||||
value: typeof federation.mrf_policies === 'undefined' |
||||
? false |
||||
: metadata.federation.mrf_policies.includes('TagPolicy') |
||||
}) |
||||
|
||||
store.dispatch('setInstanceOption', { name: 'federationPolicy', value: federation }) |
||||
store.dispatch('setInstanceOption', { |
||||
name: 'federating', |
||||
value: typeof federation.enabled === 'undefined' |
||||
? true |
||||
: federation.enabled |
||||
}) |
||||
|
||||
const accountActivationRequired = metadata.accountActivationRequired |
||||
store.dispatch('setInstanceOption', { name: 'accountActivationRequired', value: accountActivationRequired }) |
||||
|
||||
const accounts = metadata.staffAccounts |
||||
resolveStaffAccounts({ store, accounts }) |
||||
} else { |
||||
throw (res) |
||||
} |
||||
} catch (e) { |
||||
console.warn('Could not load nodeinfo') |
||||
console.warn(e) |
||||
} |
||||
} |
||||
|
||||
const setConfig = async ({ store }) => { |
||||
// apiConfig, staticConfig
|
||||
const configInfos = await Promise.all([getBackendProvidedConfig({ store }), getStaticConfig()]) |
||||
const apiConfig = configInfos[0] |
||||
const staticConfig = configInfos[1] |
||||
|
||||
await setSettings({ store, apiConfig, staticConfig }).then(getAppSecret({ store })) |
||||
} |
||||
|
||||
const checkOAuthToken = async ({ store }) => { |
||||
// eslint-disable-next-line no-async-promise-executor
|
||||
return new Promise(async (resolve, reject) => { |
||||
if (store.getters.getUserToken()) { |
||||
try { |
||||
await store.dispatch('loginUser', store.getters.getUserToken()) |
||||
} catch (e) { |
||||
console.error(e) |
||||
} |
||||
} |
||||
resolve() |
||||
}) |
||||
} |
||||
|
||||
const afterStoreSetup = async ({ store, i18n }) => { |
||||
store.dispatch('setLayoutWidth', windowWidth()) |
||||
store.dispatch('setLayoutHeight', windowHeight()) |
||||
|
||||
FaviconService.initFaviconService() |
||||
|
||||
const overrides = window.___pleromafe_dev_overrides || {} |
||||
const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin |
||||
store.dispatch('setInstanceOption', { name: 'server', value: server }) |
||||
|
||||
await setConfig({ store }) |
||||
|
||||
const { customTheme, customThemeSource } = store.state.config |
||||
const { theme } = store.state.instance |
||||
const customThemePresent = customThemeSource || customTheme |
||||
|
||||
if (customThemePresent) { |
||||
if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) { |
||||
applyTheme(customThemeSource) |
||||
} else { |
||||
applyTheme(customTheme) |
||||
} |
||||
} else if (theme) { |
||||
// do nothing, it will load asynchronously
|
||||
} else { |
||||
console.error('Failed to load any theme!') |
||||
} |
||||
|
||||
applyConfig(store.state.config) |
||||
|
||||
// Now we can try getting the server settings and logging in
|
||||
// Most of these are preloaded into the index.html so blocking is minimized
|
||||
await Promise.all([ |
||||
checkOAuthToken({ store }), |
||||
getInstancePanel({ store }), |
||||
getNodeInfo({ store }), |
||||
getInstanceConfig({ store }) |
||||
]) |
||||
|
||||
// Start fetching things that don't need to block the UI
|
||||
store.dispatch('fetchMutes') |
||||
store.dispatch('startFetchingAnnouncements') |
||||
getTOS({ store }) |
||||
getStickers({ store }) |
||||
|
||||
const router = createRouter({ |
||||
history: createWebHistory(), |
||||
routes: routes(store), |
||||
scrollBehavior: (to, _from, savedPosition) => { |
||||
if (to.matched.some(m => m.meta.dontScroll)) { |
||||
return false |
||||
} |
||||
return savedPosition || { left: 0, top: 0 } |
||||
} |
||||
}) |
||||
|
||||
const app = createApp(App) |
||||
|
||||
app.use(router) |
||||
app.use(store) |
||||
app.use(i18n) |
||||
|
||||
app.use(vClickOutside) |
||||
app.use(VBodyScrollLock) |
||||
app.use(VueVirtualScroller) |
||||
|
||||
app.component('FAIcon', FontAwesomeIcon) |
||||
app.component('FALayers', FontAwesomeLayers) |
||||
|
||||
// remove after vue 3.3
|
||||
app.config.unwrapInjectedRef = true |
||||
|
||||
app.mount('#app') |
||||
|
||||
return app |
||||
} |
||||
|
||||
export default afterStoreSetup |
||||
@ -0,0 +1,98 @@ |
||||
import PublicTimeline from 'components/public_timeline/public_timeline.vue' |
||||
import PublicAndExternalTimeline from 'components/public_and_external_timeline/public_and_external_timeline.vue' |
||||
import FriendsTimeline from 'components/friends_timeline/friends_timeline.vue' |
||||
import TagTimeline from 'components/tag_timeline/tag_timeline.vue' |
||||
import BookmarkTimeline from 'components/bookmark_timeline/bookmark_timeline.vue' |
||||
import ConversationPage from 'components/conversation-page/conversation-page.vue' |
||||
import Interactions from 'components/interactions/interactions.vue' |
||||
import DMs from 'components/dm_timeline/dm_timeline.vue' |
||||
import ChatList from 'components/chat_list/chat_list.vue' |
||||
import Chat from 'components/chat/chat.vue' |
||||
import UserProfile from 'components/user_profile/user_profile.vue' |
||||
import Search from 'components/search/search.vue' |
||||
import Registration from 'components/registration/registration.vue' |
||||
import PasswordReset from 'components/password_reset/password_reset.vue' |
||||
import FollowRequests from 'components/follow_requests/follow_requests.vue' |
||||
import OAuthCallback from 'components/oauth_callback/oauth_callback.vue' |
||||
import Notifications from 'components/notifications/notifications.vue' |
||||
import AuthForm from 'components/auth_form/auth_form.js' |
||||
import ShoutPanel from 'components/shout_panel/shout_panel.vue' |
||||
import WhoToFollow from 'components/who_to_follow/who_to_follow.vue' |
||||
import About from 'components/about/about.vue' |
||||
import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue' |
||||
import Lists from 'components/lists/lists.vue' |
||||
import ListsTimeline from 'components/lists_timeline/lists_timeline.vue' |
||||
import ListsEdit from 'components/lists_edit/lists_edit.vue' |
||||
import NavPanel from 'src/components/nav_panel/nav_panel.vue' |
||||
import AnnouncementsPage from 'components/announcements_page/announcements_page.vue' |
||||
|
||||
export default (store) => { |
||||
const validateAuthenticatedRoute = (to, from, next) => { |
||||
if (store.state.users.currentUser) { |
||||
next() |
||||
} else { |
||||
next(store.state.instance.redirectRootNoLogin || '/main/all') |
||||
} |
||||
} |
||||
|
||||
let routes = [ |
||||
{ |
||||
name: 'root', |
||||
path: '/', |
||||
redirect: _to => { |
||||
return (store.state.users.currentUser |
||||
? store.state.instance.redirectRootLogin |
||||
: store.state.instance.redirectRootNoLogin) || '/main/all' |
||||
} |
||||
}, |
||||
{ name: 'public-external-timeline', path: '/main/all', component: PublicAndExternalTimeline }, |
||||
{ name: 'public-timeline', path: '/main/public', component: PublicTimeline }, |
||||
{ name: 'friends', path: '/main/friends', component: FriendsTimeline, beforeEnter: validateAuthenticatedRoute }, |
||||
{ name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline }, |
||||
{ name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline }, |
||||
{ name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } }, |
||||
{ |
||||
name: 'remote-user-profile-acct', |
||||
path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)', |
||||
component: RemoteUserResolver, |
||||
beforeEnter: validateAuthenticatedRoute |
||||
}, |
||||
{ |
||||
name: 'remote-user-profile', |
||||
path: '/remote-users/:hostname/:username', |
||||
component: RemoteUserResolver, |
||||
beforeEnter: validateAuthenticatedRoute |
||||
}, |
||||
{ name: 'external-user-profile', path: '/users/$:id', component: UserProfile }, |
||||
{ name: 'interactions', path: '/users/:username/interactions', component: Interactions, beforeEnter: validateAuthenticatedRoute }, |
||||
{ name: 'dms', path: '/users/:username/dms', component: DMs, beforeEnter: validateAuthenticatedRoute }, |
||||
{ name: 'registration', path: '/registration', component: Registration }, |
||||
{ name: 'password-reset', path: '/password-reset', component: PasswordReset, props: true }, |
||||
{ name: 'registration-token', path: '/registration/:token', component: Registration }, |
||||
{ name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute }, |
||||
{ name: 'notifications', path: '/:username/notifications', component: Notifications, props: () => ({ disableTeleport: true }), beforeEnter: validateAuthenticatedRoute }, |
||||
{ name: 'login', path: '/login', component: AuthForm }, |
||||
{ name: 'shout-panel', path: '/shout-panel', component: ShoutPanel, props: () => ({ floating: false }) }, |
||||
{ name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) }, |
||||
{ name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) }, |
||||
{ name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute }, |
||||
{ name: 'about', path: '/about', component: About }, |
||||
{ name: 'announcements', path: '/announcements', component: AnnouncementsPage }, |
||||
{ name: 'user-profile', path: '/users/:name', component: UserProfile }, |
||||
{ name: 'legacy-user-profile', path: '/:name', component: UserProfile }, |
||||
{ name: 'lists', path: '/lists', component: Lists }, |
||||
{ name: 'lists-timeline', path: '/lists/:id', component: ListsTimeline }, |
||||
{ name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit }, |
||||
{ name: 'lists-new', path: '/lists/new', component: ListsEdit }, |
||||
{ name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true, forceEditMode: true }), beforeEnter: validateAuthenticatedRoute } |
||||
] |
||||
|
||||
if (store.state.instance.pleromaChatMessagesAvailable) { |
||||
routes = routes.concat([ |
||||
{ name: 'chat', path: '/users/:username/chats/:recipient_id', component: Chat, meta: { dontScroll: false }, beforeEnter: validateAuthenticatedRoute }, |
||||
{ name: 'chats', path: '/users/:username/chats', component: ChatList, meta: { dontScroll: false }, beforeEnter: validateAuthenticatedRoute } |
||||
]) |
||||
} |
||||
|
||||
return routes |
||||
} |
||||
@ -0,0 +1,25 @@ |
||||
import InstanceSpecificPanel from '../instance_specific_panel/instance_specific_panel.vue' |
||||
import FeaturesPanel from '../features_panel/features_panel.vue' |
||||
import TermsOfServicePanel from '../terms_of_service_panel/terms_of_service_panel.vue' |
||||
import StaffPanel from '../staff_panel/staff_panel.vue' |
||||
import MRFTransparencyPanel from '../mrf_transparency_panel/mrf_transparency_panel.vue' |
||||
|
||||
const About = { |
||||
components: { |
||||
InstanceSpecificPanel, |
||||
FeaturesPanel, |
||||
TermsOfServicePanel, |
||||
StaffPanel, |
||||
MRFTransparencyPanel |
||||
}, |
||||
computed: { |
||||
showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }, |
||||
showInstanceSpecificPanel () { |
||||
return this.$store.state.instance.showInstanceSpecificPanel && |
||||
!this.$store.getters.mergedConfig.hideISP && |
||||
this.$store.state.instance.instanceSpecificPanelContent |
||||
} |
||||
} |
||||
} |
||||
|
||||
export default About |
||||
@ -0,0 +1,11 @@ |
||||
<template> |
||||
<div class="column-inner"> |
||||
<instance-specific-panel v-if="showInstanceSpecificPanel" /> |
||||
<staff-panel /> |
||||
<terms-of-service-panel /> |
||||
<MRFTransparencyPanel /> |
||||
<features-panel v-if="showFeaturesPanel" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script src="./about.js"></script> |
||||
@ -0,0 +1,98 @@ |
||||
import { mapState } from 'vuex' |
||||
import ProgressButton from '../progress_button/progress_button.vue' |
||||
import Popover from '../popover/popover.vue' |
||||
import UserListMenu from 'src/components/user_list_menu/user_list_menu.vue' |
||||
import ConfirmModal from '../confirm_modal/confirm_modal.vue' |
||||
import { library } from '@fortawesome/fontawesome-svg-core' |
||||
import { |
||||
faEllipsisV |
||||
} from '@fortawesome/free-solid-svg-icons' |
||||
|
||||
library.add( |
||||
faEllipsisV |
||||
) |
||||
|
||||
const AccountActions = { |
||||
props: [ |
||||
'user', 'relationship' |
||||
], |
||||
data () { |
||||
return { |
||||
showingConfirmBlock: false, |
||||
showingConfirmRemoveFollower: false |
||||
} |
||||
}, |
||||
components: { |
||||
ProgressButton, |
||||
Popover, |
||||
UserListMenu, |
||||
ConfirmModal |
||||
}, |
||||
methods: { |
||||
showConfirmBlock () { |
||||
this.showingConfirmBlock = true |
||||
}, |
||||
hideConfirmBlock () { |
||||
this.showingConfirmBlock = false |
||||
}, |
||||
showConfirmRemoveUserFromFollowers () { |
||||
this.showingConfirmRemoveFollower = true |
||||
}, |
||||
hideConfirmRemoveUserFromFollowers () { |
||||
this.showingConfirmRemoveFollower = false |
||||
}, |
||||
showRepeats () { |
||||
this.$store.dispatch('showReblogs', this.user.id) |
||||
}, |
||||
hideRepeats () { |
||||
this.$store.dispatch('hideReblogs', this.user.id) |
||||
}, |
||||
blockUser () { |
||||
if (!this.shouldConfirmBlock) { |
||||
this.doBlockUser() |
||||
} else { |
||||
this.showConfirmBlock() |
||||
} |
||||
}, |
||||
doBlockUser () { |
||||
this.$store.dispatch('blockUser', this.user.id) |
||||
this.hideConfirmBlock() |
||||
}, |
||||
unblockUser () { |
||||
this.$store.dispatch('unblockUser', this.user.id) |
||||
}, |
||||
removeUserFromFollowers () { |
||||
if (!this.shouldConfirmRemoveUserFromFollowers) { |
||||
this.doRemoveUserFromFollowers() |
||||
} else { |
||||
this.showConfirmRemoveUserFromFollowers() |
||||
} |
||||
}, |
||||
doRemoveUserFromFollowers () { |
||||
this.$store.dispatch('removeUserFromFollowers', this.user.id) |
||||
this.hideConfirmRemoveUserFromFollowers() |
||||
}, |
||||
reportUser () { |
||||
this.$store.dispatch('openUserReportingModal', { userId: this.user.id }) |
||||
}, |
||||
openChat () { |
||||
this.$router.push({ |
||||
name: 'chat', |
||||
params: { username: this.$store.state.users.currentUser.screen_name, recipient_id: this.user.id } |
||||
}) |
||||
} |
||||
}, |
||||
computed: { |
||||
shouldConfirmBlock () { |
||||
return this.$store.getters.mergedConfig.modalOnBlock |
||||
}, |
||||
shouldConfirmRemoveUserFromFollowers () { |
||||
return this.$store.getters.mergedConfig.modalOnRemoveUserFromFollowers |
||||
}, |
||||
...mapState({ |
||||
pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable |
||||
}) |
||||
} |
||||
} |
||||
|
||||
export default AccountActions |
||||
@ -0,0 +1,140 @@ |
||||
<template> |
||||
<div class="AccountActions"> |
||||
<Popover |
||||
trigger="click" |
||||
placement="bottom" |
||||
:bound-to="{ x: 'container' }" |
||||
remove-padding |
||||
> |
||||
<template #content> |
||||
<div class="dropdown-menu"> |
||||
<template v-if="relationship.following"> |
||||
<button |
||||
v-if="relationship.showing_reblogs" |
||||
class="btn button-default dropdown-item" |
||||
@click="hideRepeats" |
||||
> |
||||
{{ $t('user_card.hide_repeats') }} |
||||
</button> |
||||
<button |
||||
v-if="!relationship.showing_reblogs" |
||||
class="btn button-default dropdown-item" |
||||
@click="showRepeats" |
||||
> |
||||
{{ $t('user_card.show_repeats') }} |
||||
</button> |
||||
<div |
||||
role="separator" |
||||
class="dropdown-divider" |
||||
/> |
||||
</template> |
||||
<UserListMenu :user="user" /> |
||||
<button |
||||
v-if="relationship.followed_by" |
||||
class="btn button-default btn-block dropdown-item" |
||||
@click="removeUserFromFollowers" |
||||
> |
||||
{{ $t('user_card.remove_follower') }} |
||||
</button> |
||||
<button |
||||
v-if="relationship.blocking" |
||||
class="btn button-default btn-block dropdown-item" |
||||
@click="unblockUser" |
||||
> |
||||
{{ $t('user_card.unblock') }} |
||||
</button> |
||||
<button |
||||
v-else |
||||
class="btn button-default btn-block dropdown-item" |
||||
@click="blockUser" |
||||
> |
||||
{{ $t('user_card.block') }} |
||||
</button> |
||||
<button |
||||
class="btn button-default btn-block dropdown-item" |
||||
@click="reportUser" |
||||
> |
||||
{{ $t('user_card.report') }} |
||||
</button> |
||||
<button |
||||
v-if="pleromaChatMessagesAvailable" |
||||
class="btn button-default btn-block dropdown-item" |
||||
@click="openChat" |
||||
> |
||||
{{ $t('user_card.message') }} |
||||
</button> |
||||
</div> |
||||
</template> |
||||
<template #trigger> |
||||
<button class="button-unstyled ellipsis-button"> |
||||
<FAIcon |
||||
class="icon" |
||||
icon="ellipsis-v" |
||||
/> |
||||
</button> |
||||
</template> |
||||
</Popover> |
||||
<teleport to="#modal"> |
||||
<confirm-modal |
||||
v-if="showingConfirmBlock" |
||||
:title="$t('user_card.block_confirm_title')" |
||||
:confirm-text="$t('user_card.block_confirm_accept_button')" |
||||
:cancel-text="$t('user_card.block_confirm_cancel_button')" |
||||
@accepted="doBlockUser" |
||||
@cancelled="hideConfirmBlock" |
||||
> |
||||
<i18n-t |
||||
keypath="user_card.block_confirm" |
||||
tag="span" |
||||
> |
||||
<template #user> |
||||
<span |
||||
v-text="user.screen_name_ui" |
||||
/> |
||||
</template> |
||||
</i18n-t> |
||||
</confirm-modal> |
||||
</teleport> |
||||
<teleport to="#modal"> |
||||
<confirm-modal |
||||
v-if="showingConfirmRemoveFollower" |
||||
:title="$t('user_card.remove_follower_confirm_title')" |
||||
:confirm-text="$t('user_card.remove_follower_confirm_accept_button')" |
||||
:cancel-text="$t('user_card.remove_follower_confirm_cancel_button')" |
||||
@accepted="doRemoveUserFromFollowers" |
||||
@cancelled="hideConfirmRemoveUserFromFollowers" |
||||
> |
||||
<i18n-t |
||||
keypath="user_card.remove_follower_confirm" |
||||
tag="span" |
||||
> |
||||
<template #user> |
||||
<span |
||||
v-text="user.screen_name_ui" |
||||
/> |
||||
</template> |
||||
</i18n-t> |
||||
</confirm-modal> |
||||
</teleport> |
||||
</div> |
||||
</template> |
||||
|
||||
<script src="./account_actions.js"></script> |
||||
|
||||
<style lang="scss"> |
||||
@import "../../variables"; |
||||
|
||||
.AccountActions { |
||||
.ellipsis-button { |
||||
width: 2.5em; |
||||
margin: -0.5em 0; |
||||
padding: 0.5em 0; |
||||
text-align: center; |
||||
|
||||
&:not(:hover) .icon { |
||||
color: $fallback--lightText; |
||||
color: var(--lightText, $fallback--lightText); |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,108 @@ |
||||
import { mapState } from 'vuex' |
||||
import AnnouncementEditor from '../announcement_editor/announcement_editor.vue' |
||||
import RichContent from '../rich_content/rich_content.jsx' |
||||
import localeService from '../../services/locale/locale.service.js' |
||||
|
||||
const Announcement = { |
||||
components: { |
||||
AnnouncementEditor, |
||||
RichContent |
||||
}, |
||||
data () { |
||||
return { |
||||
editing: false, |
||||
editedAnnouncement: { |
||||
content: '', |
||||
startsAt: undefined, |
||||
endsAt: undefined, |
||||
allDay: undefined |
||||
}, |
||||
editError: '' |
||||
} |
||||
}, |
||||
props: { |
||||
announcement: Object |
||||
}, |
||||
computed: { |
||||
...mapState({ |
||||
currentUser: state => state.users.currentUser |
||||
}), |
||||
canEditAnnouncement () { |
||||
return this.currentUser && this.currentUser.privileges.includes('announcements_manage_announcements') |
||||
}, |
||||
content () { |
||||
return this.announcement.content |
||||
}, |
||||
isRead () { |
||||
return this.announcement.read |
||||
}, |
||||
publishedAt () { |
||||
const time = this.announcement.published_at |
||||
if (!time) { |
||||
return |
||||
} |
||||
|
||||
return this.formatTimeOrDate(time, localeService.internalToBrowserLocale(this.$i18n.locale)) |
||||
}, |
||||
startsAt () { |
||||
const time = this.announcement.starts_at |
||||
if (!time) { |
||||
return |
||||
} |
||||
|
||||
return this.formatTimeOrDate(time, localeService.internalToBrowserLocale(this.$i18n.locale)) |
||||
}, |
||||
endsAt () { |
||||
const time = this.announcement.ends_at |
||||
if (!time) { |
||||
return |
||||
} |
||||
|
||||
return this.formatTimeOrDate(time, localeService.internalToBrowserLocale(this.$i18n.locale)) |
||||
}, |
||||
inactive () { |
||||
return this.announcement.inactive |
||||
} |
||||
}, |
||||
methods: { |
||||
markAsRead () { |
||||
if (!this.isRead) { |
||||
return this.$store.dispatch('markAnnouncementAsRead', this.announcement.id) |
||||
} |
||||
}, |
||||
deleteAnnouncement () { |
||||
return this.$store.dispatch('deleteAnnouncement', this.announcement.id) |
||||
}, |
||||
formatTimeOrDate (time, locale) { |
||||
const d = new Date(time) |
||||
return this.announcement.all_day ? d.toLocaleDateString(locale) : d.toLocaleString(locale) |
||||
}, |
||||
enterEditMode () { |
||||
this.editedAnnouncement.content = this.announcement.pleroma.raw_content |
||||
this.editedAnnouncement.startsAt = this.announcement.starts_at |
||||
this.editedAnnouncement.endsAt = this.announcement.ends_at |
||||
this.editedAnnouncement.allDay = this.announcement.all_day |
||||
this.editing = true |
||||
}, |
||||
submitEdit () { |
||||
this.$store.dispatch('editAnnouncement', { |
||||
id: this.announcement.id, |
||||
...this.editedAnnouncement |
||||
}) |
||||
.then(() => { |
||||
this.editing = false |
||||
}) |
||||
.catch(error => { |
||||
this.editError = error.error |
||||
}) |
||||
}, |
||||
cancelEdit () { |
||||
this.editing = false |
||||
}, |
||||
clearError () { |
||||
this.editError = undefined |
||||
} |
||||
} |
||||
} |
||||
|
||||
export default Announcement |
||||
@ -0,0 +1,136 @@ |
||||
<template> |
||||
<div class="announcement"> |
||||
<div class="heading"> |
||||
<h4>{{ $t('announcements.title') }}</h4> |
||||
</div> |
||||
<div class="body"> |
||||
<rich-content |
||||
v-if="!editing" |
||||
:html="content" |
||||
:emoji="announcement.emojis" |
||||
:handle-links="true" |
||||
/> |
||||
<announcement-editor |
||||
v-else |
||||
:announcement="editedAnnouncement" |
||||
/> |
||||
</div> |
||||
<div class="footer"> |
||||
<div |
||||
v-if="!editing" |
||||
class="times" |
||||
> |
||||
<span v-if="publishedAt"> |
||||
{{ $t('announcements.published_time_display', { time: publishedAt }) }} |
||||
</span> |
||||
<span v-if="startsAt"> |
||||
{{ $t('announcements.start_time_display', { time: startsAt }) }} |
||||
</span> |
||||
<span v-if="endsAt"> |
||||
{{ $t('announcements.end_time_display', { time: endsAt }) }} |
||||
</span> |
||||
</div> |
||||
<div |
||||
v-if="!editing" |
||||
class="actions" |
||||
> |
||||
<button |
||||
v-if="currentUser" |
||||
class="btn button-default" |
||||
:class="{ toggled: isRead }" |
||||
:disabled="inactive" |
||||
:title="inactive ? $t('announcements.inactive_message') : ''" |
||||
@click="markAsRead" |
||||
> |
||||
{{ $t('announcements.mark_as_read_action') }} |
||||
</button> |
||||
<button |
||||
v-if="canEditAnnouncement" |
||||
class="btn button-default" |
||||
@click="enterEditMode" |
||||
> |
||||
{{ $t('announcements.edit_action') }} |
||||
</button> |
||||
<button |
||||
v-if="canEditAnnouncement" |
||||
class="btn button-default" |
||||
@click="deleteAnnouncement" |
||||
> |
||||
{{ $t('announcements.delete_action') }} |
||||
</button> |
||||
</div> |
||||
<div |
||||
v-else |
||||
class="actions" |
||||
> |
||||
<button |
||||
class="btn button-default" |
||||
@click="submitEdit" |
||||
> |
||||
{{ $t('announcements.submit_edit_action') }} |
||||
</button> |
||||
<button |
||||
class="btn button-default" |
||||
@click="cancelEdit" |
||||
> |
||||
{{ $t('announcements.cancel_edit_action') }} |
||||
</button> |
||||
<div |
||||
v-if="editing && editError" |
||||
class="alert error" |
||||
> |
||||
{{ $t('announcements.edit_error', { error }) }} |
||||
<button |
||||
class="button-unstyled" |
||||
@click="clearError" |
||||
> |
||||
<FAIcon |
||||
class="fa-scale-110 fa-old-padding" |
||||
icon="times" |
||||
:title="$t('announcements.close_error')" |
||||
/> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script src="./announcement.js"></script> |
||||
|
||||
<style lang="scss"> |
||||
@import "../../variables"; |
||||
|
||||
.announcement { |
||||
border-bottom: 1px solid var(--border, $fallback--border); |
||||
border-radius: 0; |
||||
padding: var(--status-margin, $status-margin); |
||||
|
||||
.heading, |
||||
.body { |
||||
margin-bottom: var(--status-margin, $status-margin); |
||||
} |
||||
|
||||
.footer { |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.times { |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
} |
||||
|
||||
.footer .actions { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-evenly; |
||||
|
||||
.btn { |
||||
flex: 1; |
||||
margin: 1em; |
||||
max-width: 10em; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,13 @@ |
||||
import Checkbox from '../checkbox/checkbox.vue' |
||||
|
||||
const AnnouncementEditor = { |
||||
components: { |
||||
Checkbox |
||||
}, |
||||
props: { |
||||
announcement: Object, |
||||
disabled: Boolean |
||||
} |
||||
} |
||||
|
||||
export default AnnouncementEditor |
||||
@ -0,0 +1,60 @@ |
||||
<template> |
||||
<div class="announcement-editor"> |
||||
<textarea |
||||
ref="textarea" |
||||
v-model="announcement.content" |
||||
class="post-textarea" |
||||
rows="1" |
||||
cols="1" |
||||
:placeholder="$t('announcements.post_placeholder')" |
||||
:disabled="disabled" |
||||
/> |
||||
<span class="announcement-metadata"> |
||||
<label for="announcement-start-time">{{ $t('announcements.start_time_prompt') }}</label> |
||||
<input |
||||
id="announcement-start-time" |
||||
v-model="announcement.startsAt" |
||||
:type="announcement.allDay ? 'date' : 'datetime-local'" |
||||
:disabled="disabled" |
||||
> |
||||
</span> |
||||
<span class="announcement-metadata"> |
||||
<label for="announcement-end-time">{{ $t('announcements.end_time_prompt') }}</label> |
||||
<input |
||||
id="announcement-end-time" |
||||
v-model="announcement.endsAt" |
||||
:type="announcement.allDay ? 'date' : 'datetime-local'" |
||||
:disabled="disabled" |
||||
> |
||||
</span> |
||||
<span class="announcement-metadata"> |
||||
<Checkbox |
||||
id="announcement-all-day" |
||||
v-model="announcement.allDay" |
||||
:disabled="disabled" |
||||
/> |
||||
<label for="announcement-all-day">{{ $t('announcements.all_day_prompt') }}</label> |
||||
</span> |
||||
</div> |
||||
</template> |
||||
|
||||
<script src="./announcement_editor.js"></script> |
||||
|
||||
<style lang="scss"> |
||||
.announcement-editor { |
||||
display: flex; |
||||
align-items: stretch; |
||||
flex-direction: column; |
||||
|
||||
.announcement-metadata { |
||||
margin-top: 0.5em; |
||||
} |
||||
|
||||
.post-textarea { |
||||
resize: vertical; |
||||
height: 10em; |
||||
overflow: none; |
||||
box-sizing: content-box; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,58 @@ |
||||
import { mapState } from 'vuex' |
||||
import Announcement from '../announcement/announcement.vue' |
||||
import AnnouncementEditor from '../announcement_editor/announcement_editor.vue' |
||||
|
||||
const AnnouncementsPage = { |
||||
components: { |
||||
Announcement, |
||||
AnnouncementEditor |
||||
}, |
||||
data () { |
||||
return { |
||||
newAnnouncement: { |
||||
content: '', |
||||
startsAt: undefined, |
||||
endsAt: undefined, |
||||
allDay: false |
||||
}, |
||||
posting: false, |
||||
error: undefined |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.dispatch('fetchAnnouncements') |
||||
}, |
||||
computed: { |
||||
...mapState({ |
||||
currentUser: state => state.users.currentUser |
||||
}), |
||||
announcements () { |
||||
return this.$store.state.announcements.announcements |
||||
}, |
||||
canPostAnnouncement () { |
||||
return this.currentUser && this.currentUser.privileges.includes('announcements_manage_announcements') |
||||
} |
||||
}, |
||||
methods: { |
||||
postAnnouncement () { |
||||
this.posting = true |
||||
this.$store.dispatch('postAnnouncement', this.newAnnouncement) |
||||
.then(() => { |
||||
this.newAnnouncement.content = '' |
||||
this.startsAt = undefined |
||||
this.endsAt = undefined |
||||
}) |
||||
.catch(error => { |
||||
this.error = error.error |
||||
}) |
||||
.finally(() => { |
||||
this.posting = false |
||||
}) |
||||
}, |
||||
clearError () { |
||||
this.error = undefined |
||||
} |
||||
} |
||||
} |
||||
|
||||
export default AnnouncementsPage |
||||
@ -0,0 +1,80 @@ |
||||
<template> |
||||
<div class="panel panel-default announcements-page"> |
||||
<div class="panel-heading"> |
||||
<span> |
||||
{{ $t('announcements.page_header') }} |
||||
</span> |
||||
</div> |
||||
<div class="panel-body"> |
||||
<section |
||||
v-if="canPostAnnouncement" |
||||
> |
||||
<div class="post-form"> |
||||
<div class="heading"> |
||||
<h4>{{ $t('announcements.post_form_header') }}</h4> |
||||
</div> |
||||
<div class="body"> |
||||
<announcement-editor |
||||
:announcement="newAnnouncement" |
||||
:disabled="posting" |
||||
/> |
||||
</div> |
||||
<div class="footer"> |
||||
<button |
||||
class="btn button-default post-button" |
||||
:disabled="posting" |
||||
@click.prevent="postAnnouncement" |
||||
> |
||||
{{ $t('announcements.post_action') }} |
||||
</button> |
||||
<div |
||||
v-if="error" |
||||
class="alert error" |
||||
> |
||||
{{ $t('announcements.post_error', { error }) }} |
||||
<button |
||||
class="button-unstyled" |
||||
@click="clearError" |
||||
> |
||||
<FAIcon |
||||
class="fa-scale-110 fa-old-padding" |
||||
icon="times" |
||||
:title="$t('announcements.close_error')" |
||||
/> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
<section |
||||
v-for="announcement in announcements" |
||||
:key="announcement.id" |
||||
> |
||||
<announcement |
||||
:announcement="announcement" |
||||
/> |
||||
</section> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script src="./announcements_page.js"></script> |
||||
|
||||
<style lang="scss"> |
||||
@import "../../variables"; |
||||
|
||||
.announcements-page { |
||||
.post-form { |
||||
padding: var(--status-margin, $status-margin); |
||||
|
||||
.heading, |
||||
.body { |
||||
margin-bottom: var(--status-margin, $status-margin); |
||||
} |
||||
|
||||
.post-button { |
||||
min-width: 10em; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,43 @@ |
||||
<template> |
||||
<div class="async-component-error"> |
||||
<div> |
||||
<h4> |
||||
{{ $t('general.generic_error') }} |
||||
</h4> |
||||
<p> |
||||
{{ $t('general.error_retry') }} |
||||
</p> |
||||
<button |
||||
class="btn button-default" |
||||
@click="retry" |
||||
> |
||||
{{ $t('general.retry') }} |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
emits: ['resetAsyncComponent'], |
||||
methods: { |
||||
retry () { |
||||
this.$emit('resetAsyncComponent') |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.async-component-error { |
||||
display: flex; |
||||
height: 100%; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
.btn { |
||||
margin: 0.5em; |
||||
padding: 0.5em 2em; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,211 @@ |
||||
import StillImage from '../still-image/still-image.vue' |
||||
import Flash from '../flash/flash.vue' |
||||
import VideoAttachment from '../video_attachment/video_attachment.vue' |
||||
import nsfwImage from '../../assets/nsfw.png' |
||||
import fileTypeService from '../../services/file_type/file_type.service.js' |
||||
import { mapGetters } from 'vuex' |
||||
import { library } from '@fortawesome/fontawesome-svg-core' |
||||
import { |
||||
faFile, |
||||
faMusic, |
||||
faImage, |
||||
faVideo, |
||||
faPlayCircle, |
||||
faTimes, |
||||
faStop, |
||||
faSearchPlus, |
||||
faTrashAlt, |
||||
faPencilAlt, |
||||
faAlignRight |
||||
} from '@fortawesome/free-solid-svg-icons' |
||||
|
||||
library.add( |
||||
faFile, |
||||
faMusic, |
||||
faImage, |
||||
faVideo, |
||||
faPlayCircle, |
||||
faTimes, |
||||
faStop, |
||||
faSearchPlus, |
||||
faTrashAlt, |
||||
faPencilAlt, |
||||
faAlignRight |
||||
) |
||||
|
||||
const Attachment = { |
||||
props: [ |
||||
'attachment', |
||||
'compact', |
||||
'description', |
||||
'hideDescription', |
||||
'nsfw', |
||||
'size', |
||||
'setMedia', |
||||
'remove', |
||||
'shiftUp', |
||||
'shiftDn', |
||||
'edit' |
||||
], |
||||
data () { |
||||
return { |
||||
localDescription: this.description || this.attachment.description, |
||||
nsfwImage: this.$store.state.instance.nsfwCensorImage || nsfwImage, |
||||
hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw, |
||||
preloadImage: this.$store.getters.mergedConfig.preloadImage, |
||||
loading: false, |
||||
img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'), |
||||
modalOpen: false, |
||||
showHidden: false, |
||||
flashLoaded: false, |
||||
showDescription: false |
||||
} |
||||
}, |
||||
components: { |
||||
Flash, |
||||
StillImage, |
||||
VideoAttachment |
||||
}, |
||||
computed: { |
||||
classNames () { |
||||
return [ |
||||
{ |
||||
'-loading': this.loading, |
||||
'-nsfw-placeholder': this.hidden, |
||||
'-editable': this.edit !== undefined, |
||||
'-compact': this.compact |
||||
}, |
||||
'-type-' + this.type, |
||||
this.size && '-size-' + this.size, |
||||
`-${this.useContainFit ? 'contain' : 'cover'}-fit` |
||||
] |
||||
}, |
||||
usePlaceholder () { |
||||
return this.size === 'hide' |
||||
}, |
||||
useContainFit () { |
||||
return this.$store.getters.mergedConfig.useContainFit |
||||
}, |
||||
placeholderName () { |
||||
if (this.attachment.description === '' || !this.attachment.description) { |
||||
return this.type.toUpperCase() |
||||
} |
||||
return this.attachment.description |
||||
}, |
||||
placeholderIconClass () { |
||||
if (this.type === 'image') return 'image' |
||||
if (this.type === 'video') return 'video' |
||||
if (this.type === 'audio') return 'music' |
||||
return 'file' |
||||
}, |
||||
referrerpolicy () { |
||||
return this.$store.state.instance.mediaProxyAvailable ? '' : 'no-referrer' |
||||
}, |
||||
type () { |
||||
return fileTypeService.fileType(this.attachment.mimetype) |
||||
}, |
||||
hidden () { |
||||
return this.nsfw && this.hideNsfwLocal && !this.showHidden |
||||
}, |
||||
isEmpty () { |
||||
return (this.type === 'html' && !this.attachment.oembed) |
||||
}, |
||||
useModal () { |
||||
let modalTypes = [] |
||||
switch (this.size) { |
||||
case 'hide': |
||||
case 'small': |
||||
modalTypes = ['image', 'video', 'audio', 'flash'] |
||||
break |
||||
default: |
||||
modalTypes = this.mergedConfig.playVideosInModal |
||||
? ['image', 'video', 'flash'] |
||||
: ['image'] |
||||
break |
||||
} |
||||
return modalTypes.includes(this.type) |
||||
}, |
||||
videoTag () { |
||||
return this.useModal ? 'button' : 'span' |
||||
}, |
||||
...mapGetters(['mergedConfig']) |
||||
}, |
||||
watch: { |
||||
'attachment.description' (newVal) { |
||||
this.localDescription = newVal |
||||
}, |
||||
localDescription (newVal) { |
||||
this.onEdit(newVal) |
||||
} |
||||
}, |
||||
methods: { |
||||
linkClicked ({ target }) { |
||||
if (target.tagName === 'A') { |
||||
window.open(target.href, '_blank') |
||||
} |
||||
}, |
||||
openModal (event) { |
||||
if (this.useModal) { |
||||
this.$emit('setMedia') |
||||
this.$store.dispatch('setCurrentMedia', this.attachment) |
||||
} else if (this.type === 'unknown') { |
||||
window.open(this.attachment.url) |
||||
} |
||||
}, |
||||
openModalForce (event) { |
||||
this.$emit('setMedia') |
||||
this.$store.dispatch('setCurrentMedia', this.attachment) |
||||
}, |
||||
onEdit (event) { |
||||
this.edit && this.edit(this.attachment, event) |
||||
}, |
||||
onRemove () { |
||||
this.remove && this.remove(this.attachment) |
||||
}, |
||||
onShiftUp () { |
||||
this.shiftUp && this.shiftUp(this.attachment) |
||||
}, |
||||
onShiftDn () { |
||||
this.shiftDn && this.shiftDn(this.attachment) |
||||
}, |
||||
stopFlash () { |
||||
this.$refs.flash.closePlayer() |
||||
}, |
||||
setFlashLoaded (event) { |
||||
this.flashLoaded = event |
||||
}, |
||||
toggleDescription () { |
||||
this.showDescription = !this.showDescription |
||||
}, |
||||
toggleHidden (event) { |
||||
if ( |
||||
(this.mergedConfig.useOneClickNsfw && !this.showHidden) && |
||||
(this.type !== 'video' || this.mergedConfig.playVideosInModal) |
||||
) { |
||||
this.openModal(event) |
||||
return |
||||
} |
||||
if (this.img && !this.preloadImage) { |
||||
if (this.img.onload) { |
||||
this.img.onload() |
||||
} else { |
||||
this.loading = true |
||||
this.img.src = this.attachment.url |
||||
this.img.onload = () => { |
||||
this.loading = false |
||||
this.showHidden = !this.showHidden |
||||
} |
||||
} |
||||
} else { |
||||
this.showHidden = !this.showHidden |
||||
} |
||||
}, |
||||
onImageLoad (image) { |
||||
const width = image.naturalWidth |
||||
const height = image.naturalHeight |
||||
this.$emit('naturalSizeLoad', { id: this.attachment.id, width, height }) |
||||
} |
||||
} |
||||
} |
||||
|
||||
export default Attachment |
||||
@ -0,0 +1,275 @@ |
||||
@import "../../variables"; |
||||
|
||||
.Attachment { |
||||
display: inline-flex; |
||||
flex-direction: column; |
||||
position: relative; |
||||
align-self: flex-start; |
||||
line-height: 0; |
||||
height: 100%; |
||||
border-style: solid; |
||||
border-width: 1px; |
||||
border-radius: $fallback--attachmentRadius; |
||||
border-radius: var(--attachmentRadius, $fallback--attachmentRadius); |
||||
border-color: $fallback--border; |
||||
border-color: var(--border, $fallback--border); |
||||
|
||||
.attachment-wrapper { |
||||
flex: 1 1 auto; |
||||
height: 100%; |
||||
position: relative; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.description-container { |
||||
flex: 0 1 0; |
||||
display: flex; |
||||
padding-top: 0.5em; |
||||
z-index: 1; |
||||
|
||||
p { |
||||
flex: 1; |
||||
text-align: center; |
||||
line-height: 1.5; |
||||
padding: 0.5em; |
||||
margin: 0; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
&.-static { |
||||
position: absolute; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
padding-top: 0; |
||||
background: var(--popover); |
||||
box-shadow: var(--popupShadow); |
||||
} |
||||
} |
||||
|
||||
.description-field { |
||||
flex: 1; |
||||
min-width: 0; |
||||
} |
||||
|
||||
& .placeholder-container, |
||||
& .image-container, |
||||
& .audio-container, |
||||
& .video-container, |
||||
& .flash-container, |
||||
& .oembed-container { |
||||
display: flex; |
||||
justify-content: center; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.image-container { |
||||
.image { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
|
||||
& .flash-container, |
||||
& .video-container { |
||||
& .flash, |
||||
& video { |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: contain; |
||||
align-self: center; |
||||
} |
||||
} |
||||
|
||||
.audio-container { |
||||
display: flex; |
||||
align-items: flex-end; |
||||
|
||||
audio { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
|
||||
.placeholder-container { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding-top: 0.5em; |
||||
} |
||||
|
||||
.play-icon { |
||||
position: absolute; |
||||
font-size: 64px; |
||||
top: calc(50% - 32px); |
||||
left: calc(50% - 32px); |
||||
color: rgb(255 255 255 / 75%); |
||||
text-shadow: 0 0 2px rgb(0 0 0 / 40%); |
||||
|
||||
&::before { |
||||
margin: 0; |
||||
} |
||||
} |
||||
|
||||
.attachment-buttons { |
||||
display: flex; |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
margin-top: 0.5em; |
||||
margin-right: 0.5em; |
||||
z-index: 1; |
||||
|
||||
.attachment-button { |
||||
padding: 0; |
||||
border-radius: $fallback--tooltipRadius; |
||||
border-radius: var(--tooltipRadius, $fallback--tooltipRadius); |
||||
text-align: center; |
||||
width: 2em; |
||||
height: 2em; |
||||
margin-left: 0.5em; |
||||
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%); |
||||
} |
||||
} |
||||
} |
||||
|
||||
&.-contain-fit { |
||||
img, |
||||
canvas { |
||||
object-fit: contain; |
||||
} |
||||
} |
||||
|
||||
&.-cover-fit { |
||||
img, |
||||
canvas { |
||||
object-fit: cover; |
||||
} |
||||
} |
||||
|
||||
.oembed-container { |
||||
line-height: 1.2em; |
||||
flex: 1 0 100%; |
||||
width: 100%; |
||||
margin-right: 15px; |
||||
display: flex; |
||||
|
||||
img { |
||||
width: 100%; |
||||
} |
||||
|
||||
.image { |
||||
flex: 1; |
||||
|
||||
img { |
||||
border: 0; |
||||
border-radius: 5px; |
||||
height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
} |
||||
|
||||
.text { |
||||
flex: 2; |
||||
margin: 8px; |
||||
word-break: break-all; |
||||
|
||||
h1 { |
||||
font-size: 1rem; |
||||
margin: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&.-size-small { |
||||
.play-icon { |
||||
zoom: 0.5; |
||||
opacity: 0.7; |
||||
} |
||||
|
||||
.attachment-buttons { |
||||
zoom: 0.7; |
||||
opacity: 0.5; |
||||
} |
||||
} |
||||
|
||||
&.-editable { |
||||
padding: 0.5em; |
||||
|
||||
& .description-container, |
||||
& .attachment-buttons { |
||||
margin: 0; |
||||
} |
||||
} |
||||
|
||||
&.-placeholder { |
||||
display: inline-block; |
||||
color: $fallback--link; |
||||
color: var(--postLink, $fallback--link); |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
height: auto; |
||||
line-height: 1.5; |
||||
|
||||
&:not(.-editable) { |
||||
border: none; |
||||
} |
||||
|
||||
&.-editable { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: baseline; |
||||
|
||||
& .description-container, |
||||
& .attachment-buttons { |
||||
margin: 0; |
||||
padding: 0; |
||||
position: relative; |
||||
} |
||||
|
||||
.description-container { |
||||
flex: 1; |
||||
padding-left: 0.5em; |
||||
} |
||||
|
||||
.attachment-buttons { |
||||
order: 99; |
||||
align-self: center; |
||||
} |
||||
} |
||||
|
||||
a { |
||||
display: inline-block; |
||||
max-width: 100%; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
|
||||
svg { |
||||
color: inherit; |
||||
} |
||||
} |
||||
|
||||
&.-loading { |
||||
cursor: progress; |
||||
} |
||||
|
||||
&.-compact { |
||||
.placeholder-container { |
||||
padding-bottom: 0.5em; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,269 @@ |
||||
<template> |
||||
<button |
||||
v-if="usePlaceholder" |
||||
class="Attachment -placeholder button-unstyled" |
||||
:class="classNames" |
||||
@click="openModal" |
||||
> |
||||
<a |
||||
v-if="type !== 'html'" |
||||
class="placeholder" |
||||
target="_blank" |
||||
:href="attachment.url" |
||||
:alt="attachment.description" |
||||
:title="attachment.description" |
||||
@click.prevent |
||||
> |
||||
<FAIcon :icon="placeholderIconClass" /> |
||||
<b>{{ nsfw ? "NSFW / " : "" }}</b>{{ edit ? '' : placeholderName }} |
||||
</a> |
||||
<div |
||||
v-if="edit || remove" |
||||
class="attachment-buttons" |
||||
> |
||||
<button |
||||
v-if="remove" |
||||
class="button-unstyled attachment-button" |
||||
@click.prevent="onRemove" |
||||
> |
||||
<FAIcon icon="trash-alt" /> |
||||
</button> |
||||
</div> |
||||
<div |
||||
v-if="size !== 'hide' && !hideDescription && (edit || localDescription || showDescription)" |
||||
class="description-container" |
||||
:class="{ '-static': !edit }" |
||||
> |
||||
<input |
||||
v-if="edit" |
||||
v-model="localDescription" |
||||
type="text" |
||||
class="description-field" |
||||
:placeholder="$t('post_status.media_description')" |
||||
@keydown.enter.prevent="" |
||||
> |
||||
<p v-else> |
||||
{{ localDescription }} |
||||
</p> |
||||
</div> |
||||
</button> |
||||
<div |
||||
v-else |
||||
class="Attachment" |
||||
:class="classNames" |
||||
> |
||||
<div |
||||
v-show="!isEmpty" |
||||
class="attachment-wrapper" |
||||
> |
||||
<a |
||||
v-if="hidden" |
||||
class="image-container" |
||||
:href="attachment.url" |
||||
:alt="attachment.description" |
||||
:title="attachment.description" |
||||
@click.prevent.stop="toggleHidden" |
||||
> |
||||
<img |
||||
:key="nsfwImage" |
||||
class="nsfw" |
||||
:src="nsfwImage" |
||||
> |
||||
<FAIcon |
||||
v-if="type === 'video'" |
||||
class="play-icon" |
||||
icon="play-circle" |
||||
/> |
||||
</a> |
||||
<div |
||||
v-if="!hidden" |
||||
class="attachment-buttons" |
||||
> |
||||
<button |
||||
v-if="type === 'flash' && flashLoaded" |
||||
class="button-unstyled attachment-button" |
||||
:title="$t('status.attachment_stop_flash')" |
||||
@click.prevent="stopFlash" |
||||
> |
||||
<FAIcon icon="stop" /> |
||||
</button> |
||||
<button |
||||
v-if="attachment.description && size !== 'small' && !edit && type !== 'unknown'" |
||||
class="button-unstyled attachment-button" |
||||
:title="$t('status.show_attachment_description')" |
||||
@click.prevent="toggleDescription" |
||||
> |
||||
<FAIcon icon="align-right" /> |
||||
</button> |
||||
<button |
||||
v-if="!useModal && type !== 'unknown'" |
||||
class="button-unstyled attachment-button" |
||||
:title="$t('status.show_attachment_in_modal')" |
||||
@click.prevent="openModalForce" |
||||
> |
||||
<FAIcon icon="search-plus" /> |
||||
</button> |
||||
<button |
||||
v-if="nsfw && hideNsfwLocal" |
||||
class="button-unstyled attachment-button" |
||||
:title="$t('status.hide_attachment')" |
||||
@click.prevent="toggleHidden" |
||||
> |
||||
<FAIcon icon="times" /> |
||||
</button> |
||||
<button |
||||
v-if="shiftUp" |
||||
class="button-unstyled attachment-button" |
||||
:title="$t('status.move_up')" |
||||
@click.prevent="onShiftUp" |
||||
> |
||||
<FAIcon icon="chevron-left" /> |
||||
</button> |
||||
<button |
||||
v-if="shiftDn" |
||||
class="button-unstyled attachment-button" |
||||
:title="$t('status.move_down')" |
||||
@click.prevent="onShiftDn" |
||||
> |
||||
<FAIcon icon="chevron-right" /> |
||||
</button> |
||||
<button |
||||
v-if="remove" |
||||
class="button-unstyled attachment-button" |
||||
:title="$t('status.remove_attachment')" |
||||
@click.prevent="onRemove" |
||||
> |
||||
<FAIcon icon="trash-alt" /> |
||||
</button> |
||||
</div> |
||||
|
||||
<a |
||||
v-if="type === 'image' && (!hidden || preloadImage)" |
||||
class="image-container" |
||||
:class="{'-hidden': hidden && preloadImage }" |
||||
:href="attachment.url" |
||||
target="_blank" |
||||
@click.stop.prevent="openModal" |
||||
> |
||||
<StillImage |
||||
class="image" |
||||
:referrerpolicy="referrerpolicy" |
||||
:mimetype="attachment.mimetype" |
||||
:src="attachment.large_thumb_url || attachment.url" |
||||
:image-load-handler="onImageLoad" |
||||
:alt="attachment.description" |
||||
/> |
||||
</a> |
||||
|
||||
<a |
||||
v-if="type === 'unknown' && !hidden" |
||||
class="placeholder-container" |
||||
:href="attachment.url" |
||||
target="_blank" |
||||
> |
||||
<FAIcon |
||||
:size="compact ? '2x' : '5x'" |
||||
:icon="placeholderIconClass" |
||||
:title="localDescription" |
||||
/> |
||||
<p v-if="!compact"> |
||||
{{ localDescription }} |
||||
</p> |
||||
</a> |
||||
|
||||
<component |
||||
:is="videoTag" |
||||
v-if="type === 'video' && !hidden" |
||||
class="video-container" |
||||
:class="{ 'button-unstyled': 'isModal' }" |
||||
:href="attachment.url" |
||||
@click.stop.prevent="openModal" |
||||
> |
||||
<VideoAttachment |
||||
class="video" |
||||
:attachment="attachment" |
||||
:controls="!useModal" |
||||
@play="$emit('play')" |
||||
@pause="$emit('pause')" |
||||
/> |
||||
<FAIcon |
||||
v-if="useModal" |
||||
class="play-icon" |
||||
icon="play-circle" |
||||
/> |
||||
</component> |
||||
|
||||
<span |
||||
v-if="type === 'audio' && !hidden" |
||||
class="audio-container" |
||||
:href="attachment.url" |
||||
@click.stop.prevent="openModal" |
||||
> |
||||
<audio |
||||
v-if="type === 'audio'" |
||||
:src="attachment.url" |
||||
:alt="attachment.description" |
||||
:title="attachment.description" |
||||
controls |
||||
@play="$emit('play')" |
||||
@pause="$emit('pause')" |
||||
/> |
||||
</span> |
||||
|
||||
<div |
||||
v-if="type === 'html' && attachment.oembed" |
||||
class="oembed-container" |
||||
@click.prevent="linkClicked" |
||||
> |
||||
<div |
||||
v-if="attachment.thumb_url" |
||||
class="image" |
||||
> |
||||
<img :src="attachment.thumb_url"> |
||||
</div> |
||||
<div class="text"> |
||||
<!-- eslint-disable vue/no-v-html --> |
||||
<h1><a :href="attachment.url">{{ attachment.oembed.title }}</a></h1> |
||||
<div v-html="attachment.oembed.oembedHTML" /> |
||||
<!-- eslint-enable vue/no-v-html --> |
||||
</div> |
||||
</div> |
||||
|
||||
<span |
||||
v-if="type === 'flash' && !hidden" |
||||
class="flash-container" |
||||
:href="attachment.url" |
||||
@click.stop.prevent="openModal" |
||||
> |
||||
<Flash |
||||
ref="flash" |
||||
class="flash" |
||||
:src="attachment.large_thumb_url || attachment.url" |
||||
@playerOpened="setFlashLoaded(true)" |
||||
@playerClosed="setFlashLoaded(false)" |
||||
/> |
||||
</span> |
||||
</div> |
||||
<div |
||||
v-if="size !== 'hide' && !hideDescription && (edit || (localDescription && showDescription))" |
||||
class="description-container" |
||||
:class="{ '-static': !edit }" |
||||
> |
||||
<input |
||||
v-if="edit" |
||||
v-model="localDescription" |
||||
type="text" |
||||
class="description-field" |
||||
:placeholder="$t('post_status.media_description')" |
||||
@keydown.enter.prevent="" |
||||
> |
||||
<p v-else> |
||||
{{ localDescription }} |
||||
</p> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script src="./attachment.js"></script> |
||||
|
||||
<style src="./attachment.scss" lang="scss"></style> |
||||
@ -0,0 +1,27 @@ |
||||
import { h, resolveComponent } from 'vue' |
||||
import LoginForm from '../login_form/login_form.vue' |
||||
import MFARecoveryForm from '../mfa_form/recovery_form.vue' |
||||
import MFATOTPForm from '../mfa_form/totp_form.vue' |
||||
import { mapGetters } from 'vuex' |
||||
|
||||
const AuthForm = { |
||||
name: 'AuthForm', |
||||
render () { |
||||
return h(resolveComponent(this.authForm)) |
||||
}, |
||||
computed: { |
||||
authForm () { |
||||
if (this.requiredTOTP) { return 'MFATOTPForm' } |
||||
if (this.requiredRecovery) { return 'MFARecoveryForm' } |
||||
return 'LoginForm' |
||||
}, |
||||
...mapGetters('authFlow', ['requiredTOTP', 'requiredRecovery']) |
||||
}, |
||||
components: { |
||||
MFARecoveryForm, |
||||
MFATOTPForm, |
||||
LoginForm |
||||
} |
||||
} |
||||
|
||||
export default AuthForm |
||||
@ -0,0 +1,52 @@ |
||||
const debounceMilliseconds = 500 |
||||
|
||||
export default { |
||||
props: { |
||||
query: { // function to query results and return a promise
|
||||
type: Function, |
||||
required: true |
||||
}, |
||||
filter: { // function to filter results in real time
|
||||
type: Function |
||||
}, |
||||
placeholder: { |
||||
type: String, |
||||
default: 'Search...' |
||||
} |
||||
}, |
||||
data () { |
||||
return { |
||||
term: '', |
||||
timeout: null, |
||||
results: [], |
||||
resultsVisible: false |
||||
} |
||||
}, |
||||
computed: { |
||||
filtered () { |
||||
return this.filter ? this.filter(this.results) : this.results |
||||
} |
||||
}, |
||||
watch: { |
||||
term (val) { |
||||
this.fetchResults(val) |
||||
} |
||||
}, |
||||
methods: { |
||||
fetchResults (term) { |
||||
clearTimeout(this.timeout) |
||||
this.timeout = setTimeout(() => { |
||||
this.results = [] |
||||
if (term) { |
||||
this.query(term).then((results) => { this.results = results }) |
||||
} |
||||
}, debounceMilliseconds) |
||||
}, |
||||
onInputClick () { |
||||
this.resultsVisible = true |
||||
}, |
||||
onClickOutside () { |
||||
this.resultsVisible = false |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,59 @@ |
||||
<template> |
||||
<div |
||||
v-click-outside="onClickOutside" |
||||
class="autosuggest" |
||||
> |
||||
<input |
||||
v-model="term" |
||||
:placeholder="placeholder" |
||||
class="autosuggest-input" |
||||
@click="onInputClick" |
||||
> |
||||
<div |
||||
v-if="resultsVisible && filtered.length > 0" |
||||
class="autosuggest-results" |
||||
> |
||||
<slot |
||||
v-for="item in filtered" |
||||
:item="item" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script src="./autosuggest.js"></script> |
||||
|
||||
<style lang="scss"> |
||||
@import "../../variables"; |
||||
|
||||
.autosuggest { |
||||
position: relative; |
||||
|
||||
&-input { |
||||
display: block; |
||||
width: 100%; |
||||
} |
||||
|
||||
&-results { |
||||
position: absolute; |
||||
left: 0; |
||||
top: 100%; |
||||
right: 0; |
||||
max-height: 400px; |
||||
background-color: $fallback--bg; |
||||
background-color: var(--bg, $fallback--bg); |
||||
border-style: solid; |
||||
border-width: 1px; |
||||
border-color: $fallback--border; |
||||
border-color: var(--border, $fallback--border); |
||||
border-radius: $fallback--inputRadius; |
||||
border-radius: var(--inputRadius, $fallback--inputRadius); |
||||
border-top-left-radius: 0; |
||||
border-top-right-radius: 0; |
||||
box-shadow: 1px 1px 4px rgb(0 0 0 / 60%); |
||||
box-shadow: var(--panelShadow); |
||||
overflow-y: auto; |
||||
z-index: 1; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,21 @@ |
||||
import UserAvatar from '../user_avatar/user_avatar.vue' |
||||
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' |
||||
|
||||
const AvatarList = { |
||||
props: ['users'], |
||||
computed: { |
||||
slicedUsers () { |
||||
return this.users ? this.users.slice(0, 15) : [] |
||||
} |
||||
}, |
||||
components: { |
||||
UserAvatar |
||||
}, |
||||
methods: { |
||||
userProfileLink (user) { |
||||
return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames) |
||||
} |
||||
} |
||||
} |
||||
|
||||
export default AvatarList |
||||
@ -0,0 +1,46 @@ |
||||
<template> |
||||
<div class="avatars"> |
||||
<router-link |
||||
v-for="user in slicedUsers" |
||||
:key="user.id" |
||||
:to="userProfileLink(user)" |
||||
class="avatars-item" |
||||
> |
||||
<UserAvatar |
||||
:user="user" |
||||
class="avatar-small" |
||||
/> |
||||
</router-link> |
||||
</div> |
||||
</template> |
||||
|
||||
<script src="./avatar_list.js"></script> |
||||
|
||||
<style lang="scss"> |
||||
@import "../../variables"; |
||||
|
||||
.avatars { |
||||
display: flex; |
||||
margin: 0; |
||||
padding: 0; |
||||
|
||||
// For hiding overflowing elements |
||||
flex-wrap: wrap; |
||||
height: 24px; |
||||
|
||||
.avatars-item { |
||||
margin: 0 0 5px 5px; |
||||
|
||||
&:first-child { |
||||
padding-left: 5px; |
||||
} |
||||
|
||||
.avatar-small { |
||||
border-radius: $fallback--avatarAltRadius; |
||||
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); |
||||
height: 24px; |
||||
width: 24px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,24 @@ |
||||
import UserPopover from '../user_popover/user_popover.vue' |
||||
import UserAvatar from '../user_avatar/user_avatar.vue' |
||||
import UserLink from '../user_link/user_link.vue' |
||||
import RichContent from 'src/components/rich_content/rich_content.jsx' |
||||
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' |
||||
|
||||
const BasicUserCard = { |
||||
props: [ |
||||
'user' |
||||
], |
||||
components: { |
||||
UserPopover, |
||||
UserAvatar, |
||||
RichContent, |
||||
UserLink |
||||
}, |
||||
methods: { |
||||
userProfileLink (user) { |
||||
return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames) |
||||
} |
||||
} |
||||
} |
||||
|
||||
export default BasicUserCard |
||||
@ -0,0 +1,85 @@ |
||||
<template> |
||||
<div class="basic-user-card"> |
||||
<router-link |
||||
:to="userProfileLink(user)" |
||||
@click.prevent |
||||
> |
||||
<UserPopover |
||||
:user-id="user.id" |
||||
:overlay-centers="true" |
||||
overlay-centers-selector=".avatar" |
||||
> |
||||
<UserAvatar |
||||
class="user-avatar avatar" |
||||
:user="user" |
||||
@click.prevent |
||||
/> |
||||
</UserPopover> |
||||
</router-link> |
||||
<div |
||||
class="basic-user-card-collapsed-content" |
||||
> |
||||
<div |
||||
:title="user.name" |
||||
class="basic-user-card-user-name" |
||||
> |
||||
<RichContent |
||||
class="basic-user-card-user-name-value" |
||||
:html="user.name" |
||||
:emoji="user.emoji" |
||||
/> |
||||
</div> |
||||
<div> |
||||
<user-link |
||||
class="basic-user-card-screen-name" |
||||
:user="user" |
||||
/> |
||||
</div> |
||||
<slot /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script src="./basic_user_card.js"></script> |
||||
|
||||
<style lang="scss"> |
||||
.basic-user-card { |
||||
display: flex; |
||||
flex: 1 0; |
||||
margin: 0; |
||||
padding: 0.6em 1em; |
||||
|
||||
--emoji-size: 14px; |
||||
|
||||
&-collapsed-content { |
||||
margin-left: 0.7em; |
||||
text-align: left; |
||||
flex: 1; |
||||
min-width: 0; |
||||
} |
||||
|
||||
&-user-name { |
||||
img { |
||||
object-fit: contain; |
||||
height: 16px; |
||||
width: 16px; |
||||
vertical-align: middle; |
||||
} |
||||
} |
||||
|
||||
&-user-name-value, |
||||
&-screen-name { |
||||
display: inline-block; |
||||
max-width: 100%; |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
} |
||||
|
||||
&-expanded-content { |
||||
flex: 1; |
||||
margin-left: 0.7em; |
||||
min-width: 0; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,40 @@ |
||||
import BasicUserCard from '../basic_user_card/basic_user_card.vue' |
||||
|
||||
const BlockCard = { |
||||
props: ['userId'], |
||||
data () { |
||||
return { |
||||
progress: false |
||||
} |
||||
}, |
||||
computed: { |
||||
user () { |
||||
return this.$store.getters.findUser(this.userId) |
||||
}, |
||||
relationship () { |
||||
return this.$store.getters.relationship(this.userId) |
||||
}, |
||||
blocked () { |
||||
return this.relationship.blocking |
||||
} |
||||
}, |
||||
components: { |
||||
BasicUserCard |
||||
}, |
||||
methods: { |
||||
unblockUser () { |
||||
this.progress = true |
||||
this.$store.dispatch('unblockUser', this.user.id).then(() => { |
||||
this.progress = false |
||||
}) |
||||
}, |
||||
blockUser () { |
||||
this.progress = true |
||||
this.$store.dispatch('blockUser', this.user.id).then(() => { |
||||
this.progress = false |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
|
||||
export default BlockCard |
||||
@ -0,0 +1,45 @@ |
||||
<template> |
||||
<basic-user-card :user="user"> |
||||
<div class="block-card-content-container"> |
||||
<button |
||||
v-if="blocked" |
||||
class="btn button-default" |
||||
:disabled="progress" |
||||
@click="unblockUser" |
||||
> |
||||
<template v-if="progress"> |
||||
{{ $t('user_card.unblock_progress') }} |
||||
</template> |
||||
<template v-else> |
||||
{{ $t('user_card.unblock') }} |
||||
</template> |
||||
</button> |
||||
<button |
||||
v-else |
||||
class="btn button-default" |
||||
:disabled="progress" |
||||
@click="blockUser" |
||||
> |
||||
<template v-if="progress"> |
||||
{{ $t('user_card.block_progress') }} |
||||
</template> |
||||
<template v-else> |
||||
{{ $t('user_card.block') }} |
||||
</template> |
||||
</button> |
||||
</div> |
||||
</basic-user-card> |
||||
</template> |
||||
|
||||
<script src="./block_card.js"></script> |
||||
|
||||
<style lang="scss"> |
||||
.block-card-content-container { |
||||
margin-top: 0.5em; |
||||
text-align: right; |
||||
|
||||
button { |
||||
width: 10em; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,38 @@ |
||||
import { mapGetters } from 'vuex' |
||||
import { library } from '@fortawesome/fontawesome-svg-core' |
||||
import { faBookmark } from '@fortawesome/free-solid-svg-icons' |
||||
import { |
||||
faBookmark as faBookmarkRegular |
||||
} from '@fortawesome/free-regular-svg-icons' |
||||
|
||||
library.add( |
||||
faBookmark, |
||||
faBookmarkRegular |
||||
) |
||||
|
||||
const BookmarkButton = { |
||||
props: ['status', 'loggedIn'], |
||||
data () { |
||||
return { |
||||
animated: false |
||||
} |
||||
}, |
||||
methods: { |
||||
favorite () { |
||||
if (!this.status.bookmarked) { |
||||
this.$store.dispatch('bookmark', { id: this.status.id }) |
||||
} else { |
||||
this.$store.dispatch('unbookmark', { id: this.status.id }) |
||||
} |
||||
this.animated = true |
||||
setTimeout(() => { |
||||
this.animated = false |
||||
}, 500) |
||||
} |
||||
}, |
||||
computed: { |
||||
...mapGetters(['mergedConfig']) |
||||
} |
||||
} |
||||
|
||||
export default BookmarkButton |
||||
@ -0,0 +1,56 @@ |
||||
<template> |
||||
<div class="BookmarkButton"> |
||||
<button |
||||
v-if="loggedIn" |
||||
class="button-unstyled interactive" |
||||
:class="status.bookmarked && '-bookmarked'" |
||||
:title="$t('tool_tip.bookmark')" |
||||
@click.prevent="favorite()" |
||||
> |
||||
<FAIcon |
||||
class="fa-scale-110 fa-old-padding" |
||||
:icon="[status.bookmarked ? 'fas' : 'far', 'bookmark']" |
||||
:spin="animated" |
||||
/> |
||||
</button> |
||||
<span v-else> |
||||
<FAIcon |
||||
class="fa-scale-110 fa-old-padding" |
||||
:title="$t('tool_tip.bookmark')" |
||||
:icon="['far', 'bookmark']" |
||||
/> |
||||
</span> |
||||
</div> |
||||
</template> |
||||
|
||||
<script src="./bookmark_button.js" ></script> |
||||
|
||||
<style lang="scss"> |
||||
@import '../../_variables.scss'; |
||||
|
||||
.BookmarkButton { |
||||
display: flex; |
||||
|
||||
> :first-child { |
||||
padding: 10px; |
||||
margin: -10px -8px -10px -10px; |
||||
} |
||||
|
||||
.action-counter { |
||||
pointer-events: none; |
||||
user-select: none; |
||||
} |
||||
|
||||
.interactive { |
||||
.svg-inline--fa { |
||||
animation-duration: 0.6s; |
||||
} |
||||
|
||||
&:hover .svg-inline--fa, |
||||
&.-bookmarked .svg-inline--fa { |
||||
color: $fallback--cBlue; |
||||
color: var(--cBlue, $fallback--cBlue); |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,17 @@ |
||||
import Timeline from '../timeline/timeline.vue' |
||||
|
||||
const Bookmarks = { |
||||
computed: { |
||||
timeline () { |
||||
return this.$store.state.statuses.timelines.bookmarks |
||||
} |
||||
}, |
||||
components: { |
||||
Timeline |
||||
}, |
||||
unmounted () { |
||||
this.$store.commit('clearTimeline', { timeline: 'bookmarks' }) |
||||
} |
||||
} |
||||
|
||||
export default Bookmarks |
||||
@ -0,0 +1,9 @@ |
||||
<template> |
||||
<Timeline |
||||
:title="$t('nav.bookmarks')" |
||||
:timeline="timeline" |
||||
:timeline-name="'bookmarks'" |
||||
/> |
||||
</template> |
||||
|
||||
<script src="./bookmark_timeline.js"></script> |
||||
@ -0,0 +1,348 @@ |
||||
import _ from 'lodash' |
||||
import { WSConnectionStatus } from '../../services/api/api.service.js' |
||||
import { mapGetters, mapState } from 'vuex' |
||||
import ChatMessage from '../chat_message/chat_message.vue' |
||||
import PostStatusForm from '../post_status_form/post_status_form.vue' |
||||
import ChatTitle from '../chat_title/chat_title.vue' |
||||
import chatService from '../../services/chat_service/chat_service.js' |
||||
import { promiseInterval } from '../../services/promise_interval/promise_interval.js' |
||||
import { getScrollPosition, getNewTopPosition, isBottomedOut, isScrollable } from './chat_layout_utils.js' |
||||
import { library } from '@fortawesome/fontawesome-svg-core' |
||||
import { |
||||
faChevronDown, |
||||
faChevronLeft |
||||
} from '@fortawesome/free-solid-svg-icons' |
||||
import { buildFakeMessage } from '../../services/chat_utils/chat_utils.js' |
||||
|
||||
library.add( |
||||
faChevronDown, |
||||
faChevronLeft |
||||
) |
||||
|
||||
const BOTTOMED_OUT_OFFSET = 10 |
||||
const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 10 |
||||
const SAFE_RESIZE_TIME_OFFSET = 100 |
||||
const MARK_AS_READ_DELAY = 1500 |
||||
const MAX_RETRIES = 10 |
||||
|
||||
const Chat = { |
||||
components: { |
||||
ChatMessage, |
||||
ChatTitle, |
||||
PostStatusForm |
||||
}, |
||||
data () { |
||||
return { |
||||
jumpToBottomButtonVisible: false, |
||||
hoveredMessageChainId: undefined, |
||||
lastScrollPosition: {}, |
||||
scrollableContainerHeight: '100%', |
||||
errorLoadingChat: false, |
||||
messageRetriers: {} |
||||
} |
||||
}, |
||||
created () { |
||||
this.startFetching() |
||||
window.addEventListener('resize', this.handleResize) |
||||
}, |
||||
mounted () { |
||||
window.addEventListener('scroll', this.handleScroll) |
||||
if (typeof document.hidden !== 'undefined') { |
||||
document.addEventListener('visibilitychange', this.handleVisibilityChange, false) |
||||
} |
||||
|
||||
this.$nextTick(() => { |
||||
this.handleResize() |
||||
}) |
||||
}, |
||||
unmounted () { |
||||
window.removeEventListener('scroll', this.handleScroll) |
||||
window.removeEventListener('resize', this.handleResize) |
||||
if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false) |
||||
this.$store.dispatch('clearCurrentChat') |
||||
}, |
||||
computed: { |
||||
recipient () { |
||||
return this.currentChat && this.currentChat.account |
||||
}, |
||||
recipientId () { |
||||
return this.$route.params.recipient_id |
||||
}, |
||||
formPlaceholder () { |
||||
if (this.recipient) { |
||||
return this.$t('chats.message_user', { nickname: this.recipient.screen_name_ui }) |
||||
} else { |
||||
return '' |
||||
} |
||||
}, |
||||
chatViewItems () { |
||||
return chatService.getView(this.currentChatMessageService) |
||||
}, |
||||
newMessageCount () { |
||||
return this.currentChatMessageService && this.currentChatMessageService.newMessageCount |
||||
}, |
||||
streamingEnabled () { |
||||
return this.mergedConfig.useStreamingApi && this.mastoUserSocketStatus === WSConnectionStatus.JOINED |
||||
}, |
||||
...mapGetters([ |
||||
'currentChat', |
||||
'currentChatMessageService', |
||||
'findOpenedChatByRecipientId', |
||||
'mergedConfig' |
||||
]), |
||||
...mapState({ |
||||
backendInteractor: state => state.api.backendInteractor, |
||||
mastoUserSocketStatus: state => state.api.mastoUserSocketStatus, |
||||
mobileLayout: state => state.interface.layoutType === 'mobile', |
||||
currentUser: state => state.users.currentUser |
||||
}) |
||||
}, |
||||
watch: { |
||||
chatViewItems () { |
||||
// We don't want to scroll to the bottom on a new message when the user is viewing older messages.
|
||||
// Therefore we need to know whether the scroll position was at the bottom before the DOM update.
|
||||
const bottomedOutBeforeUpdate = this.bottomedOut(BOTTOMED_OUT_OFFSET) |
||||
this.$nextTick(() => { |
||||
if (bottomedOutBeforeUpdate) { |
||||
this.scrollDown() |
||||
} |
||||
}) |
||||
}, |
||||
$route: function () { |
||||
this.startFetching() |
||||
}, |
||||
mastoUserSocketStatus (newValue) { |
||||
if (newValue === WSConnectionStatus.JOINED) { |
||||
this.fetchChat({ isFirstFetch: true }) |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
// Used to animate the avatar near the first message of the message chain when any message belonging to the chain is hovered
|
||||
onMessageHover ({ isHovered, messageChainId }) { |
||||
this.hoveredMessageChainId = isHovered ? messageChainId : undefined |
||||
}, |
||||
onFilesDropped () { |
||||
this.$nextTick(() => { |
||||
this.handleResize() |
||||
}) |
||||
}, |
||||
handleVisibilityChange () { |
||||
this.$nextTick(() => { |
||||
if (!document.hidden && this.bottomedOut(BOTTOMED_OUT_OFFSET)) { |
||||
this.scrollDown({ forceRead: true }) |
||||
} |
||||
}) |
||||
}, |
||||
// "Sticks" scroll to bottom instead of top, helps with OSK resizing the viewport
|
||||
handleResize (opts = {}) { |
||||
const { delayed = false } = opts |
||||
|
||||
if (delayed) { |
||||
setTimeout(() => { |
||||
this.handleResize({ ...opts, delayed: false }) |
||||
}, SAFE_RESIZE_TIME_OFFSET) |
||||
return |
||||
} |
||||
|
||||
this.$nextTick(() => { |
||||
const { offsetHeight = undefined } = getScrollPosition() |
||||
const diff = offsetHeight - this.lastScrollPosition.offsetHeight |
||||
if (diff !== 0 && !this.bottomedOut()) { |
||||
this.$nextTick(() => { |
||||
window.scrollBy({ top: -Math.trunc(diff) }) |
||||
}) |
||||
} |
||||
this.lastScrollPosition = getScrollPosition() |
||||
}) |
||||
}, |
||||
scrollDown (options = {}) { |
||||
const { behavior = 'auto', forceRead = false } = options |
||||
this.$nextTick(() => { |
||||
window.scrollTo({ top: document.documentElement.scrollHeight, behavior }) |
||||
}) |
||||
if (forceRead) { |
||||
this.readChat() |
||||
} |
||||
}, |
||||
readChat () { |
||||
if (!(this.currentChatMessageService && this.currentChatMessageService.maxId)) { return } |
||||
if (document.hidden) { return } |
||||
const lastReadId = this.currentChatMessageService.maxId |
||||
this.$store.dispatch('readChat', { |
||||
id: this.currentChat.id, |
||||
lastReadId |
||||
}) |
||||
}, |
||||
bottomedOut (offset) { |
||||
return isBottomedOut(offset) |
||||
}, |
||||
reachedTop () { |
||||
return window.scrollY <= 0 |
||||
}, |
||||
cullOlderCheck () { |
||||
window.setTimeout(() => { |
||||
if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) { |
||||
this.$store.dispatch('cullOlderMessages', this.currentChatMessageService.chatId) |
||||
} |
||||
}, 5000) |
||||
}, |
||||
handleScroll: _.throttle(function () { |
||||
this.lastScrollPosition = getScrollPosition() |
||||
if (!this.currentChat) { return } |
||||
|
||||
if (this.reachedTop()) { |
||||
this.fetchChat({ maxId: this.currentChatMessageService.minId }) |
||||
} else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) { |
||||
this.jumpToBottomButtonVisible = false |
||||
this.cullOlderCheck() |
||||
if (this.newMessageCount > 0) { |
||||
// Use a delay before marking as read to prevent situation where new messages
|
||||
// arrive just as you're leaving the view and messages that you didn't actually
|
||||
// get to see get marked as read.
|
||||
window.setTimeout(() => { |
||||
// Don't mark as read if the element doesn't exist, user has left chat view
|
||||
if (this.$el) this.readChat() |
||||
}, MARK_AS_READ_DELAY) |
||||
} |
||||
} else { |
||||
this.jumpToBottomButtonVisible = true |
||||
} |
||||
}, 200), |
||||
handleScrollUp (positionBeforeLoading) { |
||||
const positionAfterLoading = getScrollPosition() |
||||
window.scrollTo({ |
||||
top: getNewTopPosition(positionBeforeLoading, positionAfterLoading) |
||||
}) |
||||
}, |
||||
fetchChat ({ isFirstFetch = false, fetchLatest = false, maxId }) { |
||||
const chatMessageService = this.currentChatMessageService |
||||
if (!chatMessageService) { return } |
||||
if (fetchLatest && this.streamingEnabled) { return } |
||||
|
||||
const chatId = chatMessageService.chatId |
||||
const fetchOlderMessages = !!maxId |
||||
const sinceId = fetchLatest && chatMessageService.maxId |
||||
|
||||
return this.backendInteractor.chatMessages({ id: chatId, maxId, sinceId }) |
||||
.then((messages) => { |
||||
// Clear the current chat in case we're recovering from a ws connection loss.
|
||||
if (isFirstFetch) { |
||||
chatService.clear(chatMessageService) |
||||
} |
||||
|
||||
const positionBeforeUpdate = getScrollPosition() |
||||
this.$store.dispatch('addChatMessages', { chatId, messages }).then(() => { |
||||
this.$nextTick(() => { |
||||
if (fetchOlderMessages) { |
||||
this.handleScrollUp(positionBeforeUpdate) |
||||
} |
||||
|
||||
// In vertical screens, the first batch of fetched messages may not always take the
|
||||
// full height of the scrollable container.
|
||||
// If this is the case, we want to fetch the messages until the scrollable container
|
||||
// is fully populated so that the user has the ability to scroll up and load the history.
|
||||
if (!isScrollable() && messages.length > 0) { |
||||
this.fetchChat({ maxId: this.currentChatMessageService.minId }) |
||||
} |
||||
}) |
||||
}) |
||||
}) |
||||
}, |
||||
async startFetching () { |
||||
let chat = this.findOpenedChatByRecipientId(this.recipientId) |
||||
if (!chat) { |
||||
try { |
||||
chat = await this.backendInteractor.getOrCreateChat({ accountId: this.recipientId }) |
||||
} catch (e) { |
||||
console.error('Error creating or getting a chat', e) |
||||
this.errorLoadingChat = true |
||||
} |
||||
} |
||||
if (chat) { |
||||
this.$nextTick(() => { |
||||
this.scrollDown({ forceRead: true }) |
||||
}) |
||||
this.$store.dispatch('addOpenedChat', { chat }) |
||||
this.doStartFetching() |
||||
} |
||||
}, |
||||
doStartFetching () { |
||||
this.$store.dispatch('startFetchingCurrentChat', { |
||||
fetcher: () => promiseInterval(() => this.fetchChat({ fetchLatest: true }), 5000) |
||||
}) |
||||
this.fetchChat({ isFirstFetch: true }) |
||||
}, |
||||
handleAttachmentPosting () { |
||||
this.$nextTick(() => { |
||||
this.handleResize() |
||||
// When the posting form size changes because of a media attachment, we need an extra resize
|
||||
// to account for the potential delay in the DOM update.
|
||||
this.scrollDown({ forceRead: true }) |
||||
}) |
||||
}, |
||||
sendMessage ({ status, media, idempotencyKey }) { |
||||
const params = { |
||||
id: this.currentChat.id, |
||||
content: status, |
||||
idempotencyKey |
||||
} |
||||
|
||||
if (media[0]) { |
||||
params.mediaId = media[0].id |
||||
} |
||||
|
||||
const fakeMessage = buildFakeMessage({ |
||||
attachments: media, |
||||
chatId: this.currentChat.id, |
||||
content: status, |
||||
userId: this.currentUser.id, |
||||
idempotencyKey |
||||
}) |
||||
|
||||
this.$store.dispatch('addChatMessages', { |
||||
chatId: this.currentChat.id, |
||||
messages: [fakeMessage] |
||||
}).then(() => { |
||||
this.handleAttachmentPosting() |
||||
}) |
||||
|
||||
return this.doSendMessage({ params, fakeMessage, retriesLeft: MAX_RETRIES }) |
||||
}, |
||||
doSendMessage ({ params, fakeMessage, retriesLeft = MAX_RETRIES }) { |
||||
if (retriesLeft <= 0) return |
||||
|
||||
this.backendInteractor.sendChatMessage(params) |
||||
.then(data => { |
||||
this.$store.dispatch('addChatMessages', { |
||||
chatId: this.currentChat.id, |
||||
updateMaxId: false, |
||||
messages: [{ ...data, fakeId: fakeMessage.id }] |
||||
}) |
||||
|
||||
return data |
||||
}) |
||||
.catch(error => { |
||||
console.error('Error sending message', error) |
||||
this.$store.dispatch('handleMessageError', { |
||||
chatId: this.currentChat.id, |
||||
fakeId: fakeMessage.id, |
||||
isRetry: retriesLeft !== MAX_RETRIES |
||||
}) |
||||
if ((error.statusCode >= 500 && error.statusCode < 600) || error.message === 'Failed to fetch') { |
||||
this.messageRetriers[fakeMessage.id] = setTimeout(() => { |
||||
this.doSendMessage({ params, fakeMessage, retriesLeft: retriesLeft - 1 }) |
||||
}, 1000 * (2 ** (MAX_RETRIES - retriesLeft))) |
||||
} |
||||
return {} |
||||
}) |
||||
|
||||
return Promise.resolve(fakeMessage) |
||||
}, |
||||
goBack () { |
||||
this.$router.push({ name: 'chats', params: { username: this.currentUser.screen_name } }) |
||||
} |
||||
} |
||||
} |
||||
|
||||
export default Chat |
||||
@ -0,0 +1,108 @@ |
||||
.chat-view { |
||||
display: flex; |
||||
height: 100%; |
||||
|
||||
.chat-view-inner { |
||||
height: auto; |
||||
width: 100%; |
||||
overflow: visible; |
||||
display: flex; |
||||
} |
||||
|
||||
.chat-view-body { |
||||
box-sizing: border-box; |
||||
background-color: var(--chatBg, $fallback--bg); |
||||
display: flex; |
||||
flex-direction: column; |
||||
width: 100%; |
||||
overflow: visible; |
||||
min-height: calc(100vh - var(--navbar-height)); |
||||
margin: 0; |
||||
border-radius: 10px 10px 0 0; |
||||
border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0; |
||||
|
||||
&::after { |
||||
border-radius: 0; |
||||
} |
||||
} |
||||
|
||||
.message-list { |
||||
padding: 0 0.8em; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: end; |
||||
} |
||||
|
||||
.footer { |
||||
position: sticky; |
||||
bottom: 0; |
||||
background-color: $fallback--bg; |
||||
background-color: var(--bg, $fallback--bg); |
||||
z-index: 1; |
||||
} |
||||
|
||||
.chat-view-heading { |
||||
grid-template-columns: auto minmax(50%, 1fr); |
||||
} |
||||
|
||||
.go-back-button { |
||||
text-align: center; |
||||
line-height: 1; |
||||
height: 100%; |
||||
align-self: start; |
||||
width: var(--__panel-heading-height-inner); |
||||
} |
||||
|
||||
.jump-to-bottom-button { |
||||
width: 2.5em; |
||||
height: 2.5em; |
||||
border-radius: 100%; |
||||
position: absolute; |
||||
right: 1.3em; |
||||
top: -3.2em; |
||||
background-color: $fallback--fg; |
||||
background-color: var(--btn, $fallback--fg); |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
box-shadow: 0 1px 1px rgb(0 0 0 / 30%), 0 2px 4px rgb(0 0 0 / 30%); |
||||
z-index: 10; |
||||
transition: 0.35s all; |
||||
transition-timing-function: cubic-bezier(0, 1, 0.5, 1); |
||||
opacity: 0; |
||||
visibility: hidden; |
||||
cursor: pointer; |
||||
|
||||
&.visible { |
||||
opacity: 1; |
||||
visibility: visible; |
||||
} |
||||
|
||||
i { |
||||
font-size: 1em; |
||||
color: $fallback--text; |
||||
color: var(--text, $fallback--text); |
||||
} |
||||
|
||||
.unread-message-count { |
||||
font-size: 0.8em; |
||||
left: 50%; |
||||
margin-top: -1rem; |
||||
padding: 0.1em; |
||||
border-radius: 50px; |
||||
position: absolute; |
||||
} |
||||
|
||||
.chat-loading-error { |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: flex-end; |
||||
height: 100%; |
||||
|
||||
.error { |
||||
width: 100%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,100 @@ |
||||
<template> |
||||
<div class="chat-view"> |
||||
<div class="chat-view-inner"> |
||||
<div |
||||
ref="inner" |
||||
class="panel-default panel chat-view-body" |
||||
> |
||||
<div |
||||
ref="header" |
||||
class="panel-heading -sticky chat-view-heading" |
||||
> |
||||
<button |
||||
class="button-unstyled go-back-button" |
||||
@click="goBack" |
||||
> |
||||
<FAIcon |
||||
size="lg" |
||||
icon="chevron-left" |
||||
/> |
||||
</button> |
||||
<div class="title text-center"> |
||||
<ChatTitle |
||||
:user="recipient" |
||||
:with-avatar="true" |
||||
/> |
||||
</div> |
||||
</div> |
||||
<div |
||||
class="message-list" |
||||
:style="{ height: scrollableContainerHeight }" |
||||
> |
||||
<template v-if="!errorLoadingChat"> |
||||
<ChatMessage |
||||
v-for="chatViewItem in chatViewItems" |
||||
:key="chatViewItem.id" |
||||
:author="recipient" |
||||
:chat-view-item="chatViewItem" |
||||
:hovered-message-chain="chatViewItem.messageChainId === hoveredMessageChainId" |
||||
@hover="onMessageHover" |
||||
/> |
||||
</template> |
||||
<div |
||||
v-else |
||||
class="chat-loading-error" |
||||
> |
||||
<div class="alert error"> |
||||
{{ $t('chats.error_loading_chat') }} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div |
||||
ref="footer" |
||||
class="panel-body footer" |
||||
> |
||||
<div |
||||
class="jump-to-bottom-button" |
||||
:class="{ 'visible': jumpToBottomButtonVisible }" |
||||
@click="scrollDown({ behavior: 'smooth' })" |
||||
> |
||||
<span> |
||||
<FAIcon icon="chevron-down" /> |
||||
<div |
||||
v-if="newMessageCount" |
||||
class="badge badge-notification unread-chat-count unread-message-count" |
||||
> |
||||
{{ newMessageCount }} |
||||
</div> |
||||
</span> |
||||
</div> |
||||
<PostStatusForm |
||||
:disable-subject="true" |
||||
:disable-scope-selector="true" |
||||
:disable-notice="true" |
||||
:disable-lock-warning="true" |
||||
:disable-polls="true" |
||||
:disable-sensitivity-checkbox="true" |
||||
:disable-submit="errorLoadingChat || !currentChat" |
||||
:disable-preview="true" |
||||
:optimistic-posting="true" |
||||
:post-handler="sendMessage" |
||||
:submit-on-enter="!mobileLayout" |
||||
:preserve-focus="!mobileLayout" |
||||
:auto-focus="!mobileLayout" |
||||
:placeholder="formPlaceholder" |
||||
:file-limit="1" |
||||
max-height="160" |
||||
emoji-picker-placement="top" |
||||
@resize="handleResize" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script src="./chat.js"></script> |
||||
<style lang="scss"> |
||||
@import "../../variables"; |
||||
@import "./chat"; |
||||
</style> |
||||
@ -0,0 +1,24 @@ |
||||
// Captures a scroll position
|
||||
export const getScrollPosition = () => { |
||||
return { |
||||
scrollTop: window.scrollY, |
||||
scrollHeight: document.documentElement.scrollHeight, |
||||
offsetHeight: window.innerHeight |
||||
} |
||||
} |
||||
|
||||
// A helper function that is used to keep the scroll position fixed as the new elements are added to the top
|
||||
// Takes two scroll positions, before and after the update.
|
||||
export const getNewTopPosition = (previousPosition, newPosition) => { |
||||
return previousPosition.scrollTop + (newPosition.scrollHeight - previousPosition.scrollHeight) |
||||
} |
||||
|
||||
export const isBottomedOut = (offset = 0) => { |
||||
const scrollHeight = window.scrollY + offset |
||||
const totalHeight = document.documentElement.scrollHeight - window.innerHeight |
||||
return totalHeight <= scrollHeight |
||||
} |
||||
// Returns whether or not the scrollbar is visible.
|
||||
export const isScrollable = () => { |
||||
return document.documentElement.scrollHeight > window.innerHeight |
||||
} |
||||
@ -0,0 +1,37 @@ |
||||
import { mapState, mapGetters } from 'vuex' |
||||
import ChatListItem from '../chat_list_item/chat_list_item.vue' |
||||
import ChatNew from '../chat_new/chat_new.vue' |
||||
import List from '../list/list.vue' |
||||
|
||||
const ChatList = { |
||||
components: { |
||||
ChatListItem, |
||||
List, |
||||
ChatNew |
||||
}, |
||||
computed: { |
||||
...mapState({ |
||||
currentUser: state => state.users.currentUser |
||||
}), |
||||
...mapGetters(['sortedChatList']) |
||||
}, |
||||
data () { |
||||
return { |
||||
isNew: false |
||||
} |
||||
}, |
||||
created () { |
||||
this.$store.dispatch('fetchChats', { latest: true }) |
||||
}, |
||||
methods: { |
||||
cancelNewChat () { |
||||
this.isNew = false |
||||
this.$store.dispatch('fetchChats', { latest: true }) |
||||
}, |
||||
newChat () { |
||||
this.isNew = true |
||||
} |
||||
} |
||||
} |
||||
|
||||
export default ChatList |
||||
@ -0,0 +1,64 @@ |
||||
<template> |
||||
<div v-if="isNew"> |
||||
<ChatNew @cancel="cancelNewChat" /> |
||||
</div> |
||||
<div |
||||
v-else |
||||
class="chat-list panel panel-default" |
||||
> |
||||
<div class="panel-heading -sticky"> |
||||
<span class="title"> |
||||
{{ $t("chats.chats") }} |
||||
</span> |
||||
<button |
||||
class="button-default" |
||||
@click="newChat" |
||||
> |
||||
{{ $t("chats.new") }} |
||||
</button> |
||||
</div> |
||||
<div class="panel-body"> |
||||
<div |
||||
v-if="sortedChatList.length > 0" |
||||
class="timeline" |
||||
> |
||||
<List :items="sortedChatList"> |
||||
<template #item="{item}"> |
||||
<ChatListItem |
||||
:key="item.id" |
||||
:compact="false" |
||||
:chat="item" |
||||
/> |
||||
</template> |
||||
</List> |
||||
</div> |
||||
<div |
||||
v-else |
||||
class="emtpy-chat-list-alert" |
||||
> |
||||
<span>{{ $t('chats.empty_chat_list_placeholder') }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script src="./chat_list.js"></script> |
||||
|
||||
<style lang="scss"> |
||||
@import "../../variables"; |
||||
|
||||
.chat-list { |
||||
min-height: 25em; |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
.emtpy-chat-list-alert { |
||||
padding: 3em; |
||||
font-size: 1.2em; |
||||
display: flex; |
||||
justify-content: center; |
||||
color: $fallback--text; |
||||
color: var(--faint, $fallback--text); |
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,69 @@ |
||||
import { mapState } from 'vuex' |
||||
import StatusBody from '../status_content/status_content.vue' |
||||
import fileType from 'src/services/file_type/file_type.service' |
||||
import UserAvatar from '../user_avatar/user_avatar.vue' |
||||
import AvatarList from '../avatar_list/avatar_list.vue' |
||||
import Timeago from '../timeago/timeago.vue' |
||||
import ChatTitle from '../chat_title/chat_title.vue' |
||||
|
||||
const ChatListItem = { |
||||
name: 'ChatListItem', |
||||
props: [ |
||||
'chat' |
||||
], |
||||
components: { |
||||
UserAvatar, |
||||
AvatarList, |
||||
Timeago, |
||||
ChatTitle, |
||||
StatusBody |
||||
}, |
||||
computed: { |
||||
...mapState({ |
||||
currentUser: state => state.users.currentUser |
||||
}), |
||||
attachmentInfo () { |
||||
if (this.chat.lastMessage.attachments.length === 0) { return } |
||||
|
||||
const types = this.chat.lastMessage.attachments.map(file => fileType.fileType(file.mimetype)) |
||||
if (types.includes('video')) { |
||||
return this.$t('file_type.video') |
||||
} else if (types.includes('audio')) { |
||||
return this.$t('file_type.audio') |
||||
} else if (types.includes('image')) { |
||||
return this.$t('file_type.image') |
||||
} else { |
||||
return this.$t('file_type.file') |
||||
} |
||||
}, |
||||
messageForStatusContent () { |
||||
const message = this.chat.lastMessage |
||||
const messageEmojis = message ? message.emojis : [] |
||||
const isYou = message && message.account_id === this.currentUser.id |
||||
const content = message ? (this.attachmentInfo || message.content) : '' |
||||
const messagePreview = isYou ? `<i>${this.$t('chats.you')}</i> ${content}` : content |
||||
return { |
||||
summary: '', |
||||
emojis: messageEmojis, |
||||
raw_html: messagePreview, |
||||
text: messagePreview, |
||||
attachments: [] |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
openChat (_e) { |
||||
if (this.chat.id) { |
||||
this.$router.push({ |
||||
name: 'chat', |
||||
params: { |
||||
username: this.currentUser.screen_name, |
||||
recipient_id: this.chat.account.id |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
export default ChatListItem |
||||
@ -0,0 +1,90 @@ |
||||
.chat-list-item { |
||||
display: flex; |
||||
flex-direction: row; |
||||
padding: 0.75em; |
||||
height: 5em; |
||||
overflow: hidden; |
||||
box-sizing: border-box; |
||||
cursor: pointer; |
||||
|
||||
:focus { |
||||
outline: none; |
||||
} |
||||
|
||||
&:hover { |
||||
background-color: var(--selectedPost, $fallback--lightBg); |
||||
box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%); |
||||
} |
||||
|
||||
.chat-list-item-left { |
||||
margin-right: 1em; |
||||
} |
||||
|
||||
.chat-list-item-center { |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
overflow: hidden; |
||||
word-wrap: break-word; |
||||
} |
||||
|
||||
.heading { |
||||
width: 100%; |
||||
display: inline-flex; |
||||
justify-content: space-between; |
||||
line-height: 1em; |
||||
} |
||||
|
||||
.heading-right { |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.name-and-account-name { |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
flex-shrink: 1; |
||||
line-height: var(--post-line-height); |
||||
} |
||||
|
||||
.chat-preview { |
||||
display: inline-flex; |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
margin: 0.35em 0; |
||||
color: $fallback--text; |
||||
color: var(--faint, $fallback--text); |
||||
width: 100%; |
||||
} |
||||
|
||||
a { |
||||
color: var(--faintLink, $fallback--link); |
||||
text-decoration: none; |
||||
pointer-events: none; |
||||
} |
||||
|
||||
&:hover .animated.avatar { |
||||
canvas { |
||||
display: none; |
||||
} |
||||
|
||||
img { |
||||
visibility: visible; |
||||
} |
||||
} |
||||
|
||||
.Avatar { |
||||
border-radius: $fallback--avatarAltRadius; |
||||
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); |
||||
} |
||||
|
||||
.chat-preview-body { |
||||
--emoji-size: 1.4em; |
||||
|
||||
padding-right: 1em; |
||||
} |
||||
|
||||
.time-wrapper { |
||||
line-height: var(--post-line-height); |
||||
} |
||||
} |
||||
@ -0,0 +1,53 @@ |
||||
<template> |
||||
<div |
||||
class="chat-list-item" |
||||
@click.capture.prevent="openChat" |
||||
> |
||||
<div class="chat-list-item-left"> |
||||
<UserAvatar |
||||
:user="chat.account" |
||||
height="48px" |
||||
width="48px" |
||||
/> |
||||
</div> |
||||
<div class="chat-list-item-center"> |
||||
<div class="heading"> |
||||
<span |
||||
v-if="chat.account" |
||||
class="name-and-account-name" |
||||
> |
||||
<ChatTitle |
||||
:user="chat.account" |
||||
/> |
||||
</span> |
||||
<span class="heading-right" /> |
||||
<div class="time-wrapper"> |
||||
<Timeago |
||||
:time="chat.updated_at" |
||||
:auto-update="60" |
||||
/> |
||||
</div> |
||||
</div> |
||||
<div class="chat-preview"> |
||||
<StatusBody |
||||
class="chat-preview-body" |
||||
:status="messageForStatusContent" |
||||
:single-line="true" |
||||
/> |
||||
<div |
||||
v-if="chat.unread > 0" |
||||
class="badge badge-notification unread-chat-count" |
||||
> |
||||
{{ chat.unread }} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script src="./chat_list_item.js"></script> |
||||
|
||||
<style lang="scss"> |
||||
@import "../../variables"; |
||||
@import "./chat_list_item"; |
||||
</style> |
||||
@ -0,0 +1,106 @@ |
||||
import { mapState, mapGetters } from 'vuex' |
||||
import Popover from '../popover/popover.vue' |
||||
import Attachment from '../attachment/attachment.vue' |
||||
import UserAvatar from '../user_avatar/user_avatar.vue' |
||||
import Gallery from '../gallery/gallery.vue' |
||||
import LinkPreview from '../link-preview/link-preview.vue' |
||||
import StatusContent from '../status_content/status_content.vue' |
||||
import ChatMessageDate from '../chat_message_date/chat_message_date.vue' |
||||
import { defineAsyncComponent } from 'vue' |
||||
import { library } from '@fortawesome/fontawesome-svg-core' |
||||
import { |
||||
faTimes, |
||||
faEllipsisH |
||||
} from '@fortawesome/free-solid-svg-icons' |
||||
|
||||
library.add( |
||||
faTimes, |
||||
faEllipsisH |
||||
) |
||||
|
||||
const ChatMessage = { |
||||
name: 'ChatMessage', |
||||
props: [ |
||||
'author', |
||||
'edited', |
||||
'noHeading', |
||||
'chatViewItem', |
||||
'hoveredMessageChain' |
||||
], |
||||
emits: ['hover'], |
||||
components: { |
||||
Popover, |
||||
Attachment, |
||||
StatusContent, |
||||
UserAvatar, |
||||
Gallery, |
||||
LinkPreview, |
||||
ChatMessageDate, |
||||
UserPopover: defineAsyncComponent(() => import('../user_popover/user_popover.vue')) |
||||
}, |
||||
computed: { |
||||
// Returns HH:MM (hours and minutes) in local time.
|
||||
createdAt () { |
||||
const time = this.chatViewItem.data.created_at |
||||
return time.toLocaleTimeString('en', { hour: '2-digit', minute: '2-digit', hour12: false }) |
||||
}, |
||||
isCurrentUser () { |
||||
return this.message.account_id === this.currentUser.id |
||||
}, |
||||
message () { |
||||
return this.chatViewItem.data |
||||
}, |
||||
isMessage () { |
||||
return this.chatViewItem.type === 'message' |
||||
}, |
||||
messageForStatusContent () { |
||||
return { |
||||
summary: '', |
||||
emojis: this.message.emojis, |
||||
raw_html: this.message.content || '', |
||||
text: this.message.content || '', |
||||
attachments: this.message.attachments |
||||
} |
||||
}, |
||||
hasAttachment () { |
||||
return this.message.attachments.length > 0 |
||||
}, |
||||
...mapState({ |
||||
betterShadow: state => state.interface.browserSupport.cssFilter, |
||||
currentUser: state => state.users.currentUser, |
||||
restrictedNicknames: state => state.instance.restrictedNicknames |
||||
}), |
||||
popoverMarginStyle () { |
||||
if (this.isCurrentUser) { |
||||
return {} |
||||
} else { |
||||
return { left: 50 } |
||||
} |
||||
}, |
||||
...mapGetters(['mergedConfig', 'findUser']) |
||||
}, |
||||
data () { |
||||
return { |
||||
hovered: false, |
||||
menuOpened: false |
||||
} |
||||
}, |
||||
methods: { |
||||
onHover (bool) { |
||||
this.$emit('hover', { isHovered: bool, messageChainId: this.chatViewItem.messageChainId }) |
||||
}, |
||||
async deleteMessage () { |
||||
const confirmed = window.confirm(this.$t('chats.delete_confirm')) |
||||
if (confirmed) { |
||||
await this.$store.dispatch('deleteChatMessage', { |
||||
messageId: this.chatViewItem.data.id, |
||||
chatId: this.chatViewItem.data.chat_id |
||||
}) |
||||
} |
||||
this.hovered = false |
||||
this.menuOpened = false |
||||
} |
||||
} |
||||
} |
||||
|
||||
export default ChatMessage |
||||
@ -0,0 +1,181 @@ |
||||
@import "../../variables"; |
||||
|
||||
.chat-message-wrapper { |
||||
&.hovered-message-chain { |
||||
.animated.Avatar { |
||||
canvas { |
||||
display: none; |
||||
} |
||||
|
||||
img { |
||||
visibility: visible; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.chat-message-menu { |
||||
transition: opacity 0.1s; |
||||
opacity: 0; |
||||
position: absolute; |
||||
top: -0.8em; |
||||
|
||||
button { |
||||
padding-top: 0.2em; |
||||
padding-bottom: 0.2em; |
||||
} |
||||
} |
||||
|
||||
.menu-icon { |
||||
cursor: pointer; |
||||
|
||||
&:hover, |
||||
.extra-button-popover.open & { |
||||
color: $fallback--text; |
||||
color: var(--text, $fallback--text); |
||||
} |
||||
} |
||||
|
||||
.popover { |
||||
width: 12em; |
||||
} |
||||
|
||||
.chat-message { |
||||
display: flex; |
||||
padding-bottom: 0.5em; |
||||
|
||||
.status-body:hover { |
||||
--_still-image-img-visibility: visible; |
||||
--_still-image-canvas-visibility: hidden; |
||||
--_still-image-label-visibility: hidden; |
||||
} |
||||
} |
||||
|
||||
.avatar-wrapper { |
||||
margin-right: 0.72em; |
||||
width: 32px; |
||||
} |
||||
|
||||
.link-preview, |
||||
.attachments { |
||||
margin-bottom: 1em; |
||||
} |
||||
|
||||
.status { |
||||
border-radius: $fallback--chatMessageRadius; |
||||
border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius); |
||||
display: flex; |
||||
padding: 0.75em; |
||||
} |
||||
|
||||
.created-at { |
||||
position: relative; |
||||
float: right; |
||||
font-size: 0.8em; |
||||
margin: -1em 0 -0.5em; |
||||
font-style: italic; |
||||
opacity: 0.8; |
||||
} |
||||
|
||||
.without-attachment { |
||||
.message-content { |
||||
// TODO figure out how to do it properly |
||||
.RichContent::after { |
||||
margin-right: 5.4em; |
||||
content: " "; |
||||
display: inline-block; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.pending { |
||||
.status-content.media-body, |
||||
.created-at { |
||||
color: var(--faint); |
||||
} |
||||
} |
||||
|
||||
.error { |
||||
.status-content.media-body, |
||||
.created-at { |
||||
color: $fallback--cRed; |
||||
color: var(--badgeNotification, $fallback--cRed); |
||||
} |
||||
} |
||||
|
||||
.chat-message-inner { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
max-width: 80%; |
||||
min-width: 10em; |
||||
width: 100%; |
||||
} |
||||
|
||||
.outgoing { |
||||
display: flex; |
||||
flex-flow: row wrap; |
||||
align-content: 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 { |
||||
align-items: flex-end; |
||||
} |
||||
|
||||
.chat-message-menu { |
||||
right: 0.4rem; |
||||
} |
||||
} |
||||
|
||||
.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 { |
||||
left: 0.4rem; |
||||
} |
||||
} |
||||
|
||||
.chat-message-inner.with-media { |
||||
width: 100%; |
||||
|
||||
.status { |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
.visible { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
.chat-message-date-separator { |
||||
text-align: center; |
||||
margin: 1.4em 0; |
||||
font-size: 0.9em; |
||||
user-select: none; |
||||
color: $fallback--text; |
||||
color: var(--faintedText, $fallback--text); |
||||
} |
||||
@ -0,0 +1,103 @@ |
||||
<template> |
||||
<div |
||||
v-if="isMessage" |
||||
class="chat-message-wrapper" |
||||
:class="{ 'hovered-message-chain': hoveredMessageChain }" |
||||
@mouseover="onHover(true)" |
||||
@mouseleave="onHover(false)" |
||||
> |
||||
<div |
||||
class="chat-message" |
||||
:class="[{ 'outgoing': isCurrentUser, 'incoming': !isCurrentUser }]" |
||||
> |
||||
<div |
||||
v-if="!isCurrentUser" |
||||
class="avatar-wrapper" |
||||
> |
||||
<UserPopover |
||||
v-if="chatViewItem.isHead" |
||||
:user-id="author.id" |
||||
> |
||||
<UserAvatar |
||||
:compact="true" |
||||
:better-shadow="betterShadow" |
||||
:user="author" |
||||
/> |
||||
</UserPopover> |
||||
</div> |
||||
<div class="chat-message-inner"> |
||||
<div |
||||
class="status-body" |
||||
:style="{ 'min-width': message.attachment ? '80%' : '' }" |
||||
> |
||||
<div |
||||
class="media status" |
||||
:class="{ 'without-attachment': !hasAttachment, 'pending': chatViewItem.data.pending, 'error': chatViewItem.data.error }" |
||||
style="position: relative;" |
||||
@mouseenter="hovered = true" |
||||
@mouseleave="hovered = false" |
||||
> |
||||
<div |
||||
class="chat-message-menu" |
||||
:class="{ 'visible': hovered || menuOpened }" |
||||
> |
||||
<Popover |
||||
trigger="click" |
||||
placement="top" |
||||
bound-to-selector=".chat-view-inner" |
||||
:bound-to="{ x: 'container' }" |
||||
:margin="popoverMarginStyle" |
||||
@show="menuOpened = true" |
||||
@close="menuOpened = false" |
||||
> |
||||
<template #content> |
||||
<div class="dropdown-menu"> |
||||
<button |
||||
class="button-default dropdown-item dropdown-item-icon" |
||||
@click="deleteMessage" |
||||
> |
||||
<FAIcon icon="times" /> {{ $t("chats.delete") }} |
||||
</button> |
||||
</div> |
||||
</template> |
||||
<template #trigger> |
||||
<button |
||||
class="button-default menu-icon" |
||||
:title="$t('chats.more')" |
||||
> |
||||
<FAIcon icon="ellipsis-h" /> |
||||
</button> |
||||
</template> |
||||
</Popover> |
||||
</div> |
||||
<StatusContent |
||||
class="message-content" |
||||
:status="messageForStatusContent" |
||||
:full-content="true" |
||||
> |
||||
<template #footer> |
||||
<span |
||||
class="created-at" |
||||
> |
||||
{{ createdAt }} |
||||
</span> |
||||
</template> |
||||
</StatusContent> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div |
||||
v-else |
||||
class="chat-message-date-separator" |
||||
> |
||||
<ChatMessageDate :date="chatViewItem.date" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script src="./chat_message.js"></script> |
||||
<style lang="scss"> |
||||
@import "./chat_message"; |
||||
|
||||
</style> |
||||
@ -0,0 +1,26 @@ |
||||
<template> |
||||
<time> |
||||
{{ displayDate }} |
||||
</time> |
||||
</template> |
||||
|
||||
<script> |
||||
import localeService from 'src/services/locale/locale.service.js' |
||||
|
||||
export default { |
||||
name: 'Timeago', |
||||
props: ['date'], |
||||
computed: { |
||||
displayDate () { |
||||
const today = new Date() |
||||
today.setHours(0, 0, 0, 0) |
||||
|
||||
if (this.date.getTime() === today.getTime()) { |
||||
return this.$t('display_date.today') |
||||
} else { |
||||
return this.date.toLocaleDateString(localeService.internalToBrowserLocale(this.$i18n.locale), { day: 'numeric', month: 'long' }) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,83 @@ |
||||
import { mapState, mapGetters } from 'vuex' |
||||
import BasicUserCard from '../basic_user_card/basic_user_card.vue' |
||||
import UserAvatar from '../user_avatar/user_avatar.vue' |
||||
import { library } from '@fortawesome/fontawesome-svg-core' |
||||
import { |
||||
faSearch, |
||||
faChevronLeft |
||||
} from '@fortawesome/free-solid-svg-icons' |
||||
|
||||
library.add( |
||||
faSearch, |
||||
faChevronLeft |
||||
) |
||||
|
||||
const chatNew = { |
||||
components: { |
||||
BasicUserCard, |
||||
UserAvatar |
||||
}, |
||||
data () { |
||||
return { |
||||
suggestions: [], |
||||
userIds: [], |
||||
loading: false, |
||||
query: '' |
||||
} |
||||
}, |
||||
async created () { |
||||
const { chats } = await this.backendInteractor.chats() |
||||
chats.forEach(chat => this.suggestions.push(chat.account)) |
||||
}, |
||||
computed: { |
||||
users () { |
||||
return this.userIds.map(userId => this.findUser(userId)) |
||||
}, |
||||
availableUsers () { |
||||
if (this.query.length !== 0) { |
||||
return this.users |
||||
} else { |
||||
return this.suggestions |
||||
} |
||||
}, |
||||
...mapState({ |
||||
currentUser: state => state.users.currentUser, |
||||
backendInteractor: state => state.api.backendInteractor |
||||
}), |
||||
...mapGetters(['findUser']) |
||||
}, |
||||
methods: { |
||||
goBack () { |
||||
this.$emit('cancel') |
||||
}, |
||||
goToChat (user) { |
||||
this.$router.push({ name: 'chat', params: { recipient_id: user.id } }) |
||||
}, |
||||
onInput () { |
||||
this.search(this.query) |
||||
}, |
||||
addUser (user) { |
||||
this.selectedUserIds.push(user.id) |
||||
this.query = '' |
||||
}, |
||||
removeUser (userId) { |
||||
this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId) |
||||
}, |
||||
search (query) { |
||||
if (!query) { |
||||
this.loading = false |
||||
return |
||||
} |
||||
|
||||
this.loading = true |
||||
this.userIds = [] |
||||
this.$store.dispatch('search', { q: query, resolve: true, type: 'accounts' }) |
||||
.then(data => { |
||||
this.loading = false |
||||
this.userIds = data.accounts.map(a => a.id) |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
|
||||
export default chatNew |
||||
@ -0,0 +1,31 @@ |
||||
.chat-new { |
||||
.input-wrap { |
||||
display: flex; |
||||
margin: 0.7em 0.5em; |
||||
|
||||
input { |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
.search-icon { |
||||
margin-right: 0.3em; |
||||
} |
||||
|
||||
.member-list { |
||||
padding-bottom: 0.7rem; |
||||
} |
||||
|
||||
.basic-user-card:hover { |
||||
cursor: pointer; |
||||
background-color: var(--selectedPost, $fallback--lightBg); |
||||
} |
||||
|
||||
.go-back-button { |
||||
text-align: center; |
||||
line-height: 1; |
||||
height: 100%; |
||||
align-self: start; |
||||
width: var(--__panel-heading-height-inner); |
||||
} |
||||
} |
||||
@ -0,0 +1,51 @@ |
||||
<template> |
||||
<div |
||||
class="panel-default panel chat-new" |
||||
> |
||||
<div |
||||
ref="header" |
||||
class="panel-heading" |
||||
> |
||||
<button |
||||
class="button-unstyled go-back-button" |
||||
@click="goBack" |
||||
> |
||||
<FAIcon |
||||
size="lg" |
||||
icon="chevron-left" |
||||
/> |
||||
</button> |
||||
</div> |
||||
<div class="input-wrap"> |
||||
<div class="input-search"> |
||||
<FAIcon |
||||
class="search-icon fa-scale-110 fa-old-padding" |
||||
icon="search" |
||||
/> |
||||
</div> |
||||
<input |
||||
ref="search" |
||||
v-model="query" |
||||
placeholder="Search people" |
||||
@input="onInput" |
||||
> |
||||
</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" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script src="./chat_new.js"></script> |
||||
<style lang="scss"> |
||||
@import "../../variables"; |
||||
@import "./chat_new"; |
||||
</style> |
||||
@ -0,0 +1,23 @@ |
||||
import UserAvatar from '../user_avatar/user_avatar.vue' |
||||
import RichContent from 'src/components/rich_content/rich_content.jsx' |
||||
import { defineAsyncComponent } from 'vue' |
||||
|
||||
export default { |
||||
name: 'ChatTitle', |
||||
components: { |
||||
UserAvatar, |
||||
RichContent, |
||||
UserPopover: defineAsyncComponent(() => import('../user_popover/user_popover.vue')) |
||||
}, |
||||
props: [ |
||||
'user', 'withAvatar' |
||||
], |
||||
computed: { |
||||
title () { |
||||
return this.user ? this.user.screen_name_ui : '' |
||||
}, |
||||
htmlTitle () { |
||||
return this.user ? this.user.name_html : '' |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,65 @@ |
||||
<template> |
||||
<div |
||||
class="chat-title" |
||||
:title="title" |
||||
> |
||||
<UserPopover |
||||
v-if="withAvatar && user" |
||||
class="avatar-container" |
||||
:user-id="user.id" |
||||
> |
||||
<UserAvatar |
||||
class="titlebar-avatar" |
||||
:user="user" |
||||
/> |
||||
</UserPopover> |
||||
<RichContent |
||||
v-if="user" |
||||
class="username" |
||||
:title="'@'+(user && user.screen_name_ui)" |
||||
:html="htmlTitle" |
||||
:emoji="user.emoji || []" |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script src="./chat_title.js"></script> |
||||
|
||||
<style lang="scss"> |
||||
@import "../../variables"; |
||||
|
||||
.chat-title { |
||||
display: flex; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
|
||||
--emoji-size: 14px; |
||||
|
||||
.username { |
||||
max-width: 100%; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
display: inline; |
||||
word-wrap: break-word; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.avatar-container { |
||||
align-self: center; |
||||
line-height: 1; |
||||
} |
||||
|
||||
.titlebar-avatar { |
||||
margin-right: 0.5em; |
||||
height: 1.5em; |
||||
width: 1.5em; |
||||
border-radius: $fallback--avatarAltRadius; |
||||
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); |
||||
|
||||
&.animated::before { |
||||
display: none; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,129 @@ |
||||
<template> |
||||
<label |
||||
class="checkbox" |
||||
:class="{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }" |
||||
> |
||||
<input |
||||
type="checkbox" |
||||
class="visible-for-screenreader-only" |
||||
:disabled="disabled" |
||||
:checked="modelValue" |
||||
:indeterminate="indeterminate" |
||||
@change="$emit('update:modelValue', $event.target.checked)" |
||||
> |
||||
<i |
||||
class="checkbox-indicator" |
||||
:aria-hidden="true" |
||||
@transitionend.capture="onTransitionEnd" |
||||
/> |
||||
<span |
||||
v-if="!!$slots.default" |
||||
class="label" |
||||
> |
||||
<slot /> |
||||
</span> |
||||
</label> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: [ |
||||
'modelValue', |
||||
'indeterminate', |
||||
'disabled' |
||||
], |
||||
emits: ['update:modelValue'], |
||||
data: (vm) => ({ |
||||
indeterminateTransitionFix: vm.indeterminate |
||||
}), |
||||
watch: { |
||||
indeterminate (e) { |
||||
if (e) { |
||||
this.indeterminateTransitionFix = true |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
onTransitionEnd (e) { |
||||
if (!this.indeterminate) { |
||||
this.indeterminateTransitionFix = false |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
@import "../../variables"; |
||||
@import "../../mixins"; |
||||
|
||||
.checkbox { |
||||
position: relative; |
||||
display: inline-block; |
||||
min-height: 1.2em; |
||||
|
||||
&-indicator { |
||||
position: relative; |
||||
padding-left: 1.2em; |
||||
} |
||||
|
||||
&-indicator::before { |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
display: block; |
||||
content: "✓"; |
||||
transition: color 200ms; |
||||
width: 1.1em; |
||||
height: 1.1em; |
||||
border-radius: $fallback--checkboxRadius; |
||||
border-radius: var(--checkboxRadius, $fallback--checkboxRadius); |
||||
box-shadow: 0 0 2px black inset; |
||||
box-shadow: var(--inputShadow); |
||||
background-color: $fallback--fg; |
||||
background-color: var(--input, $fallback--fg); |
||||
vertical-align: top; |
||||
text-align: center; |
||||
line-height: 1.1em; |
||||
font-size: 1.1em; |
||||
color: transparent; |
||||
overflow: hidden; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
&.disabled { |
||||
.checkbox-indicator::before, |
||||
.label { |
||||
opacity: 0.5; |
||||
} |
||||
|
||||
.label { |
||||
color: $fallback--faint; |
||||
color: var(--faint, $fallback--faint); |
||||
} |
||||
} |
||||
|
||||
input[type="checkbox"] { |
||||
&:checked + .checkbox-indicator::before { |
||||
color: $fallback--text; |
||||
color: var(--inputText, $fallback--text); |
||||
} |
||||
|
||||
&:indeterminate + .checkbox-indicator::before { |
||||
content: "–"; |
||||
color: $fallback--text; |
||||
color: var(--inputText, $fallback--text); |
||||
} |
||||
} |
||||
|
||||
&.indeterminate-fix { |
||||
input[type="checkbox"] + .checkbox-indicator::before { |
||||
content: "–"; |
||||
} |
||||
} |
||||
|
||||
& > span { |
||||
margin-left: 0.5em; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,73 @@ |
||||
@import "../../variables"; |
||||
|
||||
.color-input { |
||||
display: inline-flex; |
||||
|
||||
&-field.input { |
||||
display: inline-flex; |
||||
flex: 0 0 0; |
||||
max-width: 9em; |
||||
align-items: stretch; |
||||
padding: 0.2em 8px; |
||||
|
||||
input { |
||||
background: none; |
||||
color: $fallback--lightText; |
||||
color: var(--inputText, $fallback--lightText); |
||||
border: none; |
||||
padding: 0; |
||||
margin: 0; |
||||
|
||||
&.textColor { |
||||
flex: 1 0 3em; |
||||
min-width: 3em; |
||||
padding: 0; |
||||
} |
||||
|
||||
&.nativeColor { |
||||
flex: 0 0 2em; |
||||
min-width: 2em; |
||||
align-self: stretch; |
||||
min-height: 100%; |
||||
} |
||||
} |
||||
|
||||
.computedIndicator, |
||||
.transparentIndicator { |
||||
flex: 0 0 2em; |
||||
min-width: 2em; |
||||
align-self: stretch; |
||||
min-height: 100%; |
||||
} |
||||
|
||||
.transparentIndicator { |
||||
// forgot to install counter-strike source, ooops |
||||
background-color: #f0f; |
||||
position: relative; |
||||
|
||||
&::before, |
||||
&::after { |
||||
display: block; |
||||
content: ""; |
||||
background-color: #000; |
||||
position: absolute; |
||||
height: 50%; |
||||
width: 50%; |
||||
} |
||||
|
||||
&::after { |
||||
top: 0; |
||||
left: 0; |
||||
} |
||||
|
||||
&::before { |
||||
bottom: 0; |
||||
right: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.label { |
||||
flex: 1 1 auto; |
||||
} |
||||
} |
||||
@ -0,0 +1,119 @@ |
||||
<template> |
||||
<div |
||||
class="color-input style-control" |
||||
:class="{ disabled: !present || disabled }" |
||||
> |
||||
<label |
||||
:for="name" |
||||
class="label" |
||||
> |
||||
{{ label }} |
||||
</label> |
||||
<Checkbox |
||||
v-if="typeof fallback !== 'undefined' && showOptionalTickbox" |
||||
:model-value="present" |
||||
:disabled="disabled" |
||||
class="opt" |
||||
@update:modelValue="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)" |
||||
/> |
||||
<div class="input color-input-field"> |
||||
<input |
||||
:id="name + '-t'" |
||||
class="textColor unstyled" |
||||
type="text" |
||||
:value="modelValue || fallback" |
||||
:disabled="!present || disabled" |
||||
@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 |
||||
v-if="transparentColor" |
||||
class="transparentIndicator" |
||||
/> |
||||
<div |
||||
v-if="computedColor" |
||||
class="computedIndicator" |
||||
:style="{backgroundColor: fallback}" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import Checkbox from '../checkbox/checkbox.vue' |
||||
import { hex2rgb } from '../../services/color_convert/color_convert.js' |
||||
export default { |
||||
components: { |
||||
Checkbox |
||||
}, |
||||
props: { |
||||
// Name of color, used for identifying |
||||
name: { |
||||
required: true, |
||||
type: String |
||||
}, |
||||
// Readable label |
||||
label: { |
||||
required: true, |
||||
type: String |
||||
}, |
||||
// Color value, should be required but vue cannot tell the difference |
||||
// between "property missing" and "property set to undefined" |
||||
modelValue: { |
||||
required: false, |
||||
type: String, |
||||
default: undefined |
||||
}, |
||||
// Color fallback to use when value is not defeind |
||||
fallback: { |
||||
required: false, |
||||
type: String, |
||||
default: undefined |
||||
}, |
||||
// Disable the control |
||||
disabled: { |
||||
required: false, |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
// Show "optional" tickbox, for when value might become mandatory |
||||
showOptionalTickbox: { |
||||
required: false, |
||||
type: Boolean, |
||||
default: true |
||||
} |
||||
}, |
||||
emits: ['update:modelValue'], |
||||
computed: { |
||||
present () { |
||||
return typeof this.modelValue !== 'undefined' |
||||
}, |
||||
validColor () { |
||||
return hex2rgb(this.modelValue || this.fallback) |
||||
}, |
||||
transparentColor () { |
||||
return this.modelValue === 'transparent' |
||||
}, |
||||
computedColor () { |
||||
return this.modelValue && this.modelValue.startsWith('--') |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
<style lang="scss" src="./color_input.scss"></style> |
||||
|
||||
<style lang="scss"> |
||||
.color-control { |
||||
input.text-input { |
||||
max-width: 7em; |
||||
flex: 1; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,37 @@ |
||||
import DialogModal from '../dialog_modal/dialog_modal.vue' |
||||
|
||||
/** |
||||
* This component emits the following events: |
||||
* cancelled, emitted when the action should not be performed; |
||||
* accepted, emitted when the action should be performed; |
||||
* |
||||
* The caller should close this dialog after receiving any of the two events. |
||||
*/ |
||||
const ConfirmModal = { |
||||
components: { |
||||
DialogModal |
||||
}, |
||||
props: { |
||||
title: { |
||||
type: String |
||||
}, |
||||
cancelText: { |
||||
type: String |
||||
}, |
||||
confirmText: { |
||||
type: String |
||||
} |
||||
}, |
||||
computed: { |
||||
}, |
||||
methods: { |
||||
onCancel () { |
||||
this.$emit('cancelled') |
||||
}, |
||||
onAccept () { |
||||
this.$emit('accepted') |
||||
} |
||||
} |
||||
} |
||||
|
||||
export default ConfirmModal |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue