pleroma/pleroma-fe
2
2
Fork 3
Code Issues 344 Pull requests 31 Projects Releases Packages Wiki Activity

Themes v2 #1649

Closed
hj wants to merge 0 commits from gitlab-mr-iid-377 into develop
pull from: gitlab-mr-iid-377
merge into: pleroma:develop
Conversation 14 Commits - Files changed -
hj commented 2018-11-14 19:48:53 +00:00
Owner
Copy link

WARNING
After merging in v2 themes, reverting back to v1 will cause PleromaFE to be stuck on white screen if user had non-empty non-v1 configuration. Only workaround is to clear IndexedDB in browser, but that will remove ALL customizations, including user highlighting. #1652 fixes that for develop branch.

Screenshot of the customization UI

Key points:

  • In-depth customization of many aspects of theme.
  • Keeping the simplicity of current pleroma-fe themes, as well as maintaining backwards compatibility with it.
  • Bringing in some convenience features and fixes, like being able to have dark foreground color in a light theme and contrast text in notifications counter.
  • Helpful contrast indicator to help making themes accessible.

Bugs

  • keep checkboxes do not actually affect theme export despite what help text says
  • "post text" in preview, along with monospace, fix input field using wrong text.
  • bottom bar ('load more') - check link color.
  • Reset button doesn't reset everything when v1 theme is in the localstorage.
  • Some sort of bug related to user profile about input field not appearing after transition
  • user profiles are FUCKED

Stuff done/need fixing

  • fix tab-switcher because it causes me a great mental distress
  • Per-component (?) color customization
  • Opacity controls where it matters
  • Panda theme support (dark panel headers on light themes)
  • Auto-fixes for badly colored notifications counter
  • Contrast indicators
    • Basic function
    • Hints explaining if contrast is good or bad, localization
  • Better notifications unseen indicator
    • Basic function
    • Should be on a separate layer, on top of status, not below
  • Drop-shadow adjustment support
    • Fix fallback not working when switching components
    • Fix tab-switcher to properly put border below inactive tabs
    • Adjustments control
    • Better styles/unification with other controls
    • Replace buttons/inputs/navbar shadows with generated ones
      • Somehow make it possible to use inset shadows on panels (header overlaps the .panel so inset shadows gets hidden)
      • Remove borders on buttons?
    • Fix button fallback (non-css-var) not having borders
  • Improved preview window showcasing more elements
  • v2 admin presets/some v2 themes
  • Localization strings
  • Roundness UI
    • Fix layout
    • Consistency with "override" checkbox like in advanced colors
  • rgbo section needs minor layout fix or something
  • Reset buttons
    • One that resets ALL settings to currently active theme/colors
    • One for each category that unchecks all "override" checkboxes
  • Checkboxes for partially loading theme/preset (i.e. make it only import colors but not affect roundness/shadows)
  • Fonts.
    • sans-serif/serif/monospace/custom selector for inputs, posts, and everything else.
    • Future-proof it so that it would be possible add more styles in-between. (server-provided fonts?)
    • "Custom" enables an input field to enter font-family name.
  • some help text for shadows
  • fix UI really not liking illegal/null inputs
  • improve bundling v2 themes - allow using external files somehow

QA checklist:

  • transition from v1 localstorage doesn't cause issues
    • roundness settings are lost (name changes)
  • loading v1 user preset works
  • loading v2 user preset works
  • loading v1 instance preset works
  • loading v2 instance preset works
    • there's one issue that v1 themes and v2 themes that lack some definitions do not reset stuff like shadows. see note 1
  • clean-loading (no localstorage) doesn't cause issues
  • check IE11/Edge?
    • Top bar is entirely broken but that's not related to this MR, it's been broken for a while, apparently.
    • Most checkboxes in customization do not work at all. No errors in console, no warning. They just don't work. I blame Vue and/or Edge.
    • Oh and IE11 still doesn't work.
  • no major issues, no major differences between v1 and v2 generated colors

Notes

  1. Picking something like Redmond XX theme and then switching to pleroma-dark would keep the win9x reliefs. This might be of annoyance, and checkboxes to keep/reset some settings might help.
