Skip to content

B
baas-ide
Unverified Commit 81cbca1e authored by Rob's avatar Rob Committed by GitHub
Browse files
Options

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

Change plugin manager styles
parents 2af3e274 784eec17
Hide whitespace changes
Inline Side-by-side
Showing with 41 additions and 30 deletions
assets/css/remix-dark-theme.css deleted 100644 → 0
View file @ 2af3e274
This source diff could not be displayed because it is too large. You can view the blob instead.
src/app/components/plugin-manager-component.js
View file @ 81cbca1e
......@@ -19,13 +19,21 @@ const css = csjs`
z-index: 2;
margin-bottom: 0px;
}
.pluginSearchInput {
height: 38px;
}
.pluginSearchButton {
font-size: 13px;
}
.displayName {
text-transform: capitalize;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
align-items: center;
justify-content: space-between;
}
.description {
font-size: 13px;
line-height: 18px;
text-transform: capitalize;
}
.row {
......@@ -37,12 +45,15 @@ const css = csjs`
color:
}
.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;
cursor: default;
border: 1px solid;
border-radius: 2px;
}
`
......@@ -90,7 +101,7 @@ class PluginManagerComponent extends ViewPlugin {
}
// Beta
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
......@@ -104,15 +115,15 @@ class PluginManagerComponent extends ViewPlugin {
</button>`
return yo`
<article id="remixPluginManagerListItem_${name}" class="list-group-item py-1" title="${displayName}" >
<div class="${css.row} justify-content-between align-items-center">
<h6 class="${css.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 mb-2">
<h6 class="${css.displayName} plugin-name">
${displayName}
${versionWarning}
</h6>
${activationButton}
</div>
<p class="${css.description}">${api.profile.description}</p>
<p class="${css.description} text-body plugin-text">${api.profile.description}</p>
</article>
`
}
......@@ -166,16 +177,16 @@ class PluginManagerComponent extends ViewPlugin {
const activeTile = actives.length !== 0
? yo`
<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-between align-items-center">
<span class="navbar-brand">Active Modules</span>
<span class="badge badge-pill badge-primary">${actives.length}</span>
<nav class="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
<span class="navbar-brand plugins-list-title">Active Modules</span>
<span class="badge badge-primary">${actives.length}</span>
</nav>`
: ''
const inactiveTile = inactives.length !== 0
? yo`
<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-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
<span class="navbar-brand plugins-list-title h6 mb-0 mr-2">Inactive Modules</span>
<span class="badge badge-primary" style = "cursor: default;">${inactives.length}</span>
</nav>`
: ''
......@@ -183,19 +194,19 @@ class PluginManagerComponent extends ViewPlugin {
const rootView = yo`
<div id='pluginManager'>
<header class="form-group ${css.pluginSearch}">
<input onkeyup="${e => this.filterPlugins(e)}" class="form-control" placeholder="Search">
<button onclick="${_ => this.openLocalPlugin()}" class="btn btn-sm text-dark border-0 font-weight-bold mt-2">
<header class="form-group ${css.pluginSearch} plugins-header py-3 px-4 border-bottom">
<input onkeyup="${e => this.filterPlugins(e)}" class="${css.pluginSearchInput} form-control" placeholder="Search">
<button onclick="${_ => this.openLocalPlugin()}" class="${css.pluginSearchButton} btn bg-transparent text-dark border-0 mt-2 text-underline">
Connect to a Local Plugin
</button>
</header>
<section>
${activeTile}
<div class="list-group list-group-flush">
<div class="list-group list-group-flush plugins-list-group">
${actives.map(name => this.renderItem(name))}
</div>
${inactiveTile}
<div class="list-group list-group-flush">
<div class="list-group list-group-flush plugins-list-group">
${inactives.map(name => this.renderItem(name))}
</div>
</section>
......
src/app/components/plugin-manager-settings.js
View file @ 81cbca1e
......@@ -126,8 +126,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">
<button onclick="${() => this.openDialog()}" class="btn btn-primary settings-button">Settings</button>
</footer>`
}
......
src/app/components/side-panel.js
View file @ 81cbca1e
......@@ -38,7 +38,7 @@ const css = csjs`
.titleInfo {
padding-left: 10px;
}
.versionWarning {
.versionBadge {
background-color: var(--light);
padding: 0 7px;
font-weight: bolder;
......@@ -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>`
}
// Beta
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>`
}
}
......
src/app/tabs/theme-module.js
View file @ 81cbca1e
......@@ -3,7 +3,7 @@ import { EventEmitter } from 'events'
import * as packageJson from '../../../package.json'
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'},
// switching to the url Todo: remove when the theme is ready
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment