Merge pull request #2405 from EthWorks/plugin-manager-redesign

Change plugin manager styles
pull/1/head
Rob 5 years ago committed by GitHub
commit 81cbca1ea6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 7215
      assets/css/remix-dark-theme.css
  2. 59
      src/app/components/plugin-manager-component.js
  3. 4
      src/app/components/plugin-manager-settings.js
  4. 6
      src/app/components/side-panel.js
  5. 2
      src/app/tabs/theme-module.js

File diff suppressed because it is too large Load Diff

@ -19,13 +19,21 @@ const css = csjs`
z-index: 2; z-index: 2;
margin-bottom: 0px; margin-bottom: 0px;
} }
.pluginSearchInput {
height: 38px;
}
.pluginSearchButton {
font-size: 13px;
}
.displayName { .displayName {
text-transform: capitalize; width: 100%;
display: flex; display: flex;
flex-direction: column; align-items: center;
align-items: flex-start; justify-content: space-between;
} }
.description { .description {
font-size: 13px;
line-height: 18px;
text-transform: capitalize; text-transform: capitalize;
} }
.row { .row {
@ -37,12 +45,15 @@ const css = csjs`
color: color:
} }
.versionWarning { .versionWarning {
background-color: var(--light); padding: 4px;
padding: 0 7px; margin: 0 8px;
font-weight: bolder; font-weight: 700;
margin-top: 5px; font-size: 9px;
text-transform: lowercase; line-height: 12px;
text-transform: uppercase;
cursor: default; cursor: default;
border: 1px solid;
border-radius: 2px;
} }
` `
@ -90,7 +101,7 @@ class PluginManagerComponent extends ViewPlugin {
} }
// Beta // Beta
if (api.profile.version && api.profile.version.match(/\b(\w*beta\w*)\b/g)) { if (api.profile.version && api.profile.version.match(/\b(\w*beta\w*)\b/g)) {
versionWarning = yo`<small title="Version Beta" class="${css.versionWarning}">beta</small>` versionWarning = yo`<small title="Version Beta" class="${css.versionWarning} plugin-version">beta</small>`
} }
const activationButton = isActive const activationButton = isActive
@ -104,15 +115,15 @@ class PluginManagerComponent extends ViewPlugin {
</button>` </button>`
return yo` return yo`
<article id="remixPluginManagerListItem_${name}" class="list-group-item py-1" title="${displayName}" > <article id="remixPluginManagerListItem_${name}" class="list-group-item py-1 plugins-list-group-item" title="${displayName}" >
<div class="${css.row} justify-content-between align-items-center"> <div class="${css.row} justify-content-between align-items-center mb-2">
<h6 class="${css.displayName}"> <h6 class="${css.displayName} plugin-name">
${displayName} ${displayName}
${versionWarning} ${versionWarning}
</h6> </h6>
${activationButton} ${activationButton}
</div> </div>
<p class="${css.description}">${api.profile.description}</p> <p class="${css.description} text-body plugin-text">${api.profile.description}</p>
</article> </article>
` `
} }
@ -166,16 +177,16 @@ class PluginManagerComponent extends ViewPlugin {
const activeTile = actives.length !== 0 const activeTile = actives.length !== 0
? yo` ? yo`
<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-between align-items-center"> <nav class="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
<span class="navbar-brand">Active Modules</span> <span class="navbar-brand plugins-list-title">Active Modules</span>
<span class="badge badge-pill badge-primary">${actives.length}</span> <span class="badge badge-primary">${actives.length}</span>
</nav>` </nav>`
: '' : ''
const inactiveTile = inactives.length !== 0 const inactiveTile = inactives.length !== 0
? yo` ? yo`
<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-between align-items-center"> <nav class="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
<span class="navbar-brand">Inactive Modules</span> <span class="navbar-brand plugins-list-title h6 mb-0 mr-2">Inactive Modules</span>
<span class="badge badge-pill badge-primary" style = "cursor: default;">${inactives.length}</span> <span class="badge badge-primary" style = "cursor: default;">${inactives.length}</span>
</nav>` </nav>`
: '' : ''
@ -183,19 +194,19 @@ class PluginManagerComponent extends ViewPlugin {
const rootView = yo` const rootView = yo`
<div id='pluginManager'> <div id='pluginManager'>
<header class="form-group ${css.pluginSearch}"> <header class="form-group ${css.pluginSearch} plugins-header py-3 px-4 border-bottom">
<input onkeyup="${e => this.filterPlugins(e)}" class="form-control" placeholder="Search"> <input onkeyup="${e => this.filterPlugins(e)}" class="${css.pluginSearchInput} form-control" placeholder="Search">
<button onclick="${_ => this.openLocalPlugin()}" class="btn btn-sm text-dark border-0 font-weight-bold mt-2"> <button onclick="${_ => this.openLocalPlugin()}" class="${css.pluginSearchButton} btn bg-transparent text-dark border-0 mt-2 text-underline">
Connect to a Local Plugin Connect to a Local Plugin
</button> </button>
</header> </header>
<section> <section>
${activeTile} ${activeTile}
<div class="list-group list-group-flush"> <div class="list-group list-group-flush plugins-list-group">
${actives.map(name => this.renderItem(name))} ${actives.map(name => this.renderItem(name))}
</div> </div>
${inactiveTile} ${inactiveTile}
<div class="list-group list-group-flush"> <div class="list-group list-group-flush plugins-list-group">
${inactives.map(name => this.renderItem(name))} ${inactives.map(name => this.renderItem(name))}
</div> </div>
</section> </section>

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

@ -38,7 +38,7 @@ const css = csjs`
.titleInfo { .titleInfo {
padding-left: 10px; padding-left: 10px;
} }
.versionWarning { .versionBadge {
background-color: var(--light); background-color: var(--light);
padding: 0 7px; padding: 0 7px;
font-weight: bolder; font-weight: bolder;
@ -122,11 +122,11 @@ export class SidePanel extends AbstractPanel {
name = profile.displayName ? profile.displayName : profile.name 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>` : '' 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)) { 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>`
} }
// Beta // Beta
if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) { if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) {
versionWarning = yo`<small title="Version Beta" class="${css.versionWarning}">beta</small>` versionWarning = yo`<small title="Version Beta" class="badge-light ${css.versionBadge}">beta</small>`
} }
} }

@ -3,7 +3,7 @@ import { EventEmitter } from 'events'
import * as packageJson from '../../../package.json' import * as packageJson from '../../../package.json'
const themes = [ const themes = [
{name: 'Dark', quality: 'dark', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1570118040/remix-dark-theme.css'}, {name: 'Dark', quality: 'dark', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1572963493/remix-custom-dark.css'},
{name: 'Light', quality: 'light', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1572342742/light-theme.css'}, {name: 'Light', quality: 'light', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1572342742/light-theme.css'},
// switching to the url Todo: remove when the theme is ready // switching to the url Todo: remove when the theme is ready

Loading…
Cancel
Save