mirror of
https://github.com/pulsar-edit/pulsar.git
synced 2024-09-21 07:58:04 +03:00
Add a styled but non-functional themes config panel
This commit is contained in:
parent
af02d9f0fd
commit
540c543984
@ -3,6 +3,7 @@ $ = require 'jquery'
|
||||
_ = require 'underscore'
|
||||
GeneralConfigPanel = require 'general-config-panel'
|
||||
EditorConfigPanel = require 'editor-config-panel'
|
||||
ThemeConfigPanel = require 'theme-config-panel'
|
||||
PackageConfigPanel = require 'package-config-panel'
|
||||
|
||||
module.exports =
|
||||
@ -27,6 +28,7 @@ class ConfigView extends View
|
||||
|
||||
@addPanel('General', new GeneralConfigPanel)
|
||||
@addPanel('Editor', new EditorConfigPanel)
|
||||
@addPanel('Themes', new ThemeConfigPanel)
|
||||
@addPanel('Installed Packages', new PackageConfigPanel)
|
||||
|
||||
addPanel: (name, panel) ->
|
||||
|
@ -15,32 +15,4 @@ class GeneralConfigPanel extends ConfigPanel
|
||||
@label for: 'core.autosave', "Autosave on unfocus:"
|
||||
@input id: 'core.autosave', type: 'checkbox'
|
||||
|
||||
@div class: 'section', =>
|
||||
@div class: 'list-wrapper pull-left', =>
|
||||
@div class: 'list-header', "Enabled Themes (Drag from right)"
|
||||
@ol id: 'enabled-theme-list', outlet: 'enabledThemeList'
|
||||
|
||||
@div class: 'list-wrapper pull-left', =>
|
||||
@div class: 'list-header', "Available Themes"
|
||||
@ol id: 'available-theme-list', outlet: 'availableThemeList'
|
||||
|
||||
populateThemeLists: ->
|
||||
for name in atom.getAvailableThemeNames()
|
||||
@availableThemeList.append(@buildThemeLi(name, draggable: true))
|
||||
|
||||
for name in config.get("core.themes") ? []
|
||||
@enabledThemeList.append(@buildThemeLi(name))
|
||||
|
||||
@enabledThemeList.sortable()
|
||||
|
||||
buildThemeLi: (name, {draggable} = {}) ->
|
||||
li = $$ ->
|
||||
@li name: name, =>
|
||||
@div class: 'octicons close-icon pull-right'
|
||||
@text name
|
||||
if draggable
|
||||
li.draggable
|
||||
connectToSortable: '#enabled-theme-list'
|
||||
appendTo: '#general-config-panel'
|
||||
helper: 'clone'
|
||||
li
|
||||
|
50
src/app/theme-config-panel.coffee
Normal file
50
src/app/theme-config-panel.coffee
Normal file
@ -0,0 +1,50 @@
|
||||
ConfigPanel = require 'config-panel'
|
||||
{$$} = require 'space-pen'
|
||||
$ = require 'jquery'
|
||||
_ = require 'underscore'
|
||||
|
||||
window.jQuery = $
|
||||
require 'jqueryui-browser/ui/jquery.ui.core'
|
||||
require 'jqueryui-browser/ui/jquery.ui.widget'
|
||||
require 'jqueryui-browser/ui/jquery.ui.mouse'
|
||||
require 'jqueryui-browser/ui/jquery.ui.sortable'
|
||||
require 'jqueryui-browser/ui/jquery.ui.draggable'
|
||||
delete window.jQuery
|
||||
|
||||
module.exports =
|
||||
class ThemeConfigPanel extends ConfigPanel
|
||||
@content: ->
|
||||
@div id: 'themes-config', =>
|
||||
@legend "Themes"
|
||||
@div id: 'theme-picker', =>
|
||||
@div class: 'panel', =>
|
||||
@div class: 'panel-heading', "Enabled Themes"
|
||||
@ol id: 'enabled-themes', class: 'list-group list-group-flush', outlet: 'enabledThemes'
|
||||
@div class: 'panel', =>
|
||||
@div class: 'panel-heading', "Available Themes"
|
||||
@ol id: 'available-themes', class: 'list-group list-group-flush', outlet: 'availableThemes'
|
||||
|
||||
constructor: ->
|
||||
super
|
||||
for name in atom.getAvailableThemeNames()
|
||||
@availableThemes.append(@buildThemeLi(name, draggable: true))
|
||||
|
||||
for name in config.get("core.themes") ? []
|
||||
@enabledThemes.append(@buildThemeLi(name))
|
||||
|
||||
@enabledThemes.sortable()
|
||||
|
||||
buildThemeLi: (name, {draggable} = {}) ->
|
||||
li = $$ ->
|
||||
@li class: 'list-group-item', name: name, =>
|
||||
@div class: 'octicons close-icon pull-right'
|
||||
@text name
|
||||
if draggable
|
||||
li.draggable
|
||||
connectToSortable: '#enabled-themes'
|
||||
appendTo: '#themes-config'
|
||||
helper: (e) ->
|
||||
target = $(e.target)
|
||||
target.clone().width(target.width())
|
||||
else
|
||||
li
|
@ -18,58 +18,90 @@
|
||||
|
||||
#panels {
|
||||
-webkit-flex: 1;
|
||||
-webkit-flex-flow: column;
|
||||
display: -webkit-flex;
|
||||
padding: @line-height-base;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
|
||||
> div {
|
||||
.list-wrapper {
|
||||
width: 300px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
-webkit-flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.list-header {
|
||||
box-sizing: border-box;
|
||||
background: #eee;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
#themes-config {
|
||||
height: 100%;
|
||||
display: -webkit-flex;
|
||||
-webkit-flex-flow: column;
|
||||
|
||||
li.ui-draggable-dragging, li.ui-sortable-helper {
|
||||
width: 300px;
|
||||
background: white;
|
||||
border: 1px solid #eee;
|
||||
padding: 10px;
|
||||
}
|
||||
#theme-picker {
|
||||
-webkit-flex: 1;
|
||||
display: -webkit-flex;
|
||||
min-height: 0;
|
||||
|
||||
ol {
|
||||
box-sizing: border-box;
|
||||
height: 400px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #ccc;
|
||||
border-top-width: 0;
|
||||
background: #fafafa;
|
||||
.panel {
|
||||
-webkit-flex: 1;
|
||||
display: -webkit-flex;
|
||||
-webkit-flex-flow: column;
|
||||
min-height: 0;
|
||||
&:first-child { margin-right: @line-height-base / 2; }
|
||||
&:last-child { margin-left: @line-height-base / 2; }
|
||||
|
||||
li {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
background: white;
|
||||
.panel-heading {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
margin-right: 10px;
|
||||
}
|
||||
ol {
|
||||
margin-top: 0;
|
||||
-webkit-flex: 1;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
|
||||
.close-icon {
|
||||
display: none;
|
||||
li {
|
||||
&:first-child { border-top: 0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#enabled-theme-list li:hover .close-icon {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
li.ui-draggable-dragging, li.ui-sortable-helper {
|
||||
border: 0;
|
||||
box-sizing: content-box;
|
||||
background: white;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
/* li.ui-draggable-dragging, li.ui-sortable-helper {
|
||||
width: 300px;
|
||||
background: white;
|
||||
border: 1px solid #eee;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
ol {
|
||||
box-sizing: border-box;
|
||||
height: 400px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #ccc;
|
||||
border-top-width: 0;
|
||||
background: #fafafa;
|
||||
|
||||
li {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
background: white;
|
||||
|
||||
input[type='checkbox'] {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
}
|
||||
|
||||
#packages {
|
||||
|
Loading…
Reference in New Issue
Block a user