**WARNING** After merging in v2 themes, reverting back to v1 will cause PleromaFE to be stuck on white screen if user had non-empty non-v1 configuration. Only workaround is to clear IndexedDB in browser, but that will remove ALL customizations, including user highlighting. #1652 fixes that for `develop` branch. ![Screenshot of the customization UI](/attachments/cb086dfe-157c-476b-bf60-9860326b0348) ## Key points: * In-depth customization of many aspects of theme. * Keeping the simplicity of current pleroma-fe themes, as well as maintaining backwards compatibility with it. * Bringing in some convenience features and fixes, like being able to have dark foreground color in a light theme and contrast text in notifications counter. * Helpful contrast indicator to help making themes accessible. ## Bugs * [x] keep checkboxes do not actually affect theme export despite what help text says * [x] "post text" in preview, along with monospace, fix input field using wrong text. * [x] bottom bar ('load more') - check link color. * [x] Reset button doesn't reset everything when v1 theme is in the localstorage. * [x] Some sort of bug related to user profile about input field not appearing after transition * [x] user profiles are FUCKED ## Stuff done/need fixing * [x] **fix tab-switcher because it causes me a great mental distress** * [x] Per-component (?) color customization * [x] Opacity controls where it matters * [x] Panda theme support (dark panel headers on light themes) * [x] Auto-fixes for badly colored notifications counter * [x] Contrast indicators * [x] Basic function * [x] Hints explaining if contrast is good or bad, localization * [x] Better notifications unseen indicator * [x] Basic function * [x] Should be on a separate layer, on top of status, not below * [x] Drop-shadow adjustment support * [x] Fix fallback not working when switching components * [x] Fix tab-switcher to properly put border below inactive tabs * [x] Adjustments control * [x] Better styles/unification with other controls * [x] Replace buttons/inputs/navbar shadows with generated ones * [x] Somehow make it possible to use inset shadows on panels (header overlaps the `.panel` so inset shadows gets hidden) * [x] Remove borders on buttons? * [x] Fix button fallback (non-css-var) not having borders * [x] Improved preview window showcasing more elements * [x] v2 admin presets/some v2 themes * [x] Localization strings * [x] Roundness UI * [x] Fix layout * [x] Consistency with "override" checkbox like in advanced colors * [x] rgbo section needs minor layout fix or something * [x] Reset buttons * [x] One that resets ALL settings to currently active theme/colors * [x] One for each category that unchecks all "override" checkboxes * [x] Checkboxes for partially loading theme/preset (i.e. make it only import colors but not affect roundness/shadows) * [x] Fonts. * [x] `sans-serif`/`serif`/`monospace`/custom selector for inputs, posts, and everything else. * [x] Future-proof it so that it would be possible add more styles in-between. (server-provided fonts?) * [x] "Custom" enables an input field to enter font-family name. * [x] some help text for shadows * [x] fix UI really not liking illegal/null inputs * [x] improve bundling v2 themes - allow using external files somehow ## QA checklist: * [x] transition from v1 localstorage doesn't cause issues * [x] roundness settings are lost (name changes) * [x] loading v1 user preset works * [x] loading v2 user preset works * [x] loading v1 instance preset works * [x] loading v2 instance preset works * [x] there's one issue that v1 themes and v2 themes that lack some definitions do not reset stuff like shadows. see note 1 * [x] clean-loading (no localstorage) doesn't cause issues * [x] check IE11/Edge? * Top bar is entirely broken but that's not related to this MR, it's been broken for a while, apparently. * Most checkboxes in customization do not work at all. No errors in console, no warning. They just don't work. I blame Vue and/or Edge. * Oh and IE11 still doesn't work. * [x] no major issues, no major differences between v1 and v2 generated colors ## Notes 1. Picking something like Redmond XX theme and then switching to pleroma-dark would keep the win9x reliefs. This might be of annoyance, and checkboxes to keep/reset some settings might help.
image.png
932 KiB
lanodan commented 2018-11-26 02:40:27 +00:00
Owner
Copy link
  • preview of “Post Text” seems to be broken (doesn’t update)
  • monospaced (rich text) should get an example in the preview
- preview of “Post Text” seems to be broken (doesn’t update) - monospaced (rich text) should get an example in the preview
hj commented 2018-11-26 02:47:25 +00:00
Author
Owner
Copy link

tbh, "post text" isn't even in preview, because i don't really know HOW to put it into the preview, and font's such an afterthought i really don't want to bother.

for monospaced (rich text) see above.

tbh, "post text" isn't even in preview, because i don't really know HOW to put it into the preview, and font's such an afterthought i really don't want to bother. for monospaced (rich text) see above.
hj commented 2018-11-26 02:48:20 +00:00
Author
Owner
Copy link

Live feed of me doing fonts and thinking how to fit in "post text" into it
image

i'll add it.... later.... 👓

Live feed of me doing fonts and thinking how to fit in "post text" into it ![image](/attachments/92f1b1d3-f193-4151-ad73-05f05e954f45) i'll add it.... later.... :eyeglasses:
image.png
273 KiB
shpuld commented 2018-12-06 15:17:49 +00:00
Owner
Copy link

Any way to reasonably split this template further? 300 lines of template is a bit much

Any way to reasonably split this template further? 300 lines of template is a bit much
shpuld commented 2018-12-06 15:21:54 +00:00
Owner
Copy link

Nitpick: maybe enough js to warrant a separate .js file?

Nitpick: maybe enough js to warrant a separate .js file?
shpuld commented 2018-12-06 15:22:21 +00:00
Owner
Copy link

wait meant to write that for font_control.vue

wait meant to write that for font_control.vue
hj commented 2018-12-06 15:24:28 +00:00
Author
Owner
Copy link

could be done, not sure if I want to split them into different components at this point.

could be done, not sure if I want to split them into different components at this point.
hj commented 2018-12-10 23:50:32 +00:00
Author
Owner
Copy link

Separated

Separated
hj commented 2018-12-10 23:59:00 +00:00
Author
Owner
Copy link

