mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Change plugin manager styles

Browse Source
pull/5370/head
alexcherman 6 years ago
parent 4e7ffa4c80
commit 6f8d706b20
5 changed files with 51 additions and 7250 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 7215
      assets/css/remix-dark-theme.css
  2. 59
      src/app/components/plugin-manager-component.js
  3. 12
      src/app/components/plugin-manager-settings.js
  4. 1
      src/app/components/side-panel.js
  5. 2
      src/app/tabs/theme-module.js

7215
assets/css/remix-dark-theme.css
View File

File diff suppressed because it is too large Load Diff

59
src/app/components/plugin-manager-component.js
Unescape View File

@ -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`
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 {
</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 {
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 {
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>

12
src/app/components/plugin-manager-settings.js
Unescape View File

@ -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 {
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>`
} }

1
src/app/components/side-panel.js
Unescape View File

@ -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;

2
src/app/tabs/theme-module.js
Unescape View File

@ -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

Write Preview
Loading…
Cancel
Save