Change plugin manager styles #2405

alexchorman · 2019-10-15T15:20:06Z

No description provided.

ryestew · 2019-10-25T12:44:38Z

src/app/components/plugin-manager-component.js

  .versionWarning {
-    background-color: var(--light);
-    padding: 0 7px;
-    font-weight: bolder;
-    margin-top: 5px;
-    text-transform: lowercase;
+    padding: 4px;
+    margin: 0 8px;
+    font-weight: 700;
+    font-size: 9px;
+    line-height: 12px;
+    text-transform: uppercase;


Would this be better as a badge? - I realize that it is currently coded with .versionWarning.

Made it as .badge-light. Check it please

Sorry - I don't see any .badge-light on plugin-manager-component.js
Please point me to where you changed it. oh - I see it in the side-panel.

Also I think there will be some design adjustment to this page - I'll be reviewing that with Natalia on Thursday.

ryestew · 2019-10-25T12:53:23Z

src/app/components/side-panel.js

@@ -13,7 +13,6 @@ const css = csjs`
  }
  .swapitTitle {
    margin: 0;
-    text-transform: uppercase;


Lets discuss with Natalia about this.

Natalia doesn't mind if there are uppercase letters so I made uppercased it again

alexchorman · 2019-10-31T09:15:32Z

src/app/components/side-panel.js

@@ -122,11 +122,11 @@ export class SidePanel extends AbstractPanel {
      name = profile.displayName ? profile.displayName : profile.name
      docLink = profile.documentation ? yo`<a href="${profile.documentation}" class="${css.titleInfo}" title="link to documentation" target="_blank"><i aria-hidden="true" class="fas fa-book"></i></a>` : ''
      if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) {
-        versionWarning = yo`<small title="Version Alpha" class="${css.versionWarning}">alpha</small>`
+        versionWarning = yo`<small title="Version Alpha" class="badge-light ${css.versionBadge}">alpha</small>`
      }


@ryestew I added badge here

alexchorman · 2019-10-31T09:16:59Z

src/app/components/side-panel.js

@@ -38,7 +38,7 @@ const css = csjs`
  .titleInfo {
    padding-left: 10px;
  }
-  .versionWarning {
+  .versionBadge {
    background-color: var(--light);


@ryestew And changed class from .versionWarning to .versionBadge

LianaHus · 2019-11-04T12:18:50Z

src/app/components/plugin-manager-component.js

-        </div>
-        <p class="${css.description}">${api.profile.description}</p>
-      </article>
+    <article id="remixPluginManagerListItem_${name}" class="list-group-item px-2 pt-2 pb-0 plugins-list-group-item" title="${displayName}" >


we need an indent here. a tab size

@LianaHus Click "view file" please

Here you see narrowed version

sorry but we need a space.

return yo` blablaba blablabla `

what you have is

return yo` blablaba blablabla `

LianaHus · 2019-11-04T12:42:28Z

I see some problems with position of "settings" button and "active/inactive modul" (why not plugins btw?) in different themes. here are screenshots

LianaHus · 2019-11-04T12:45:30Z

also why the footer has opacity in dark theme? looks weird and broken to me.
@ryestew

alexchorman · 2019-11-04T12:46:49Z

also why the footer has opacity in dark theme? looks weird and broken to me.
@ryestew

It's not broken. I made according to design.

alexchorman · 2019-11-04T12:47:39Z

I see some problems with position of "settings" button and "active/inactive modul" (why not plugins btw?) in different themes. here are screenshots

Ok, I see. It should be on the same line. Will fix it

alexchorman · 2019-11-04T12:48:12Z

Thanks for the screenshots.

alexchorman · 2019-11-04T12:51:00Z

@LianaHus By "active/inactive module" position problem you mean spaces from left and right sides, don't you? I made those spaces also according to design

LianaHus · 2019-11-04T14:19:56Z

about opacity I know, this is why I tagged Rob too. But Why we have opacity only on dark theme?

LianaHus · 2019-11-04T14:20:40Z

yes, the spaces. I don't mind to have spaces for active/inactive modules" but it is different in different themes?

LianaHus · 2019-11-04T15:13:10Z

src/app/components/plugin-manager-component.js

-      <nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-between align-items-center">
-        <span class="navbar-brand">Inactive Modules</span>
-        <span class="badge badge-pill badge-primary" style = "cursor: default;">${inactives.length}</span>
+      <nav class="plugins-list-header justify-content-start navbar navbar-expand-lg bg-light navbar-light align-items-center px-4 py-3">


px-4 you added here is braking other themes, can't you fix this in nav classes definitions in a theme directly?

ryestew · 2019-11-04T16:16:10Z

The PR is nearly there and we'd like to merge it soon- these issues are small - so just to summarize:

the indent on line 122 of src/app/components/plugin-manager-component.js
for the footer of the plugin manager: I think the definition of the class remix-bg-opacity should be defined in the csjs and not in the theme's css.
the active/inactive module badge - should be the same color (so not badge-alert) & shape ( so remove badge-pill) as the figma
the active /inactive modules headline ( the h6) are now aligned with the text below - which is correct - but this has moved these headlines in the other themes - ideally you'd make it so that the change only happens in the EthWorks theme.

I've put these issues in the trello board too.

ryestew · 2019-11-04T16:01:41Z

src/app/components/plugin-manager-settings.js

@@ -126,8 +130,8 @@ export class PluginManagerSettings {

  render () {
    return yo`
-    <footer class="navbar navbar-light bg-light ${css.permissions}">
-      <button onclick="${() => this.openDialog()}" class="btn btn-info">Settings</button>
+    <footer class="bg-light ${css.permissions} remix-bg-opacity">


I think this definition of remix-bg-opacity should be defined in the csjs of this file and not in the bootstrap theme. Let me know if you think there is an advantage to leaving it in the theme's css.

alexchorman · 2019-11-04T16:22:19Z

I

The PR is nearly there and we'd like to merge it soon- these issues are small - so just to summarize:

the indent on line 122 of src/app/components/plugin-manager-component.js

for the footer of the plugin manager: I think the definition of the class remix-bg-opacity should be defined in the csjs and not in the theme's css.

the active/inactive module badge - should be the same color (so not badge-alert) & shape ( so remove badge-pill) as the figma

the active /inactive modules headline ( the h6) are now aligned with the text below - which is correct - but this has moved these headlines in the other themes - ideally you'd make it so that the change only happens in the EthWorks theme.

I've put these issues in the trello board too.

I think we should leave remix-bg-opacity class because this change should only happen in Ethworks theme

LianaHus · 2019-11-05T13:29:48Z

thanks for updates!

The last thing is the settings button is still shifted in old themes

alexchorman · 2019-11-05T14:21:10Z

thanks for updates!

The last thing is the settings button is still shifted in old themes

@LianaHus Done.

LianaHus · 2019-11-05T14:23:32Z

thanks for updates!
The last thing is the settings button is still shifted in old themes

@LianaHus Done.

Cool! When do we merge @ryestew ?

LianaHus requested a review from ryestew October 22, 2019 08:45

ryestew reviewed Oct 25, 2019

View reviewed changes

alexchorman force-pushed the plugin-manager-redesign branch from f13f434 to 3634df0 Compare October 28, 2019 15:36

alexchorman requested a review from ryestew October 28, 2019 15:39

alexchorman commented Oct 31, 2019

View reviewed changes

alexchorman added 3 commits October 31, 2019 10:25

Change plugin manager styles

7b54877

Uppercase panel title

0d802a4

Add badge className

c860e2a

alexchorman force-pushed the plugin-manager-redesign branch from 3634df0 to c860e2a Compare October 31, 2019 09:25

Improve styles

4f1daa4

LianaHus reviewed Nov 4, 2019

View reviewed changes

Fix indentation

62ebec6

ryestew reviewed Nov 4, 2019

View reviewed changes

Move style changes to bootstrap theme

fee8634

Fix settings button position

784eec1

ryestew approved these changes Nov 5, 2019

View reviewed changes

ryestew merged commit 81cbca1 into ethereum:master Nov 5, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Change plugin manager styles #2405

Change plugin manager styles #2405

alexchorman commented Oct 15, 2019

ryestew Oct 25, 2019

alexchorman Oct 28, 2019

ryestew Oct 30, 2019 •

edited

ryestew Oct 25, 2019

alexchorman Oct 28, 2019

alexchorman Oct 31, 2019

alexchorman Oct 31, 2019

LianaHus Nov 4, 2019

alexchorman Nov 4, 2019 •

edited

alexchorman Nov 4, 2019

LianaHus Nov 4, 2019

LianaHus Nov 4, 2019 •

edited

LianaHus commented Nov 4, 2019

LianaHus commented Nov 4, 2019

alexchorman commented Nov 4, 2019

alexchorman commented Nov 4, 2019

alexchorman commented Nov 4, 2019

alexchorman commented Nov 4, 2019

LianaHus commented Nov 4, 2019

LianaHus commented Nov 4, 2019

LianaHus Nov 4, 2019

ryestew commented Nov 4, 2019

ryestew Nov 4, 2019

alexchorman commented Nov 4, 2019

LianaHus commented Nov 5, 2019

alexchorman commented Nov 5, 2019

LianaHus commented Nov 5, 2019

Change plugin manager styles #2405

Change plugin manager styles #2405

Conversation

alexchorman commented Oct 15, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ryestew Oct 30, 2019 • edited

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

alexchorman Nov 4, 2019 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LianaHus Nov 4, 2019 • edited

Choose a reason for hiding this comment

LianaHus commented Nov 4, 2019

LianaHus commented Nov 4, 2019

alexchorman commented Nov 4, 2019

alexchorman commented Nov 4, 2019

alexchorman commented Nov 4, 2019

alexchorman commented Nov 4, 2019

LianaHus commented Nov 4, 2019

LianaHus commented Nov 4, 2019

Choose a reason for hiding this comment

ryestew commented Nov 4, 2019

Choose a reason for hiding this comment

alexchorman commented Nov 4, 2019

LianaHus commented Nov 5, 2019

alexchorman commented Nov 5, 2019

LianaHus commented Nov 5, 2019

ryestew Oct 30, 2019 •

edited

alexchorman Nov 4, 2019 •

edited

LianaHus Nov 4, 2019 •

edited