Managed to separate preview (which took up almost 100 lines in template code) into another stateless-propless .vue file, and theme importer-exporter (which took out a lot of js code)

I also tried taking out color tabs out but there are two of them and I can't find an easy way to separate both of them at same time and keep current tab hierarchy. Ideally every aspect could be and should be separated into another component, but right now I can't find a decent way around color's awkwardness (common/advanced UI-wise, color/opacity code-wise), shadows/fonts already sorta separated and radii/fonts are so small that I don't see much benefit in separating them.

Managed to separate preview (which took up almost 100 lines in template code) into another stateless-propless .vue file, and theme importer-exporter (which took out a lot of js code) I also tried taking out color tabs out but there are two of them and I can't find an easy way to separate both of them at same time and keep current tab hierarchy. Ideally every aspect could be and should be separated into another component, but right now I can't find a decent way around `color`'s awkwardness (common/advanced UI-wise, color/opacity code-wise), shadows/fonts already sorta separated and radii/fonts are so small that I don't see much benefit in separating them.
hj commented 2018-12-11 00:00:30 +00:00
Author
Owner
Copy link

Just want to fix import/export error text display and it's ready for merge if there are no other problems.

Just want to fix import/export error text display and it's ready for merge if there are no other problems.
link0ff commented 2018-12-12 18:08:59 +00:00
Member
Copy link

@hj Any reason keep-alive not added around tab-switcher in user_settings like you added it in other places?

@hj Any reason keep-alive not added around tab-switcher in user_settings like you added it in other places?
hj commented 2018-12-12 18:27:49 +00:00
Author
Owner
Copy link

@link0ff keep-alive originally was used as a quick fix solution to tab-switcher bug #159 which ended up being not fixed completely, and to preserve state of each pane. In this PR #159 was so bad I ended up changing tab-switcher behaviour from rendering only selected pane to rendering all of them and hiding inactive ones with CSS. Which in turn makes keep-alive p.useless I believe.

@link0ff keep-alive originally was used as a quick fix solution to tab-switcher bug #159 which ended up being not fixed completely, and to preserve state of each pane. In this PR #159 was ***so bad*** I ended up changing `tab-switcher` behaviour from rendering only selected pane to rendering all of them and hiding inactive ones with CSS. Which in turn makes keep-alive p.useless I believe.
link0ff commented 2018-12-12 19:19:36 +00:00
Member
Copy link

Yes, it seems now keep-alive is not needed because tab contents is not re-rendered. But OTOH, after exporting the follows to a csv file, the text "Processing, you'll soon be asked to download your file" stays longer, not allowing to export again until the whole UserSettings component is re-rendered. I propose to reset enableFollowsExport after a small delay after the export file is created. Since the export file is created immediately, a delay could be e.g. 2 seconds to allow the user to read the text (instantaneous text flashing might be too confusing to users).

Yes, it seems now `keep-alive` is not needed because tab contents is not re-rendered. But OTOH, after exporting the follows to a csv file, the text "Processing, you'll soon be asked to download your file" stays longer, not allowing to export again until the whole UserSettings component is re-rendered. I propose to reset `enableFollowsExport` after a small delay after the export file is created. Since the export file is created immediately, a delay could be e.g. 2 seconds to allow the user to read the text (instantaneous text flashing might be too confusing to users).
hj commented 2018-12-12 19:34:49 +00:00
Author
Owner
Copy link

Please make formalize it in an issue.

Please make formalize it in an issue.

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
BE Request

   
Backlog

   
Better behavior

   
Blocked by deps

   
Bug

   
Code Review

   
Discussion

   
Doing

   
Feature Request / Enhancement

   
In the shining bright future maybe

   
It's complicated

   
MS Edge

   
Mememoon (or other niche browsers)

   
Missing API

   
Missing feature

   
Missing l10n/i18n

   
NL1

Instance Admin Dashboard

  
NL2

Improved Mobile Experience

  
NL4

Improved instance customization and QoL options

  
Need to verify on develop

   
RELEASE BLOCKER

   
Reassign or Close

   
Refactor

   
Regression

   
Safari

   
To Do

   
User story

   
Waiting on godot

   
accessibility

https://git.pleroma.social/pleroma/pleroma-fe/-/snippets/7746

  
better documentation

   
chore

   
confirmed

   
easy ticket

   
incident

Denotes a disruption to IT services and the associated issues require immediate attention

  
l10n update

   
mastoapi

   
mobile

   
needs design

   
needs-info

   
needs-review

   
stupid
No labels
BE Request
Backlog
Better behavior
Blocked by deps
Bug
Code Review
Discussion
Doing
Feature Request / Enhancement
In the shining bright future maybe
It's complicated
MS Edge
Mememoon (or other niche browsers)
Missing API
Missing feature
Missing l10n/i18n
NL1
NL2
NL4
Need to verify on develop
RELEASE BLOCKER
Reassign or Close
Refactor
Regression
Safari
To Do
User story
Waiting on godot
accessibility
better documentation
chore
confirmed
easy ticket
incident
l10n update
mastoapi
mobile
needs design
needs-info
needs-review
stupid
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
4 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
pleroma/pleroma-fe!1649
No description provided.