Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
B
baas-ide
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
JIRA
JIRA
Merge Requests
1
Merge Requests
1
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Registry
Registry
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
guxukai
baas-ide
Commits
7bb6393b
Unverified
Commit
7bb6393b
authored
Apr 08, 2019
by
yann300
Committed by
GitHub
Apr 08, 2019
Browse files
Options
Browse Files
Download
Plain Diff
Merge pull request #1809 from ethereum/issue#1754-theme_module
Issue#1754 theme module
parents
2f4abcb4
66976146
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
84 additions
and
71 deletions
+84
-71
app.js
src/app.js
+9
-2
editor.js
src/app/editor/editor.js
+2
-2
settings-tab.js
src/app/tabs/settings-tab.js
+10
-7
theme-module.js
src/app/tabs/theme-module.js
+63
-0
theme-chooser.js
src/app/ui/styles-guide/theme-chooser.js
+0
-60
No files found.
src/app.js
View file @
7bb6393b
...
@@ -56,6 +56,7 @@ import { LandingPage } from './app/ui/landing-page/landing-page'
...
@@ -56,6 +56,7 @@ import { LandingPage } from './app/ui/landing-page/landing-page'
import
framingService
from
'./framingService'
import
framingService
from
'./framingService'
import
{
ApiFactory
}
from
'remix-plugin'
import
{
ApiFactory
}
from
'remix-plugin'
import
{
TxListenerModule
}
from
'./app/tabs/txlistener-module'
import
{
TxListenerModule
}
from
'./app/tabs/txlistener-module'
import
{
ThemeModule
}
from
'./app/tabs/theme-module'
var
css
=
csjs
`
var
css
=
csjs
`
html { box-sizing: border-box; }
html { box-sizing: border-box; }
...
@@ -387,6 +388,10 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
...
@@ -387,6 +388,10 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
var
fileManager
=
self
.
_components
.
fileManager
var
fileManager
=
self
.
_components
.
fileManager
registry
.
put
({
api
:
fileManager
,
name
:
'filemanager'
})
registry
.
put
({
api
:
fileManager
,
name
:
'filemanager'
})
// ----------------- theme module ----------------------------
const
themeModule
=
new
ThemeModule
()
registry
.
put
({
api
:
themeModule
,
name
:
'themeModule'
})
// ----------------- editor panel ----------------------
// ----------------- editor panel ----------------------
self
.
_components
.
editorpanel
=
new
EditorPanel
(
appStore
,
appManager
,
mainPanelComponent
)
self
.
_components
.
editorpanel
=
new
EditorPanel
(
appStore
,
appManager
,
mainPanelComponent
)
registry
.
put
({
api
:
self
.
_components
.
editorpanel
,
name
:
'editorpanel'
})
registry
.
put
({
api
:
self
.
_components
.
editorpanel
,
name
:
'editorpanel'
})
...
@@ -412,8 +417,9 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
...
@@ -412,8 +417,9 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
const
swapPanelApi
=
new
SwapPanelApi
(
swapPanelComponent
,
verticalIconsComponent
)
// eslint-disable-line
const
swapPanelApi
=
new
SwapPanelApi
(
swapPanelComponent
,
verticalIconsComponent
)
// eslint-disable-line
const
mainPanelApi
=
new
SwapPanelApi
(
mainPanelComponent
,
verticalIconsComponent
)
// eslint-disable-line
const
mainPanelApi
=
new
SwapPanelApi
(
mainPanelComponent
,
verticalIconsComponent
)
// eslint-disable-line
const
verticalIconsApi
=
new
VerticalIconsApi
(
verticalIconsComponent
)
// eslint-disable-line
const
verticalIconsApi
=
new
VerticalIconsApi
(
verticalIconsComponent
)
// eslint-disable-line
registry
.
put
({
api
:
verticalIconsApi
,
name
:
'verticalicon'
})
registry
.
put
({
api
:
appManager
.
proxy
(),
name
:
'pluginmanager'
})
registry
.
put
({
api
:
appManager
.
proxy
(),
name
:
'pluginmanager'
})
registry
.
put
({
api
:
verticalIconsApi
,
name
:
'verticalicon'
})
pluginManagerComponent
.
setApp
(
appManager
)
pluginManagerComponent
.
setApp
(
appManager
)
pluginManagerComponent
.
setStore
(
appStore
)
pluginManagerComponent
.
setStore
(
appStore
)
...
@@ -472,7 +478,8 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
...
@@ -472,7 +478,8 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
filePanel
.
api
(),
filePanel
.
api
(),
// { profile: support.profile(), api: support },
// { profile: support.profile(), api: support },
settings
.
api
(),
settings
.
api
(),
pluginManagerComponent
.
api
()
pluginManagerComponent
.
api
(),
themeModule
.
api
()
])
])
appManager
.
registerMany
([
appManager
.
registerMany
([
...
...
src/app/editor/editor.js
View file @
7bb6393b
...
@@ -15,7 +15,6 @@ require('ace-mode-solidity/build/remix-ide/mode-solidity')
...
@@ -15,7 +15,6 @@ require('ace-mode-solidity/build/remix-ide/mode-solidity')
require
(
'brace/mode/javascript'
)
require
(
'brace/mode/javascript'
)
require
(
'brace/mode/python'
)
require
(
'brace/mode/python'
)
require
(
'brace/mode/json'
)
require
(
'brace/mode/json'
)
const
themeChooser
=
require
(
'../ui/styles-guide/theme-chooser'
)
require
(
'brace/theme/chaos'
)
require
(
'brace/theme/chaos'
)
require
(
'brace/theme/chrome'
)
require
(
'brace/theme/chrome'
)
...
@@ -63,6 +62,7 @@ class Editor {
...
@@ -63,6 +62,7 @@ class Editor {
this
.
_components
=
{}
this
.
_components
=
{}
this
.
_components
.
registry
=
localRegistry
||
globalRegistry
this
.
_components
.
registry
=
localRegistry
||
globalRegistry
this
.
_deps
=
{
this
.
_deps
=
{
themeModule
:
this
.
_components
.
registry
.
get
(
'themeModule'
).
api
,
fileManager
:
this
.
_components
.
registry
.
get
(
'filemanager'
).
api
,
fileManager
:
this
.
_components
.
registry
.
get
(
'filemanager'
).
api
,
config
:
this
.
_components
.
registry
.
get
(
'config'
).
api
config
:
this
.
_components
.
registry
.
get
(
'config'
).
api
}
}
...
@@ -71,7 +71,7 @@ class Editor {
...
@@ -71,7 +71,7 @@ class Editor {
'light'
:
'chrome'
,
'light'
:
'chrome'
,
'dark'
:
'chaos'
'dark'
:
'chaos'
}
}
th
emeChooser
.
event
.
on
(
'switchTheme
'
,
(
type
)
=>
{
th
is
.
_deps
.
themeModule
.
events
.
on
(
'themeChanged
'
,
(
type
)
=>
{
this
.
setTheme
(
type
)
this
.
setTheme
(
type
)
})
})
...
...
src/app/tabs/settings-tab.js
View file @
7bb6393b
var
yo
=
require
(
'yo-yo'
)
var
yo
=
require
(
'yo-yo'
)
const
globalRegistry
=
require
(
'../../global/registry'
)
var
tooltip
=
require
(
'../ui/tooltip'
)
var
tooltip
=
require
(
'../ui/tooltip'
)
var
copyToClipboard
=
require
(
'../ui/copy-to-clipboard'
)
var
copyToClipboard
=
require
(
'../ui/copy-to-clipboard'
)
var
styleGuide
=
require
(
'../ui/styles-guide/theme-chooser'
)
var
EventManager
=
require
(
'../../lib/events'
)
var
EventManager
=
require
(
'../../lib/events'
)
var
css
=
require
(
'./styles/settings-tab-styles'
)
var
css
=
require
(
'./styles/settings-tab-styles'
)
import
{
ApiFactory
}
from
'remix-plugin'
import
{
ApiFactory
}
from
'remix-plugin'
...
@@ -13,6 +13,9 @@ module.exports = class SettingsTab extends ApiFactory {
...
@@ -13,6 +13,9 @@ module.exports = class SettingsTab extends ApiFactory {
this
.
editor
=
editor
this
.
editor
=
editor
this
.
appManager
=
appManager
this
.
appManager
=
appManager
this
.
_components
=
{}
this
.
_components
=
{}
this
.
_deps
=
{
themeModule
:
globalRegistry
.
get
(
'themeModule'
).
api
}
this
.
_view
=
{
/* eslint-disable */
this
.
_view
=
{
/* eslint-disable */
el
:
null
,
el
:
null
,
optionVM
:
null
,
personal
:
null
,
warnPersonalMode
:
null
,
generateContractMetadata
:
null
,
optionVM
:
null
,
personal
:
null
,
warnPersonalMode
:
null
,
generateContractMetadata
:
null
,
...
@@ -25,7 +28,7 @@ module.exports = class SettingsTab extends ApiFactory {
...
@@ -25,7 +28,7 @@ module.exports = class SettingsTab extends ApiFactory {
}
}
initTheme
()
{
initTheme
()
{
this
.
currentTheme
=
styleGuid
e
.
currentTheme
()
this
.
currentTheme
=
this
.
_deps
.
themeModul
e
.
currentTheme
()
}
}
get
profile
()
{
get
profile
()
{
return
{
return
{
...
@@ -40,9 +43,9 @@ module.exports = class SettingsTab extends ApiFactory {
...
@@ -40,9 +43,9 @@ module.exports = class SettingsTab extends ApiFactory {
}
}
}
}
createThemeCheckies
()
{
createThemeCheckies
()
{
let
themes
=
styleGuid
e
.
getThemes
()
let
themes
=
this
.
_deps
.
themeModul
e
.
getThemes
()
function
onswitchTheme
(
event
,
name
)
{
const
onswitchTheme
=
(
event
,
name
)
=>
{
styleGuid
e
.
switchTheme
(
name
)
this
.
_deps
.
themeModul
e
.
switchTheme
(
name
)
}
}
if
(
themes
)
{
if
(
themes
)
{
return
yo
`<div class="card-text themes-container">
return
yo
`<div class="card-text themes-container">
...
@@ -85,7 +88,7 @@ module.exports = class SettingsTab extends ApiFactory {
...
@@ -85,7 +88,7 @@ module.exports = class SettingsTab extends ApiFactory {
this
.
_view
.
pluginInput
=
yo
`<textarea rows="4" cols="70" id="plugininput" type="text" class="
${
css
.
pluginTextArea
}
" ></textarea>`
this
.
_view
.
pluginInput
=
yo
`<textarea rows="4" cols="70" id="plugininput" type="text" class="
${
css
.
pluginTextArea
}
" ></textarea>`
this
.
_view
.
themes
=
styleGuid
e
.
getThemes
()
this
.
_view
.
themes
=
this
.
_deps
.
themeModul
e
.
getThemes
()
this
.
_view
.
themesCheckBoxes
=
this
.
createThemeCheckies
()
this
.
_view
.
themesCheckBoxes
=
this
.
createThemeCheckies
()
this
.
_view
.
config
.
homePage
=
yo
`
this
.
_view
.
config
.
homePage
=
yo
`
...
@@ -156,7 +159,7 @@ module.exports = class SettingsTab extends ApiFactory {
...
@@ -156,7 +159,7 @@ module.exports = class SettingsTab extends ApiFactory {
self
.
config
.
set
(
'settings/personal-mode'
,
!
self
.
config
.
get
(
'settings/personal-mode'
))
self
.
config
.
set
(
'settings/personal-mode'
,
!
self
.
config
.
get
(
'settings/personal-mode'
))
}
}
styleGuid
e
.
switchTheme
()
this
.
_deps
.
themeModul
e
.
switchTheme
()
return
this
.
_view
.
el
return
this
.
_view
.
el
}
}
}
}
src/app/tabs/theme-module.js
0 → 100644
View file @
7bb6393b
import
{
ApiFactory
}
from
'remix-plugin'
import
{
EventEmitter
}
from
'events'
const
Storage
=
require
(
'remix-lib'
).
Storage
const
themes
=
[
{
name
:
'Cerulean'
,
quality
:
'light'
,
url
:
'https://bootswatch.com/4/cerulean/bootstrap.min.css'
},
{
name
:
'Flatly'
,
quality
:
'light'
,
url
:
'https://bootswatch.com/4/flatly/bootstrap.min.css'
},
{
name
:
'Lumen'
,
quality
:
'light'
,
url
:
'https://bootswatch.com/4/lumen/bootstrap.min.css'
},
{
name
:
'Minty'
,
quality
:
'light'
,
url
:
'https://bootswatch.com/4/minty/bootstrap.min.css'
},
{
name
:
'Pulse'
,
quality
:
'light'
,
url
:
'https://bootswatch.com/4/pulse/bootstrap.min.css'
},
{
name
:
'Sandstone'
,
quality
:
'light'
,
url
:
'https://bootswatch.com/4/sandstone/bootstrap.min.css'
},
{
name
:
'Spacelab'
,
quality
:
'light'
,
url
:
'https://bootswatch.com/4/spacelab/bootstrap.min.css'
},
{
name
:
'Yeti'
,
quality
:
'light'
,
url
:
'https://bootswatch.com/4/yeti/bootstrap.min.css'
},
{
name
:
'Cyborg'
,
quality
:
'dark'
,
url
:
'https://bootswatch.com/4/cyborg/bootstrap.min.css'
},
{
name
:
'Darkly'
,
quality
:
'dark'
,
url
:
'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/darkly/bootstrap.min.css'
},
{
name
:
'Slate'
,
quality
:
'dark'
,
url
:
'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/slate/bootstrap.min.css'
},
{
name
:
'Superhero'
,
quality
:
'dark'
,
url
:
'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/superhero/bootstrap.min.css'
}
]
export
class
ThemeModule
extends
ApiFactory
{
constructor
()
{
super
()
this
.
events
=
new
EventEmitter
()
this
.
storage
=
new
Storage
(
'style:'
)
this
.
themes
=
themes
.
reduce
((
acc
,
theme
)
=>
({
...
acc
,
[
theme
.
name
]:
theme
}),
{})
this
.
active
=
this
.
storage
.
exists
(
'theme'
)
?
this
.
storage
.
get
(
'theme'
)
:
'Cerulean'
}
get
profile
()
{
return
{
name
:
'theme'
,
events
:
[
'themeChanged'
],
methods
:
[
'switchTheme'
,
'getThemes'
,
'currentTheme'
]
}
}
/** Return the active theme */
currentTheme
()
{
return
this
.
themes
[
this
.
active
]
}
/** Returns all themes as an array */
getThemes
()
{
return
Object
.
keys
(
this
.
themes
).
map
(
key
=>
this
.
themes
[
key
])
}
/**
* Change the current theme
* @param {string} [themeName] - The name of the theme
*/
switchTheme
(
themeName
)
{
if
(
themeName
&&
!
Object
.
keys
(
this
.
themes
).
includes
(
themeName
))
{
throw
new
Error
(
`Theme
${
themeName
}
doesn't exist`
)
}
const
next
=
themeName
||
this
.
active
// Name
const
nextTheme
=
this
.
themes
[
next
]
// Theme
this
.
storage
.
set
(
'theme'
,
next
)
document
.
getElementById
(
'theme-link'
).
setAttribute
(
'href'
,
nextTheme
.
url
)
document
.
documentElement
.
style
.
setProperty
(
'--theme'
,
nextTheme
.
quality
)
this
.
events
.
emit
(
'themeChanged'
,
nextTheme
.
quality
)
}
}
src/app/ui/styles-guide/theme-chooser.js
deleted
100644 → 0
View file @
2f4abcb4
var
Storage
=
require
(
'remix-lib'
).
Storage
var
EventEmitter
=
require
(
'events'
)
// TODO : Put it somewhere else
const
themes
=
[
{
name
:
'Cerulean'
,
quality
:
'light'
,
url
:
'https://bootswatch.com/4/cerulean/bootstrap.min.css'
},
{
name
:
'Flatly'
,
quality
:
'light'
,
url
:
'https://bootswatch.com/4/flatly/bootstrap.min.css'
},
{
name
:
'Lumen'
,
quality
:
'light'
,
url
:
'https://bootswatch.com/4/lumen/bootstrap.min.css'
},
{
name
:
'Minty'
,
quality
:
'light'
,
url
:
'https://bootswatch.com/4/minty/bootstrap.min.css'
},
{
name
:
'Pulse'
,
quality
:
'light'
,
url
:
'https://bootswatch.com/4/pulse/bootstrap.min.css'
},
{
name
:
'Sandstone'
,
quality
:
'light'
,
url
:
'https://bootswatch.com/4/sandstone/bootstrap.min.css'
},
{
name
:
'Spacelab'
,
quality
:
'light'
,
url
:
'https://bootswatch.com/4/spacelab/bootstrap.min.css'
},
{
name
:
'Yeti'
,
quality
:
'light'
,
url
:
'https://bootswatch.com/4/yeti/bootstrap.min.css'
},
{
name
:
'Cyborg'
,
quality
:
'dark'
,
url
:
'https://bootswatch.com/4/cyborg/bootstrap.min.css'
},
{
name
:
'Darkly'
,
quality
:
'dark'
,
url
:
'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/darkly/bootstrap.min.css'
},
{
name
:
'Slate'
,
quality
:
'dark'
,
url
:
'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/slate/bootstrap.min.css'
},
{
name
:
'Superhero'
,
quality
:
'dark'
,
url
:
'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/superhero/bootstrap.min.css'
}
]
const
defaultTheme
=
'Cerulean'
module
.
exports
=
{
event
:
new
EventEmitter
(),
currentTheme
:
function
()
{
const
themeStorage
=
new
Storage
(
'style:'
)
if
(
themeStorage
.
exists
(
'theme'
))
{
const
currThemeObj
=
this
.
isThere
(
themeStorage
.
get
(
'theme'
))
return
currThemeObj
?
currThemeObj
.
name
:
defaultTheme
}
else
{
return
defaultTheme
}
},
isThere
:
function
(
themeName
)
{
// returns an object
return
themes
.
find
(
obj
=>
{
return
obj
.
name
===
themeName
})
},
getThemes
:
function
()
{
return
themes
},
switchTheme
:
function
(
theme
)
{
let
themeStorage
=
new
Storage
(
'style:'
)
if
(
theme
)
{
themeStorage
.
set
(
'theme'
,
theme
)
}
let
theTheme
if
(
theme
)
{
theTheme
=
theme
}
else
{
theTheme
=
this
.
currentTheme
()
}
let
themeObj
=
this
.
isThere
(
theTheme
)
if
(
themeObj
)
{
document
.
getElementById
(
'theme-link'
).
setAttribute
(
'href'
,
themeObj
.
url
)
document
.
documentElement
.
style
.
setProperty
(
'--theme'
,
themeObj
.
quality
)
this
.
event
.
emit
(
'switchTheme'
,
themeObj
.
quality
)
}
}
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment