dropdown + strings + more blue
This commit is contained in:
Zack Rauen
parent
84c4db7e99
commit
0ea223c8f3
193
css/main.css
193
css/main.css
|
|
@ -101,6 +101,7 @@
|
|||
background-color: #3E82E5;
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.bd-button:hover {
|
||||
|
|
@ -305,18 +306,18 @@
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.bd-select-wrap + .bd-select-wrap {
|
||||
.bd-select-wrapper + .bd-select-wrapper {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.bd-select-wrap {
|
||||
.bd-select-wrapper {
|
||||
color: #f6f6f7;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bd-select-wrap label {
|
||||
.bd-select-wrapper label {
|
||||
opacity: .3;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
|
@ -324,26 +325,29 @@
|
|||
.bd-select {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bd-select-controls {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
color: #f6f6f7;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
padding: 5px 5px 5px 0;
|
||||
}
|
||||
|
||||
.bd-select-transparent .bd-select-controls {
|
||||
.bd-select.bd-select-transparent {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.bd-select-arrow, .bd-select-controls svg {
|
||||
.bd-select-value {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.bd-select-arrow {
|
||||
margin-left: 10px;
|
||||
fill: #FFFFFF;
|
||||
}
|
||||
|
||||
.bd-select .bd-select-options {
|
||||
|
|
@ -351,19 +355,21 @@
|
|||
background: #2F3136;
|
||||
border-radius: 0 0 3px 3px;
|
||||
max-height: 300px;
|
||||
min-width: 100%;
|
||||
min-width: calc(100% + 2px);
|
||||
overflow-y: auto;
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 5px 0px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-top: 0;
|
||||
margin-top: -1px;
|
||||
z-index: 1;
|
||||
margin-left: -1px;
|
||||
z-index: 2;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
.bd-select-transparent .bd-select-options {
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
margin-top: 3px;
|
||||
margin-left: -1px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.bd-select .bd-select-option {
|
||||
|
|
@ -404,10 +410,133 @@
|
|||
}
|
||||
|
||||
|
||||
.bd-setting-item .bd-select {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.bd-settings-group.expanded .bd-settings-container:not(.animating) {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
|
||||
.bd-switch {
|
||||
background-color: #72767d;
|
||||
border-radius: 14px;
|
||||
width: 42px;
|
||||
height: 24px;
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
transition: background .15s ease-in-out,box-shadow .15s ease-in-out,border .15s ease-in-out,opacity .15s ease-in-out;
|
||||
margin-left: 10px;
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.15);
|
||||
}
|
||||
|
||||
.bd-switch::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 0;
|
||||
opacity: 0;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.bd-switch::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
width: 18px;
|
||||
margin: 3px;
|
||||
border-radius: 9px;
|
||||
height: 18px;
|
||||
left: 0;
|
||||
transition: transform .15s ease-in-out,width .1s ease-in-out,left .1s ease-in-out;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
.bd-switch .bd-checkbox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bd-switch-checked {
|
||||
background-color: #3E82E5;
|
||||
}
|
||||
|
||||
.bd-switch-checked::after {
|
||||
transform: translate3d(18px,0,0);
|
||||
}
|
||||
|
||||
.bd-switch-disabled {
|
||||
opacity: .3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.bd-setting-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.bd-setting-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bd-setting-header label {
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #f6f6f7;
|
||||
}
|
||||
|
||||
.bd-setting-note {
|
||||
color: #72767d;
|
||||
margin-top: 4px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bd-setting-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin-top: 20px;
|
||||
background-color: rgba(114,118,125,.3);
|
||||
}
|
||||
|
||||
.bd-controls + .bd-addon-list {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* BEGIN EMOTE STYLING */
|
||||
/* =================== */
|
||||
#emote-container {
|
||||
|
|
@ -1103,11 +1232,7 @@ body .ace_closeButton:active {
|
|||
font-size: 11px;
|
||||
}
|
||||
|
||||
.bd-pfbtn,
|
||||
.bd-button-title {
|
||||
background: #7289da;
|
||||
color: #FFF;
|
||||
border-radius: 5px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -1356,7 +1481,7 @@ body .ace_closeButton:active {
|
|||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.bd-addon-list .bd-header {
|
||||
.bd-addon-list .bd-addon-header {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
|
|
@ -1366,11 +1491,11 @@ body .ace_closeButton:active {
|
|||
border-bottom: 1px solid transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
.theme-dark .bd-addon-list .bd-header {
|
||||
.theme-dark .bd-addon-list .bd-addon-header {
|
||||
color: #f6f6f7;
|
||||
border-bottom-color: rgba(114,118,125,.3);
|
||||
}
|
||||
.theme-light .bd-addon-list .bd-header {
|
||||
.theme-light .bd-addon-list .bd-addon-header {
|
||||
color: #4f545c;
|
||||
border-bottom-color: rgba(185,187,190,.3);
|
||||
}
|
||||
|
|
@ -1413,12 +1538,7 @@ body .ace_closeButton:active {
|
|||
}
|
||||
|
||||
.bd-addon-list .bd-footer button {
|
||||
background: #7289da;
|
||||
color: #FFF;
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
padding: 2px 16px;
|
||||
padding: 3px 16px;
|
||||
transition: opacity 250ms ease;
|
||||
}
|
||||
|
||||
|
|
@ -1427,7 +1547,7 @@ body .ace_closeButton:active {
|
|||
}
|
||||
|
||||
.bd-addon-list .bd-footer a {
|
||||
color: #7289da;
|
||||
color: #3E82E5;
|
||||
}
|
||||
|
||||
.bd-addon-list .bd-footer a:hover {
|
||||
|
|
@ -1561,12 +1681,9 @@ body .ace_closeButton:active {
|
|||
}
|
||||
|
||||
.bd-modal-wrapper .footer button {
|
||||
background-color: #7289da;
|
||||
color: #fff;
|
||||
min-height: 32px;
|
||||
min-width: 60px;
|
||||
align-items: center;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
|
@ -1575,15 +1692,6 @@ body .ace_closeButton:active {
|
|||
padding: 2px 16px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.bd-modal-wrapper .footer button:hover {
|
||||
background-color: #677bc4;
|
||||
}
|
||||
|
||||
.bd-modal-wrapper .footer button:active {
|
||||
background-color: #5f6fb9;
|
||||
}
|
||||
|
||||
.bd-modal-wrapper .tab-bar-container {
|
||||
align-items: center;
|
||||
border-bottom: 0;
|
||||
|
|
@ -1666,6 +1774,11 @@ body .ace_closeButton:active {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.bd-modal-wrapper .error-link {
|
||||
color: #3E82E5;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bd-modal-wrapper .bd-content-modal .scroller {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
|
|
|||
60
js/main.js
60
js/main.js
File diff suppressed because one or more lines are too long
|
|
@ -15,8 +15,8 @@ export default new class CustomCSS extends Builtin {
|
|||
get name() {return "Custom CSS";}
|
||||
get category() {return "customcss";}
|
||||
get id() {return "customcss";}
|
||||
get startDetached() {return Settings.get(this.collection, this.category, "startDetached");}
|
||||
get nativeOpen() {return Settings.get(this.collection, this.category, "nativeOpen");}
|
||||
get startDetached() {return Settings.get(this.collection, this.category, "openAction") == "detached";}
|
||||
get nativeOpen() {return Settings.get(this.collection, this.category, "openAction") == "system";}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
|
|
|||
|
|
@ -42,8 +42,7 @@ export default [
|
|||
settings: [
|
||||
{type: "switch", id: "customcss", value: true},
|
||||
{type: "switch", id: "liveUpdate", value: false},
|
||||
{type: "switch", id: "startDetached", value: false, disableWith: "nativeOpen"},
|
||||
{type: "switch", id: "nativeOpen", value: false, disableWith: "startDetached"}
|
||||
{type: "dropdown", id: "openAction", value: "settings", options: [{value: "settings"}, {value: "detached"}, {value: "system"}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -89,6 +89,15 @@ export default {
|
|||
nativeOpen: {
|
||||
name: "Open in Native Editor",
|
||||
note: "Clicking the Custom CSS tab opens your custom css in your native editor"
|
||||
},
|
||||
openAction: {
|
||||
name: "Editor Location",
|
||||
note: "Where Custom CSS should open by default",
|
||||
options: {
|
||||
settings: "Settings Menu",
|
||||
detached: "Detached Window",
|
||||
system: "System Editor"
|
||||
}
|
||||
}
|
||||
},
|
||||
developer: {
|
||||
|
|
@ -176,7 +185,13 @@ export default {
|
|||
website: "Website",
|
||||
source: "Source",
|
||||
server: "Support Server",
|
||||
donate: "Donate"
|
||||
donate: "Donate",
|
||||
name: "Name",
|
||||
author: "Author",
|
||||
version: "Version",
|
||||
added: "Date Added",
|
||||
modified: "Date Modified",
|
||||
search: "Search {{type}}"
|
||||
},
|
||||
Emotes: {
|
||||
loading: "Loading emotes in the background do not reload.",
|
||||
|
|
@ -217,5 +232,11 @@ export default {
|
|||
message: "Message",
|
||||
error: "Error",
|
||||
addonErrors: "Addon Errors"
|
||||
},
|
||||
Sorting: {
|
||||
sortBy: "Sort By",
|
||||
order: "Order",
|
||||
ascending: "Ascending",
|
||||
descending: "Descending"
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -103,18 +103,23 @@ export default new class SettingsManager {
|
|||
DataStore.setData(collection, this.state[collection]);
|
||||
}
|
||||
|
||||
loadCollection(collection) {
|
||||
const previousState = DataStore.getData(collection);
|
||||
if (!previousState) return this.saveCollection(collection);
|
||||
for (const category in this.state[collection]) {
|
||||
if (!previousState[category]) Object.assign(previousState, {[category]: this.state[collection][category]});
|
||||
for (const setting in this.state[collection][category]) {
|
||||
loadCollection(id) {
|
||||
const previousState = DataStore.getData(id);
|
||||
if (!previousState) return this.saveCollection(id);
|
||||
for (const category in this.state[id]) {
|
||||
if (!previousState[category]) Object.assign(previousState, {[category]: this.state[id][category]});
|
||||
for (const setting in this.state[id][category]) {
|
||||
if (previousState[category][setting] == undefined) continue;
|
||||
this.state[collection][category][setting] = previousState[category][setting];
|
||||
const settingObj = this.getSetting(id, category, setting);
|
||||
if (settingObj.type == "switch") this.state[id][category][setting] = previousState[category][setting];
|
||||
if (settingObj.type == "dropdown") {
|
||||
const exists = settingObj.options.some(o => o.value == previousState[category][setting]);
|
||||
if (exists) this.state[id][category][setting] = previousState[category][setting];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.saveCollection(collection); // in case new things were added
|
||||
this.saveCollection(id); // in case new things were added
|
||||
}
|
||||
|
||||
onSettingChange(collection, category, id, value) {
|
||||
|
|
@ -125,7 +130,7 @@ export default new class SettingsManager {
|
|||
|
||||
getSetting(collection, category, id) {
|
||||
if (arguments.length == 2) return this.collections[0].find(c => c.id == arguments[0]).settings.find(s => s.id == arguments[1]);
|
||||
return this.collections.find(c => c.id == collection).find(c => c.id == category).settings.find(s => s.id == id);
|
||||
return this.collections.find(c => c.id == collection).settings.find(c => c.id == category).settings.find(s => s.id == id);
|
||||
}
|
||||
|
||||
get(collection, category, id) {
|
||||
|
|
@ -176,6 +181,10 @@ export default new class SettingsManager {
|
|||
if (!SetStr) continue;
|
||||
setting.name = SetStr.name || setting.name;
|
||||
setting.note = SetStr.note || setting.note;
|
||||
if (!setting.options) continue;
|
||||
for (const opt of setting.options) {
|
||||
opt.label = SetStr.options[opt.id] || SetStr.options[opt.value] || opt.label;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export default class Modals {
|
|||
</div>
|
||||
</div>
|
||||
<div class="footer ${modalClasses.footer}">
|
||||
<button type="button">${Strings.Modals.okay}</button>
|
||||
<button type="button" class="bd-button">${Strings.Modals.okay}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -120,7 +120,7 @@ export default class Modals {
|
|||
</div>
|
||||
</div>
|
||||
<div class="footer ${modalClasses.footer}">
|
||||
<button type="button">${Strings.Modals.okay}</button>
|
||||
<button type="button" class="bd-button">${Strings.Modals.okay}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -89,7 +89,6 @@ export default class PublicServers extends React.Component {
|
|||
|
||||
get searchBox() {
|
||||
return <Search onKeyDown={this.searchKeyDown} placeholder={`${Strings.PublicServers.search}...`} />;
|
||||
// return React.createElement("input", {onKeyDown: this.searchKeyDown, type: "text", className: "bd-search", placeholder: `${Strings.PublicServers.search}...`, maxLength: "50"});
|
||||
}
|
||||
|
||||
get title() {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import {React, Logger, Strings} from "modules";
|
||||
import CloseButton from "../icons/close";
|
||||
import ReloadIcon from "../icons/reload";
|
||||
import Switch from "./components/switch";
|
||||
|
||||
export default class AddonCard extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
checked: this.props.enabled,
|
||||
settingsOpen: false
|
||||
};
|
||||
|
||||
|
|
@ -50,8 +50,8 @@ export default class AddonCard extends React.Component {
|
|||
getString(value) {return typeof value == "string" ? value : value.toString();}
|
||||
|
||||
onChange() {
|
||||
this.setState({checked: !this.state.checked});
|
||||
this.props.onChange && this.props.onChange(this.props.addon.id);
|
||||
this.props.enabled = !this.props.enabled;
|
||||
}
|
||||
|
||||
showSettings() {
|
||||
|
|
@ -102,7 +102,7 @@ export default class AddonCard extends React.Component {
|
|||
const linkComponents = links.map(this.buildLink.bind(this)).filter(c => c);
|
||||
return <div className="bd-footer">
|
||||
<span className="bd-links">{linkComponents.map((comp, i) => i < linkComponents.length - 1 ? [comp, " | "] : [comp]).flat()}</span>
|
||||
{this.props.hasSettings && <button onClick={this.showSettings} className="bd-button bd-button-addon-settings" disabled={!this.state.checked}>{Strings.Addons.addonSettings}</button>}
|
||||
{this.props.hasSettings && <button onClick={this.showSettings} className="bd-button bd-button-addon-settings" disabled={!this.props.enabled}>{Strings.Addons.addonSettings}</button>}
|
||||
</div>;
|
||||
}
|
||||
|
||||
|
|
@ -115,15 +115,12 @@ export default class AddonCard extends React.Component {
|
|||
const description = this.getString(addon.description);
|
||||
const version = this.getString(addon.version);
|
||||
|
||||
return <div dataName={name} dataVersion={version} className="bd-addon-card settings-closed bd-switch-item">
|
||||
<div className="bd-header">
|
||||
<span className="bd-header-title">{this.buildTitle(name, version, author)}</span>
|
||||
return <div id={`${addon.id}-card`} className="bd-addon-card settings-closed">
|
||||
<div className="bd-addon-header">
|
||||
<span className="bd-title">{this.buildTitle(name, version, author)}</span>
|
||||
<div className="bd-controls">
|
||||
{this.props.showReloadIcon && <ReloadIcon className="bd-reload bd-reload-card" onClick={this.reload} />}
|
||||
<label className="bd-switch-wrapper">
|
||||
<input className="bd-switch-checkbox" checked={this.state.checked} onChange={this.onChange} type="checkbox" />
|
||||
<div className={this.state.checked ? "bd-switch checked" : "bd-switch"} />
|
||||
</label>
|
||||
<Switch checked={this.props.enabled} onChange={this.onChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bd-description-wrap scroller-wrap fade"><div className="bd-description scroller">{description}</div></div>
|
||||
|
|
|
|||
|
|
@ -3,22 +3,9 @@ import {React, Settings, Strings} from "modules";
|
|||
import SettingsTitle from "./title";
|
||||
import ReloadIcon from "../icons/reload";
|
||||
import AddonCard from "./addoncard";
|
||||
import Select from "./components/select";
|
||||
import Dropdown from "./components/dropdown";
|
||||
import Search from "./components/search";
|
||||
|
||||
const sortOptions = [
|
||||
{label: "Name", value: "name"},
|
||||
{label: "Author", value: "author"},
|
||||
{label: "Version", value: "version"},
|
||||
{label: "Date Added", value: "added"},
|
||||
{label: "Date Modified", value: "modified"}
|
||||
];
|
||||
|
||||
const directionOptions = [
|
||||
{label: "Ascending", value: "true"},
|
||||
{label: "Descending", value: "false"}
|
||||
];
|
||||
|
||||
export default class AddonList extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
|
|
@ -35,7 +22,7 @@ export default class AddonList extends React.Component {
|
|||
}
|
||||
|
||||
reverse(value) {
|
||||
this.setState({ascending: value == "true"});
|
||||
this.setState({ascending: value});
|
||||
}
|
||||
|
||||
sort(value) {
|
||||
|
|
@ -46,6 +33,23 @@ export default class AddonList extends React.Component {
|
|||
this.setState({query: event.target.value.toLocaleLowerCase()});
|
||||
}
|
||||
|
||||
get sortOptions() {
|
||||
return [
|
||||
{label: Strings.Addons.name, value: "name"},
|
||||
{label: Strings.Addons.author, value: "author"},
|
||||
{label: Strings.Addons.version, value: "version"},
|
||||
{label: Strings.Addons.added, value: "added"},
|
||||
{label: Strings.Addons.modified, value: "modified"}
|
||||
];
|
||||
}
|
||||
|
||||
get directions() {
|
||||
return [
|
||||
{label: Strings.Sorting.ascending, value: true},
|
||||
{label: Strings.Sorting.descending, value: false}
|
||||
];
|
||||
}
|
||||
|
||||
render() {
|
||||
const {title, folder, addonList, addonState, onChange, reload} = this.props;
|
||||
const showReloadIcon = !Settings.get("settings", "addons", "autoReload");
|
||||
|
|
@ -62,10 +66,17 @@ export default class AddonList extends React.Component {
|
|||
return [
|
||||
<SettingsTitle key="title" text={title} button={button} otherChildren={showReloadIcon && <ReloadIcon className="bd-reload" onClick={this.reload.bind(this)} />} />,
|
||||
<div className="bd-controls bd-addon-controls">
|
||||
<Search onChange={this.search} placeholder={`Search...`} />
|
||||
<Search onChange={this.search} placeholder={`${Strings.Addons.search.format({type: this.props.title})}...`} />
|
||||
<div className="bd-addon-dropdowns">
|
||||
<Select options={sortOptions} label="Sort By:" onChange={this.sort} style="transparent" />
|
||||
<Select options={directionOptions} label="Order:" onChange={this.reverse} style="transparent" />
|
||||
<div className="bd-select-wrapper">
|
||||
<label className="bd-label">{Strings.Sorting.sortBy}:</label>
|
||||
<Dropdown options={this.sortOptions} onChange={this.sort} style="transparent" />
|
||||
</div>
|
||||
<div className="bd-select-wrapper">
|
||||
<label className="bd-label">{Strings.Sorting.order}:</label>
|
||||
<Dropdown options={this.directions} onChange={this.reverse} style="transparent" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>,
|
||||
<div key="addonList" className={"bd-addon-list"}>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ export default class Select extends React.Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {open: false, value: this.props.value || this.props.options[0].value};
|
||||
this.dropdown = React.createRef();
|
||||
this.onChange = this.onChange.bind(this);
|
||||
this.showMenu = this.showMenu.bind(this);
|
||||
this.hideMenu = this.hideMenu.bind(this);
|
||||
|
|
@ -42,15 +43,21 @@ export default class Select extends React.Component {
|
|||
render() {
|
||||
const style = this.props.style == "transparent" ? " bd-select-transparent" : "";
|
||||
const isOpen = this.state.open ? " menu-open" : "";
|
||||
return <div className="bd-select-wrap">
|
||||
<label className="bd-label">{this.props.label}</label>
|
||||
<div className={`bd-select${style}${isOpen}`} onClick={this.showMenu}>
|
||||
<div className="bd-select-controls">
|
||||
<div className="bd-select-value">{this.selected.label}</div>
|
||||
<Arrow className="bd-select-arrow" />
|
||||
</div>
|
||||
{this.state.open && this.options}
|
||||
</div>
|
||||
return <div className={`bd-select${style}${isOpen}`} onClick={this.showMenu} ref={this.dropdown}>
|
||||
<div className="bd-select-value">{this.selected.label}</div>
|
||||
<Arrow className="bd-select-arrow" />
|
||||
{this.state.open && this.options}
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// return <div className="bd-select-wrap">
|
||||
// <label className="bd-label">{this.props.label}</label>
|
||||
// <div className={`bd-select${style}${isOpen}`} onClick={this.showMenu} ref={this.dropdown}>
|
||||
// <div className="bd-select-controls">
|
||||
// <div className="bd-select-value">{this.selected.label}</div>
|
||||
// <Arrow className="bd-select-arrow" />
|
||||
// </div>
|
||||
// </div>
|
||||
// {this.state.open && this.options}
|
||||
// </div>;
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import {React} from "modules";
|
||||
|
||||
export default class SettingItem extends React.Component {
|
||||
render() {
|
||||
return <div className={"bd-setting-item"}>
|
||||
<div className={"bd-setting-header"}>
|
||||
<label htmlFor={this.props.id} className={"bd-setting-title"}>{this.props.name}</label>
|
||||
{this.props.children}
|
||||
</div>
|
||||
<div className={"bd-setting-note"}>{this.props.note}</div>
|
||||
<div className={"bd-setting-divider"} />
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import {React} from "modules";
|
||||
|
||||
export default class Switch extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {checked: this.props.checked};
|
||||
this.onChange = this.onChange.bind(this);
|
||||
}
|
||||
|
||||
onChange() {
|
||||
if (this.props.disabled) return;
|
||||
this.props.onChange(!this.state.checked);
|
||||
this.setState({checked: !this.state.checked});
|
||||
}
|
||||
|
||||
render() {
|
||||
const enabledClass = this.props.disabled ? " bd-switch-disabled" : "";
|
||||
const checkedClass = this.state.checked ? " bd-switch-checked" : "";
|
||||
return <div className={`bd-switch` + enabledClass + checkedClass}>
|
||||
<input type="checkbox" id={this.props.id} className={`bd-checkbox`} disabled={this.props.disabled} checked={this.state.checked} onChange={this.onChange} />
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
import {React} from "modules";
|
||||
import Title from "./title";
|
||||
import Divider from "./divider";
|
||||
import Switch from "./switch";
|
||||
import Switch from "./components/switch";
|
||||
import Dropdown from "./components/dropdown";
|
||||
import Item from "./components/item";
|
||||
|
||||
const baseClassName = "bd-settings-group";
|
||||
|
||||
|
|
@ -25,13 +27,18 @@ export default class Group extends React.Component {
|
|||
};
|
||||
|
||||
this.onChange = this.onChange.bind(this);
|
||||
this.toggleCollapse = this.toggleCollapse.bind(this);
|
||||
}
|
||||
|
||||
toggleCollapse() {
|
||||
const container = this.container.current;
|
||||
const timeout = this.state.collapsed ? 300 : 1;
|
||||
container.style.setProperty("height", container.scrollHeight + "px");
|
||||
this.setState({collapsed: !this.state.collapsed}, () => setTimeout(() => container.style.setProperty("height", ""), timeout));
|
||||
container.classList.add("animating");
|
||||
this.setState({collapsed: !this.state.collapsed}, () => setTimeout(() => {
|
||||
container.style.setProperty("height", "");
|
||||
container.classList.remove("animating");
|
||||
}, timeout));
|
||||
}
|
||||
|
||||
onChange(id, value) {
|
||||
|
|
@ -43,15 +50,19 @@ export default class Group extends React.Component {
|
|||
|
||||
render() {
|
||||
const {settings} = this.props;
|
||||
const collapseClass = this.props.collapsible ? `collapsible ${this.state.collapsed && "collapsed"}` : "";
|
||||
const collapseClass = this.props.collapsible ? `collapsible ${this.state.collapsed ? "collapsed" : "expanded"}` : "";
|
||||
const groupClass = `${baseClassName} ${collapseClass}`;
|
||||
|
||||
return <div className={groupClass}>
|
||||
<Title text={this.props.name} collapsible={this.props.collapsible} onClick={() => this.toggleCollapse()} button={this.props.button} isGroup={true} />
|
||||
<Title text={this.props.name} collapsible={this.props.collapsible} onClick={this.toggleCollapse} button={this.props.button} isGroup={true} />
|
||||
<div className="bd-settings-container" ref={this.container}>
|
||||
{settings.filter(s => !s.hidden).map((setting) =>
|
||||
<Switch disabled={setting.disabled} id={setting.id} key={setting.id} name={setting.name} note={setting.note} checked={setting.value} onChange={this.onChange} />
|
||||
)}
|
||||
{settings.filter(s => !s.hidden).map((setting) => {
|
||||
let component = null;
|
||||
if (setting.type == "dropdown") component = <Dropdown disabled={setting.disabled} id={setting.id} options={setting.options} value={setting.value} onChange={this.onChange.bind(this, setting.id)} />;
|
||||
if (setting.type == "switch") component = <Switch disabled={setting.disabled} id={setting.id} checked={setting.value} onChange={this.onChange.bind(this, setting.id)} />;
|
||||
if (!component) return null;
|
||||
return <Item id={setting.id} key={setting.id} name={setting.name} note={setting.note}>{component}</Item>;
|
||||
})}
|
||||
</div>
|
||||
{this.props.showDivider && <Divider />}
|
||||
</div>;
|
||||
|
|
|
|||
|
|
@ -1,48 +0,0 @@
|
|||
import {React} from "modules";
|
||||
|
||||
const flexContainer = "flex-1xMQg5 flex-1O1GKY vertical-V37hAW flex-1O1GKY directionColumn-35P_nr justifyStart-2NDFzi alignStretch-DpGPf3 noWrap-3jynv6 switchItem-2hKKKK";
|
||||
const flexWrap = "flex-1xMQg5 flex-1O1GKY horizontal-1ae9ci horizontal-2EEEnY flex-1O1GKY directionRow-3v3tfG justifyStart-2NDFzi alignStart-H-X2h- noWrap-3jynv6";
|
||||
const flexChild = "flexChild-faoVW3";
|
||||
const title = "titleDefault-a8-ZSr title-31JmR4 da-titleDefault da-title";
|
||||
const switchWrapperDisabled = "flexChild-faoVW3 da-flexChild switchDisabled-3HsXAJ switch-3wwwcV da-switchDisabled da-switch valueUnchecked-2lU_20 value-2hFrkk sizeDefault-2YlOZr size-3rFEHg themeDefault-24hCdX";
|
||||
const switchWrapperDisabledChecked = "flexChild-faoVW3 da-flexChild switchDisabled-3HsXAJ switch-3wwwcV da-switchDisabled da-switch valueChecked-m-4IJZ value-2hFrkk sizeDefault-2YlOZr size-3rFEHg themeDefault-24hCdX";
|
||||
const switchWrapper = "flexChild-faoVW3 da-flexChild switchEnabled-V2WDBB switch-3wwwcV da-switchEnabled da-switch valueUnchecked-2lU_20 value-2hFrkk sizeDefault-2YlOZr size-3rFEHg themeDefault-24hCdX";
|
||||
const switchWrapperChecked = "flexChild-faoVW3 da-flexChild switchEnabled-V2WDBB switch-3wwwcV da-switchEnabled da-switch valueChecked-m-4IJZ value-2hFrkk sizeDefault-2YlOZr size-3rFEHg themeDefault-24hCdX";
|
||||
const switchClass = "checkboxEnabled-CtinEn checkbox-2tyjJg";
|
||||
const switchClassDisabled = "checkboxDisabled-1MA81A checkbox-2tyjJg";
|
||||
const description = "description-3_Ncsb formText-3fs7AJ note-1V3kyJ modeDefault-3a2Ph1 primary-jw0I4K";
|
||||
const divider = "divider-3573oO dividerDefault-3rvLe-";
|
||||
|
||||
export default class Switch extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
checked: this.props.checked
|
||||
};
|
||||
}
|
||||
|
||||
onChange() {
|
||||
if (this.props.disabled) return;
|
||||
this.props.onChange(this.props.id, !this.state.checked);
|
||||
this.setState({
|
||||
checked: !this.state.checked
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const wrapperClass = this.props.disabled ? (this.state.checked ? switchWrapperDisabledChecked : switchWrapperDisabled) : (this.state.checked ? switchWrapperChecked : switchWrapper);
|
||||
return <div className={flexContainer} style={{flex: "1 1 auto"}}>
|
||||
<div className={flexWrap} style={{flex: "1 1 auto"}}>
|
||||
<div className={flexChild} style={{flex: "1 1 auto"}}>
|
||||
<label htmlFor={this.props.id} className={title}>{this.props.name || this.props.data.text}</label>
|
||||
</div>
|
||||
<div className={wrapperClass} tabIndex="0" style={{flex: "0 0 auto"}}>
|
||||
<input id={this.props.id} className={this.props.disabled ? switchClassDisabled : switchClass} type="checkbox" tabIndex="-1" checked={this.state.checked} onChange={e => this.onChange(e)} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={description} style={{flex: "1 1 auto"}}>{this.props.note || this.props.data.info}</div>
|
||||
<div className={divider} />
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue