Skip to content

B
baas-ide
Commit 7b548779 authored by alexcherman's avatar alexcherman
Browse files
Options

Change plugin manager styles

parent 244ba6c8
Show whitespace changes
Inline Side-by-side
Showing with 45 additions and 29 deletions
assets/css/remix-dark-theme.css deleted 100644 → 0
View file @ 244ba6c8
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 @ 7b548779
...@@ -19,11 +19,21 @@ const css = csjs` ...@@ -19,11 +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;
margin: 0;
font-size: 11px;
line-height: 12px;
text-transform: uppercase;
} }
.description { .description {
text-transform: capitalize; text-transform: capitalize;
...@@ -37,12 +47,15 @@ const css = csjs` ...@@ -37,12 +47,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;
} }
` `
...@@ -104,15 +117,15 @@ class PluginManagerComponent extends ViewPlugin { ...@@ -104,15 +117,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 px-2 pt-2 pb-0 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} form-control-label">
${displayName} ${displayName}
${versionWarning} ${versionWarning}
</h6> </h6>
${activationButton} ${activationButton}
</div> </div>
<p class="${css.description}">${api.profile.description}</p> <p class="${css.description} text-body">${api.profile.description}</p>
</article> </article>
` `
} }
...@@ -164,16 +177,16 @@ class PluginManagerComponent extends ViewPlugin { ...@@ -164,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-start navbar navbar-expand-lg bg-light navbar-light align-items-center px-4 py-3">
<span class="navbar-brand">Active Modules</span> <span class="h6 mb-0 mr-2">Active Modules</span>
<span class="badge badge-pill badge-primary">${actives.length}</span> <span class="badge badge-pill badge-warning">${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-start navbar navbar-expand-lg bg-light navbar-light align-items-center px-4 py-3">
<span class="navbar-brand">Inactive Modules</span> <span class="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-pill badge-warning" style = "cursor: default;">${inactives.length}</span>
</nav>` </nav>`
: '' : ''
...@@ -181,19 +194,19 @@ class PluginManagerComponent extends ViewPlugin { ...@@ -181,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>
......
src/app/components/plugin-manager-settings.js
View file @ 7b548779
...@@ -11,8 +11,12 @@ const css = csjs` ...@@ -11,8 +11,12 @@ const css = csjs`
align-items: center; align-items: center;
padding: 5px 20px; padding: 5px 20px;
} }
.permissions button { .permissionsButton {
padding: 2px 5px; height: 32px;
padding: 0 12px;
font-weight: 700;
font-size: 12px;
line-height: 16px;
cursor: pointer; cursor: pointer;
} }
.permissionForm h4 { .permissionForm h4 {
...@@ -126,8 +130,8 @@ export class PluginManagerSettings { ...@@ -126,8 +130,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 btn-sm ${css.permissionsButton}">Settings</button>
</footer>` </footer>`
} }
......
src/app/components/side-panel.js
View file @ 7b548779
...@@ -13,7 +13,6 @@ const css = csjs` ...@@ -13,7 +13,6 @@ const css = csjs`
} }
.swapitTitle { .swapitTitle {
margin: 0; margin: 0;
text-transform: uppercase;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
......
src/app/tabs/theme-module.js
View file @ 7b548779
...@@ -3,7 +3,7 @@ import { EventEmitter } from 'events' ...@@ -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/v1571151519/custom-dark-theme.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
......
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