Change seamless panels to inherit any parent's colours #2501

jingting1412 · 2024-04-05T07:24:43Z

What is the purpose of this pull request?

Overview of changes:
#1697
Changed the seamless panels so that the background is transparent and it inherits the colours of any parents its contained in.

Anything you'd like to highlight/discuss:
As pointed out in the issue, this might break some edge cases (e.g. a seamless panel in a <box background-color="black" color="black"> box).

Testing instructions:
I've added some examples in the userguide to show the new look. markbind serve -d the docs to see the changes and try out different cases to see if it works or if there's any improvements.

Proposed commit message: (wrap lines at 72 characters)
Change seamless panels to inherit colours of any parents

Checklist: ☑️

Updated the documentation for feature additions and enhancements
Added tests for bug fixes or features
Linked all related issues
No unrelated changes

Reviewer checklist:

Indicate the SEMVER impact of the PR:

Major (when you make incompatible API changes)
Minor (when you add functionality in a backward compatible manner)
Patch (when you make backward compatible bug fixes)

At the end of the review, please label the PR with the appropriate label: r.Major, r.Minor, r.Patch.

Breaking change release note preparation (if applicable):

To be included in the release note for any feature that is made obsolete/breaking

Give a brief explanation note about:

what was the old feature that was made obsolete

any replacement feature (if any), and

how the author should modify his website to migrate from the old feature to the replacement feature (if possible).

codecov · 2024-04-05T07:28:19Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 51.02%. Comparing base (fc776ba) to head (a721356).

❗ Current head a721356 differs from pull request most recent head b075167. Consider uploading reports for the commit b075167 to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2501      +/-   ##
==========================================
+ Coverage   50.99%   51.02%   +0.02%     
==========================================
  Files         124      124              
  Lines        5383     5372      -11     
  Branches     1160     1159       -1     
==========================================
- Hits         2745     2741       -4     
+ Misses       2348     2341       -7     
  Partials      290      290

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

jingting1412 · 2024-04-05T07:53:37Z

Idk how my other allocate space for scrollbar commit got here 😞 but the changed files only reflect the changes relevant to this pr!

kaixin-hc · 2024-04-06T01:58:13Z

Weird that the netlify deploy preview failed. Maybe it will fix itself on push

yucheng11122017

Hi @jingting1412 thanks for the work!
Functionality and all looks great - just some minor nits.

Could you also add some test cases for this behaviour? I think you should be able to add unit tests without too much issue

yucheng11122017 · 2024-04-06T09:12:00Z

docs/userGuide/syntax/panels.md

@@ -104,6 +104,29 @@ plain text ...
 </variable>
 </include>

+<box>


TBH i think this is too much documentation and examples.. I would rather just keep one, preferably the first because the other two are very blinding and I am old.

In fact... I'm a bit tempted to not have documentation for this because I feel like its too small and specific feature. What do the rest of the reviewers think?

Just one is probably good enough! But the first one is not obvious enough - maybe play with the colours a bit so it stands out more.

I'm team documentation here, the use case becomes far clearer when you see how the seamless panel looks inside a colored background.

Yep I just left one example on the user guide so that user is at least aware of this property of seamless panels. Please tell me if the colour combo is not nice 😅

Colour looks good to me : )

yucheng11122017 · 2024-04-06T09:19:14Z

packages/vue-components/src/panels/NestedPanel.vue

+        margin-top: 5px;
+        display: flex;
+        align-items: center;
+        color: inherit;


Is the difference between .morph-display-wrapper-seamless and .morph-display-wrapper only the inheritance of color?
In that case, could we make it such that .morph-display-wrapper-seamless is just color: inherit? So that if we decide to change like the margin-top or something, we only change it in one place
So the button will always have the class .morph-display-wrapper and will have the class .morph-display-wrapper-seamless if it is seamless

Yep sorry about that, I have made the changes accordingly

I've changed it now so that both the seamless and non-seamless morph wrapper would share the same basic styles, and only morph-display-wrapper-seamless will have the color:inherit property. This allows for future changes to the styles of all morph wrappers to be done in one place and allows the seamless wrapper to have the same styles as the other wrappers

packages/vue-components/src/panels/NestedPanel.vue

kaixin-hc · 2024-04-07T09:51:54Z

docs/userGuide/syntax/panels.md

+
+  :bulb: Seamless panels inherit the background colour and text colour of any parents!
+  <br/>
+  <panel type="seamless" header="This is an example seamless panel" popup-url="/userGuide/syntax/extra/loadContent.html">


Why the popup-URL ?

I'm just making sure that all buttons follow the seamless behaviour when testing, I'll remove from the final example!

yucheng11122017

Small nit!

yucheng11122017 · 2024-04-09T12:28:55Z

packages/vue-components/src/panels/NestedPanel.vue

-      <button :class="['morph-display-wrapper', 'btn', btnType]" @click="open()">
+      <button
+        :class="[isSeamless ? 'morph-display-wrapper-seamless': 'morph-display-wrapper',
+                 'btn',


Shouldn't this button has the morph-display-wrapper anyway regardless of whether it is seamless or not?

I added the new morph-display-wrapper-seamless since I've noticed that the colour of the minimized panels would not inherit the parent's colour with just morph-display-wrapper

With just morph-display-wrapper:

Screen.Recording.2024-04-09.at.11.30.27.PM.mov

With morph-display-wrapper-seamless and morph-display-wrapper

Screen.Recording.2024-04-09.at.11.32.06.PM.mov

