Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Visually refine find and replace panel #10229

Closed
oleq opened this issue Jul 27, 2021 · 1 comment · Fixed by #10344
Closed

Visually refine find and replace panel #10229

oleq opened this issue Jul 27, 2021 · 1 comment · Fixed by #10344
Assignees
@oleq
Labels
domain:ui/ux This issue reports a problem related to UI or UX. package:find-and-replace squad:core Issue to be handled by the Core team. type:improvement This issue reports a possible enhancement of an existing feature.
Milestone
iteration 46 (v29...

Comments

@oleq
Copy link
Member

oleq commented Jul 27, 2021 •
edited by Reinmar
Loading

📝 Provide a description of the improvement

Current design

It stands out and does not follow the look&feel of other features.

Note: This issue includes both design and implementation.

Scope

  • Design a new look&feel of the F&R panel based on the feedback that we got.
  • Implement the new designs into the existing F&R code.
    • Next/prev buttons will be permanently visible
    • Move "match case", "whole..." options to a dropdown
    • Make it wider
    • Style all buttons (use existing classes)
    • We ignore smaller screen sizes for now (no responsiveness to be included in this ticket) because the feature is useless on mobiles anyway as it takes the entire screen size
    • Consider different translations (length of text in the buttons like "Find")
    • Add header "Find and replace"
      • TODO: Is it a general component or does it need to be moved from the Special characters balloon
      • Answer: We moved it to ckeditor5-ui already so it can be reused
    • Replace the split button used in the toolbar with a normal button Done already
    • Missing find text error (tooltip) – use an existing input property
    • New state logic for buttons (which are enabled/disabled when)

Note

If you'd like to see this improvement implemented, add a 👍 reaction to this post.
@oleq oleq added type:improvement This issue reports a possible enhancement of an existing feature. domain:ui/ux This issue reports a problem related to UI or UX. squad:core Issue to be handled by the Core team. package:find-and-replace labels Jul 27, 2021
@oleq oleq added this to the iteration 46 milestone Jul 27, 2021
@oleq oleq self-assigned this Jul 27, 2021
@oleq oleq changed the title Refine find and replace panel Visually refine find and replace panel Jul 28, 2021
This was referenced Jul 28, 2021
Closed
Closed
Closed
Closed
Closed
Closed
@oleq
Copy link
Member Author

oleq commented Jul 28, 2021 •
edited
Loading

Here's the plan for the MVP2 of the UI:

We're going to use a slightly wider panel to simplify the layout. It should not be a problem since this feature does not make much sense on small devices (e.g. smartphones) anyway because it consumes too much space and covers the results. The layout will easily translate to a model when the modal system gets implemented, which should help us address this issue.

The settings dropdown is going to borrow toggles switches from the link decorators UI.

The "Find" button will always be on. We're not going to implement search-as-you-type (a.k.a. live search) for a while (mostly due to performance concerns) so users need to see their primary button there ready for action. If the query field is empty, there will be an error (like in table properties forms).

The replace UI will turn on when some results are found

@Reinmar Reinmar unassigned oleq Aug 3, 2021
@oleq oleq mentioned this issue Aug 12, 2021
Merged
maxbarnas added a commit that referenced this issue Aug 23, 2021
@maxbarnas
Merge pull request #10344 from ckeditor/ck/10229-find-and-replace-revamp
dc31609 
Other (find-and-replace): Visually revamped the find&replace form. Closes #10229.

Fix (find-and-replace): Changing the search text should reset the results. Closes #10304.

Fix (find-and-replace): Toggling search options should reset the results. Closes #10021.

Fix (find-and-replace): The find and replace form should be responsive. Closes #10019.

Internal (find-and-replace): Fixed the styling issue that was triggering style linter. Removed linter's ignore clause. Closes #9928.

Feature (core): Added the "cog" icon to the core icon set (see #10229).

Other (theme-lark): Moved presentational find and replace form styles to the theme (see #10229).

Fix (theme-lark): The label of the labeled field should stay on the top when the field is disabled and not empty to not cover the field's text (see #10229).

BREAKING CHANGE (find-and-replace): The layout, styling, and view structure of the find and replace form have changed radically, which may affect integrations that either customized or extended this form (see #10229).
@Reinmar Reinmar mentioned this issue Sep 6, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@oleq oleq

Labels
domain:ui/ux This issue reports a problem related to UI or UX. package:find-and-replace squad:core Issue to be handled by the Core team. type:improvement This issue reports a possible enhancement of an existing feature.
Projects
None yet
Milestone
iteration 46 (v29.2.0)
Development

Successfully merging a pull request may close this issue.

Revamped the find&replace UI. ckeditor/ckeditor5
1 participant
@oleq