As in does the a seamless button also need the properties from morph-display-wrapper?

No seamless buttons wouldn't need properties from morph-display-wrapper, seamless buttons only appear when the panel is not minimised so it shouldn't need any properties from morph-display-wrapper

I've taken a video for your reference that shows that toggling these properties would make a visual difference. The caret button seems to also be a seamless button which appears when the panel is minimised, so the non seamless panels and the seamless panels then have slightly different styling due to this line of code.

Screen.Recording.2024-04-12.at.7.54.19.PM.mov

Rather than doing this or else statement, could all buttons have morph-display-wrapper by default and then only seamless buttons will have morph-display-wrapper-seamless?

yep sure I've implemented it as such now

yucheng11122017

LGTM except for one small clarification!

yucheng11122017

LGTM!

* Change seamless panels * Improve look of seamless panels * Add tests * Update userguide example --------- Co-authored-by: Chan Yu Cheng <[email protected]> Co-authored-by: Hannah <[email protected]>

damithc · 2024-05-03T11:25:03Z

Feature in action https://nus-cs2103-ay2324s2.github.io/website/schedule/week8/topics.html

jingting1412 and others added 5 commits April 5, 2024 01:18

Change seamless property

c7c878d

Allocate space for scrollbar in nav components

e2f6301

Merge branch 'MarkBind:master' into change-seamless

2f17992

Change seamless panels

6ba4c0c

Merge branch 'MarkBind:master' into change-seamless

d895984

jingting1412 added 4 commits April 5, 2024 15:54

Change <hr> to inherit colours

d3e94a0

Fix unnecessary change

5c2d1c6

Fix bug

bb35d7b

Improve look of seamless buttons

c167f97

Merge branch 'master' into change-seamless

1ade57e

yucheng11122017 reviewed Apr 6, 2024

View reviewed changes

kaixin-hc reviewed Apr 6, 2024

View reviewed changes

packages/vue-components/src/panels/NestedPanel.vue Show resolved Hide resolved

jingting1412 and others added 3 commits April 7, 2024 15:08

Merge branch 'MarkBind:master' into change-seamless

37cae18

Implement review changes

e146ad1

Merge branch 'master' into change-seamless

a721356

kaixin-hc reviewed Apr 7, 2024

View reviewed changes

Merge branch 'MarkBind:master' into change-seamless

53b71ff

yucheng11122017 reviewed Apr 9, 2024

View reviewed changes

jingting1412 added 2 commits April 9, 2024 23:22

Add tests

4748e3f

Update userguide example

fb5fc71

yucheng11122017 approved these changes Apr 11, 2024

View reviewed changes

jingting1412 and others added 6 commits April 12, 2024 17:53

Merge branch 'MarkBind:master' into change-seamless

ff72dbd

Change morph-wrapper-seamless styles

9c0752d

Merge branch 'MarkBind:master' into change-seamless

578f815

Add shared styles for morph wrappers

057643e

Merge branch 'MarkBind:master' into change-seamless

bc09c01

Change morph-display-wrapper-seamless

f0d06b1

Change morph-display-wrapper-seamless

1f62ad3

yucheng11122017 approved these changes Apr 16, 2024

View reviewed changes

Merge branch 'master' into change-seamless

b075167

yiwen101 merged commit 8253f82 into MarkBind:master Apr 17, 2024
7 checks passed

yiwen101 added the r.Patch Version resolver: increment by 0.0.1 label Apr 17, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Change seamless panels to inherit any parent's colours #2501

Change seamless panels to inherit any parent's colours #2501

jingting1412 commented Apr 5, 2024 •

edited by kaixin-hc

Loading

codecov bot commented Apr 5, 2024 •

edited

Loading

jingting1412 commented Apr 5, 2024

kaixin-hc commented Apr 6, 2024

yucheng11122017 left a comment

yucheng11122017 Apr 6, 2024

kaixin-hc Apr 6, 2024

jingting1412 Apr 7, 2024

kaixin-hc Apr 7, 2024

yucheng11122017 Apr 6, 2024 •

edited

Loading

jingting1412 Apr 7, 2024

jingting1412 Apr 12, 2024

kaixin-hc Apr 7, 2024

jingting1412 Apr 9, 2024

yucheng11122017 left a comment

yucheng11122017 Apr 9, 2024

jingting1412 Apr 9, 2024

yucheng11122017 Apr 11, 2024

jingting1412 Apr 12, 2024

kaixin-hc Apr 12, 2024

yucheng11122017 Apr 16, 2024

jingting1412 Apr 16, 2024

yucheng11122017 left a comment

yucheng11122017 left a comment

damithc commented May 3, 2024

Change seamless panels to inherit any parent's colours #2501

Change seamless panels to inherit any parent's colours #2501

Conversation

jingting1412 commented Apr 5, 2024 • edited by kaixin-hc Loading

codecov bot commented Apr 5, 2024 • edited Loading

Codecov Report

jingting1412 commented Apr 5, 2024

kaixin-hc commented Apr 6, 2024

yucheng11122017 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yucheng11122017 Apr 6, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yucheng11122017 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yucheng11122017 left a comment

Choose a reason for hiding this comment

yucheng11122017 left a comment

Choose a reason for hiding this comment

damithc commented May 3, 2024

jingting1412 commented Apr 5, 2024 •

edited by kaixin-hc

Loading

codecov bot commented Apr 5, 2024 •

edited

Loading

yucheng11122017 Apr 6, 2024 •

edited

Loading