initial collapsible groups
This commit is contained in:
parent
6bed40f21f
commit
18d6da12eb
|
@ -32,7 +32,9 @@
|
|||
"no-var": "error",
|
||||
"prefer-const": "error",
|
||||
"react/jsx-uses-react": "error",
|
||||
"react/jsx-uses-vars": "error"
|
||||
"react/jsx-uses-vars": "error",
|
||||
"react/prop-types": 0,
|
||||
"react/jsx-no-target-blank": "error"
|
||||
},
|
||||
"globals": {
|
||||
"webpackJsonp": false,
|
||||
|
|
55
css/main.css
55
css/main.css
|
@ -24,7 +24,62 @@
|
|||
/* =============== */
|
||||
/* END V2 LOADER */
|
||||
|
||||
.bd-settings-group .bd-settings-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.bd-settings-group .bd-settings-title::after {
|
||||
content: "";
|
||||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSItOTUwIDUzMiAxOCAxOCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAtOTUwIDUzMiAxOCAxODsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6bm9uZTt9DQoJLnN0MXtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjEuNTtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQo8L3N0eWxlPg0KPHBhdGggY2xhc3M9InN0MCIgZD0iTS05MzIsNTMydjE4aC0xOHYtMThILTkzMnoiLz4NCjxwb2x5bGluZSBjbGFzcz0ic3QxIiBwb2ludHM9Ii05MzYuNiw1MzguOCAtOTQxLDU0My4yIC05NDUuNCw1MzguOCAiLz4NCjwvc3ZnPg0K);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
transition: transform .3s ease;
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
.bd-settings-group.bd-settings-group-collapsed .bd-settings-title::after {
|
||||
transition: transform .3s ease;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.bd-settings-container {
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
transition: height 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
|
||||
}
|
||||
|
||||
.bd-settings-group.bd-settings-group-collapsed .bd-settings-container {
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.bd-settings-group ~ .bd-settings-group .bd-settings-title {
|
||||
margin-top: 30px;
|
||||
transition: margin-top 300ms ease;
|
||||
}
|
||||
|
||||
.bd-settings-group.bd-settings-group-collapsed + .bd-settings-group .bd-settings-title {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.bd-settings-group .bd-settings-title {
|
||||
order: 1;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bd-settings-group .bd-settings-title::before {
|
||||
content: "";
|
||||
background-color: rgba(114,118,125,.3);
|
||||
height: 2px;
|
||||
order: 2;
|
||||
flex: 1;
|
||||
margin: 0 10px 0 15px;
|
||||
}
|
||||
|
||||
.bd-settings-group .bd-settings-title::after {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
File diff suppressed because one or more lines are too long
334
js/main.js
334
js/main.js
|
@ -957,6 +957,7 @@ const bdEmoteSettingIDs = {
|
|||
|
||||
async initialize() {
|
||||
super.initialize();
|
||||
return;
|
||||
await this.getBlacklist();
|
||||
await this.loadEmoteData(data__WEBPACK_IMPORTED_MODULE_1__["EmoteInfo"]);
|
||||
|
||||
|
@ -2753,13 +2754,11 @@ Core.prototype.initObserver = function () {
|
|||
const node = mutation.addedNodes[0];
|
||||
|
||||
if (node.classList.contains("layer-3QrUeG")) {
|
||||
if (node.getElementsByClassName("guild-settings-base-section").length) node.setAttribute("layer-id", "server-settings");
|
||||
|
||||
if (node.getElementsByClassName("socialLinks-3jqNFy").length) {
|
||||
node.setAttribute("layer-id", "user-settings");
|
||||
node.setAttribute("id", "user-settings");
|
||||
if (!document.getElementById("bd-settings-sidebar")) _settingspanel__WEBPACK_IMPORTED_MODULE_5__["default"].renderSidebar();
|
||||
}
|
||||
if (node.getElementsByClassName("guild-settings-base-section").length) node.setAttribute("layer-id", "server-settings"); // if (node.getElementsByClassName("socialLinks-3jqNFy").length) {
|
||||
// node.setAttribute("layer-id", "user-settings");
|
||||
// node.setAttribute("id", "user-settings");
|
||||
// if (!document.getElementById("bd-settings-sidebar")) SettingsPanel.renderSidebar();
|
||||
// }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
@ -3570,6 +3569,7 @@ __webpack_require__.r(__webpack_exports__);
|
|||
|
||||
|
||||
|
||||
|
||||
//WebpackModules.getModule(m => m.getSection && m.getProps && !m.getGuildId && !m.getChannel)
|
||||
//WebpackModules.getByProps("getGuildId", "getSection")
|
||||
|
||||
|
@ -3622,15 +3622,17 @@ __webpack_require__.r(__webpack_exports__);
|
|||
label: "BandagedBD"
|
||||
});
|
||||
data.returnValue.splice(25, 0, {
|
||||
section: "IJ1",
|
||||
label: "Injected Tab 1",
|
||||
section: "BBD Settings",
|
||||
label: "Settings",
|
||||
element: () => this.renderer.core2
|
||||
});
|
||||
data.returnValue.splice(26, 0, {
|
||||
section: "IJ2",
|
||||
label: "Injected Tab 2",
|
||||
section: "BBD Test",
|
||||
label: "Test Tab",
|
||||
onClick: function () {
|
||||
console.log("CLICK2");
|
||||
ui__WEBPACK_IMPORTED_MODULE_6__["Toasts"].success("This can just be a click listener!", {
|
||||
forceShow: true
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
@ -6648,6 +6650,29 @@ class V2C_ContentColumn extends modules__WEBPACK_IMPORTED_MODULE_0__["React"].Co
|
|||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/ui/settings/divider.jsx":
|
||||
/*!*************************************!*\
|
||||
!*** ./src/ui/settings/divider.jsx ***!
|
||||
\*************************************/
|
||||
/*! exports provided: default */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return Divider; });
|
||||
/* harmony import */ var modules__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! modules */ "./src/modules/modules.js");
|
||||
|
||||
class Divider extends modules__WEBPACK_IMPORTED_MODULE_0__["React"].Component {
|
||||
render() {
|
||||
return modules__WEBPACK_IMPORTED_MODULE_0__["React"].createElement("div", {
|
||||
className: "bd-divider divider-3573oO marginTop8-1DLZ1n marginBottom40-2vIwTv"
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/ui/settings/exitbutton.js":
|
||||
/*!***************************************!*\
|
||||
!*** ./src/ui/settings/exitbutton.js ***!
|
||||
|
@ -6695,6 +6720,100 @@ class V2C_Tools extends modules__WEBPACK_IMPORTED_MODULE_0__["React"].Component
|
|||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/ui/settings/group.jsx":
|
||||
/*!***********************************!*\
|
||||
!*** ./src/ui/settings/group.jsx ***!
|
||||
\***********************************/
|
||||
/*! exports provided: default */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return Group; });
|
||||
/* harmony import */ var data__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! data */ "./src/data/data.js");
|
||||
/* harmony import */ var modules__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! modules */ "./src/modules/modules.js");
|
||||
/* harmony import */ var _title__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./title */ "./src/ui/settings/title.js");
|
||||
/* harmony import */ var _vertical__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./vertical */ "./src/ui/settings/vertical.jsx");
|
||||
/* harmony import */ var _divider__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./divider */ "./src/ui/settings/divider.jsx");
|
||||
/* harmony import */ var _switch__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./switch */ "./src/ui/settings/switch.js");
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
class Group extends modules__WEBPACK_IMPORTED_MODULE_1__["React"].Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.container = modules__WEBPACK_IMPORTED_MODULE_1__["React"].createRef();
|
||||
this.state = {
|
||||
collapsed: this.props.collapsible && this.props.collapsed
|
||||
};
|
||||
} // render() {
|
||||
// const {title, settings, button} = this.props;
|
||||
// const buttonComponent = button ? React.createElement("button", {key: "title-button", className: "bd-pfbtn", onClick: button.onClick}, button.title) : null;
|
||||
// return [React.createElement(SettingsTitle, {text: title}),
|
||||
// buttonComponent,
|
||||
// settings.map(setting => {
|
||||
// return React.createElement(Switch, {id: setting.id, key: setting.id, data: setting, checked: SettingsCookie[setting.id], onChange: (id, checked) => {
|
||||
// this.props.onChange(id, checked);
|
||||
// }});
|
||||
// })];
|
||||
// }
|
||||
|
||||
|
||||
collapseGroup() {
|
||||
if (this.state.collapsed) return this.expandGroup();
|
||||
const container = modules__WEBPACK_IMPORTED_MODULE_1__["ReactDOM"].findDOMNode(this.container.current); // console.log(container.scrollHeight);
|
||||
|
||||
container.style.setProperty("height", container.scrollHeight + "px");
|
||||
this.setState({
|
||||
collapsed: true
|
||||
}, () => setImmediate(() => container.style.setProperty("height", ""))); //
|
||||
}
|
||||
|
||||
expandGroup() {
|
||||
const container = modules__WEBPACK_IMPORTED_MODULE_1__["ReactDOM"].findDOMNode(this.container.current); // console.log(container.scrollHeight);
|
||||
|
||||
container.style.setProperty("height", container.scrollHeight + "px");
|
||||
this.setState({
|
||||
collapsed: false
|
||||
}, () => setTimeout(() => container.style.setProperty("height", ""), 300)); //, () => container.style.setProperty("height", "")
|
||||
//, () => container.style.setProperty("height", "")
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
settings
|
||||
} = this.props;
|
||||
const groupClass = this.state.collapsed ? "bd-settings-group bd-settings-group-collapsed" : "bd-settings-group";
|
||||
return modules__WEBPACK_IMPORTED_MODULE_1__["React"].createElement("div", {
|
||||
className: groupClass
|
||||
}, modules__WEBPACK_IMPORTED_MODULE_1__["React"].createElement(_title__WEBPACK_IMPORTED_MODULE_2__["default"], {
|
||||
text: this.props.title,
|
||||
collapsible: this.props.collapsible,
|
||||
onClick: () => this.collapseGroup()
|
||||
}), modules__WEBPACK_IMPORTED_MODULE_1__["React"].createElement(_vertical__WEBPACK_IMPORTED_MODULE_3__["default"], {
|
||||
className: "bd-settings-container",
|
||||
ref: this.container
|
||||
}, settings.map(setting => {
|
||||
return modules__WEBPACK_IMPORTED_MODULE_1__["React"].createElement(_switch__WEBPACK_IMPORTED_MODULE_5__["default"], {
|
||||
id: setting.id,
|
||||
key: setting.id,
|
||||
name: setting.text,
|
||||
note: setting.info,
|
||||
checked: data__WEBPACK_IMPORTED_MODULE_0__["SettingsCookie"][setting.id],
|
||||
onChange: (id, checked) => {
|
||||
this.props.onChange(id, checked);
|
||||
}
|
||||
});
|
||||
})), this.props.showDivider && modules__WEBPACK_IMPORTED_MODULE_1__["React"].createElement(_divider__WEBPACK_IMPORTED_MODULE_4__["default"], null));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/ui/settings/panel.js":
|
||||
/*!**********************************!*\
|
||||
!*** ./src/ui/settings/panel.js ***!
|
||||
|
@ -6963,7 +7082,7 @@ class V2C_PluginCard extends modules__WEBPACK_IMPORTED_MODULE_1__["React"].Compo
|
|||
__webpack_require__.r(__webpack_exports__);
|
||||
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return V2C_SectionedSettingsPanel; });
|
||||
/* harmony import */ var modules__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! modules */ "./src/modules/modules.js");
|
||||
/* harmony import */ var _settingsgroup__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./settingsgroup */ "./src/ui/settings/settingsgroup.js");
|
||||
/* harmony import */ var _group__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./group */ "./src/ui/settings/group.jsx");
|
||||
|
||||
|
||||
class V2C_SectionedSettingsPanel extends modules__WEBPACK_IMPORTED_MODULE_0__["React"].Component {
|
||||
|
@ -6975,7 +7094,7 @@ class V2C_SectionedSettingsPanel extends modules__WEBPACK_IMPORTED_MODULE_0__["R
|
|||
return modules__WEBPACK_IMPORTED_MODULE_0__["React"].createElement("div", {
|
||||
className: "contentColumn-2hrIYH contentColumnDefault-1VQkGM content-column default"
|
||||
}, this.props.sections.map(section => {
|
||||
return modules__WEBPACK_IMPORTED_MODULE_0__["React"].createElement(_settingsgroup__WEBPACK_IMPORTED_MODULE_1__["default"], Object.assign({}, section, {
|
||||
return modules__WEBPACK_IMPORTED_MODULE_0__["React"].createElement(_group__WEBPACK_IMPORTED_MODULE_1__["default"], Object.assign({}, section, {
|
||||
onChange: this.props.onChange
|
||||
}));
|
||||
}));
|
||||
|
@ -7009,6 +7128,8 @@ __webpack_require__.r(__webpack_exports__);
|
|||
/* harmony import */ var _icons_reload__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../icons/reload */ "./src/ui/icons/reload.js");
|
||||
/* harmony import */ var _customcss_editor__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../customcss/editor */ "./src/ui/customcss/editor.js");
|
||||
/* harmony import */ var _settings_settingsgroup__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../settings/settingsgroup */ "./src/ui/settings/settingsgroup.js");
|
||||
/* harmony import */ var _settings_group__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../settings/group */ "./src/ui/settings/group.jsx");
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -7063,6 +7184,7 @@ class V2_SettingsPanel {
|
|||
settings: settings.filter(s => s.category == c)
|
||||
};
|
||||
});
|
||||
console.log(sections);
|
||||
return sections;
|
||||
}
|
||||
|
||||
|
@ -7123,7 +7245,7 @@ class V2_SettingsPanel {
|
|||
|
||||
get core2() {
|
||||
return this.coreSettings.map(section => {
|
||||
return modules__WEBPACK_IMPORTED_MODULE_1__["React"].createElement(_settings_settingsgroup__WEBPACK_IMPORTED_MODULE_13__["default"], Object.assign({}, section, {
|
||||
return modules__WEBPACK_IMPORTED_MODULE_1__["React"].createElement(_settings_group__WEBPACK_IMPORTED_MODULE_14__["default"], Object.assign({}, section, {
|
||||
onChange: this.onChange
|
||||
}));
|
||||
});
|
||||
|
@ -7625,64 +7747,27 @@ class V2C_SideBar extends modules__WEBPACK_IMPORTED_MODULE_0__["React"].Componen
|
|||
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return V2C_Switch; });
|
||||
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return Switch; });
|
||||
/* harmony import */ var modules__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! modules */ "./src/modules/modules.js");
|
||||
|
||||
const flexContainer = "flex-1xMQg5 flex-1O1GKY da-flex da-flex vertical-V37hAW flex-1O1GKY directionColumn-35P_nr justifyStart-2NDFzi alignStretch-DpGPf3 noWrap-3jynv6 switchItem-2hKKKK";
|
||||
const flexWrap = "flex-1xMQg5 flex-1O1GKY da-flex da-flex horizontal-1ae9ci horizontal-2EEEnY flex-1O1GKY directionRow-3v3tfG justifyStart-2NDFzi alignStart-H-X2h- noWrap-3jynv6";
|
||||
const flexChild = "flexChild-faoVW3 da-flexChild";
|
||||
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 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 switchWrapperEnabled = "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 da-checkboxEnabled da-checkbox";
|
||||
const description = "description-3_Ncsb formText-3fs7AJ da-description da-formText note-1V3kyJ da-note modeDefault-3a2Ph1 da-modeDefault primary-jw0I4K";
|
||||
class V2C_Switch extends modules__WEBPACK_IMPORTED_MODULE_0__["React"].Component {
|
||||
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 description = "description-3_Ncsb formText-3fs7AJ note-1V3kyJ modeDefault-3a2Ph1 primary-jw0I4K";
|
||||
const divider = "divider-3573oO dividerDefault-3rvLe-";
|
||||
class Switch extends modules__WEBPACK_IMPORTED_MODULE_0__["React"].Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.setInitialState();
|
||||
this.onChange = this.onChange.bind(this);
|
||||
}
|
||||
|
||||
setInitialState() {
|
||||
console.log(props);
|
||||
this.state = {
|
||||
checked: this.props.checked
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
text,
|
||||
info
|
||||
} = this.props.data;
|
||||
const {
|
||||
checked
|
||||
} = this.state;
|
||||
return modules__WEBPACK_IMPORTED_MODULE_0__["React"].createElement("div", {
|
||||
className: `ui-flex flex-vertical flex-justify-start flex-align-stretch flex-nowrap ui-switch-item ${flexContainer}`
|
||||
}, modules__WEBPACK_IMPORTED_MODULE_0__["React"].createElement("div", {
|
||||
className: `ui-flex flex-horizontal flex-justify-start flex-align-stretch flex-nowrap ${flexWrap}`
|
||||
}, modules__WEBPACK_IMPORTED_MODULE_0__["React"].createElement("h3", {
|
||||
className: `ui-form-title h3 margin-reset margin-reset ui-flex-child ${title} ${flexChild}`
|
||||
}, text), modules__WEBPACK_IMPORTED_MODULE_0__["React"].createElement("div", {
|
||||
className: `ui-switch-wrapper ui-flex-child ${checked ? switchWrapperEnabled : switchWrapper}`,
|
||||
style: {
|
||||
flex: "0 0 auto"
|
||||
}
|
||||
}, modules__WEBPACK_IMPORTED_MODULE_0__["React"].createElement("input", {
|
||||
className: `ui-switch-checkbox ${switchClass}`,
|
||||
type: "checkbox",
|
||||
checked: checked,
|
||||
onChange: e => this.onChange(e)
|
||||
}), modules__WEBPACK_IMPORTED_MODULE_0__["React"].createElement("div", {
|
||||
className: `ui-switch ${checked ? "checked" : ""}`
|
||||
}))), modules__WEBPACK_IMPORTED_MODULE_0__["React"].createElement("div", {
|
||||
className: `ui-form-text style-description margin-top-4 ${description}`,
|
||||
style: {
|
||||
flex: "1 1 auto"
|
||||
}
|
||||
}, info));
|
||||
}
|
||||
|
||||
onChange() {
|
||||
this.props.onChange(this.props.id, !this.state.checked);
|
||||
this.setState({
|
||||
|
@ -7690,7 +7775,94 @@ class V2C_Switch extends modules__WEBPACK_IMPORTED_MODULE_0__["React"].Component
|
|||
});
|
||||
}
|
||||
|
||||
}
|
||||
render() {
|
||||
return modules__WEBPACK_IMPORTED_MODULE_0__["React"].createElement("div", {
|
||||
className: flexContainer,
|
||||
style: {
|
||||
flex: "1 1 auto"
|
||||
}
|
||||
}, modules__WEBPACK_IMPORTED_MODULE_0__["React"].createElement("div", {
|
||||
className: flexWrap,
|
||||
style: {
|
||||
flex: "1 1 auto"
|
||||
}
|
||||
}, modules__WEBPACK_IMPORTED_MODULE_0__["React"].createElement("div", {
|
||||
className: flexChild,
|
||||
style: {
|
||||
flex: "1 1 auto"
|
||||
}
|
||||
}, modules__WEBPACK_IMPORTED_MODULE_0__["React"].createElement("label", {
|
||||
htmlFor: this.props.id,
|
||||
className: title
|
||||
}, this.props.name || this.props.data.text)), modules__WEBPACK_IMPORTED_MODULE_0__["React"].createElement("div", {
|
||||
className: this.state.checked ? switchWrapperChecked : switchWrapper,
|
||||
tabIndex: "0",
|
||||
style: {
|
||||
flex: "0 0 auto"
|
||||
}
|
||||
}, modules__WEBPACK_IMPORTED_MODULE_0__["React"].createElement("input", {
|
||||
id: this.props.id,
|
||||
className: switchClass,
|
||||
type: "checkbox",
|
||||
tabIndex: "-1",
|
||||
checked: this.state.checked,
|
||||
onChange: e => this.onChange(e)
|
||||
}))), modules__WEBPACK_IMPORTED_MODULE_0__["React"].createElement("div", {
|
||||
className: description,
|
||||
style: {
|
||||
flex: "1 1 auto"
|
||||
}
|
||||
}, this.props.note || this.props.data.info), modules__WEBPACK_IMPORTED_MODULE_0__["React"].createElement("div", {
|
||||
className: divider
|
||||
}));
|
||||
}
|
||||
|
||||
} // export default class V2C_Switch extends React.Component {
|
||||
// constructor(props) {
|
||||
// super(props);
|
||||
// this.setInitialState();
|
||||
// this.onChange = this.onChange.bind(this);
|
||||
// }
|
||||
// setInitialState() {
|
||||
// this.state = {
|
||||
// checked: this.props.checked
|
||||
// };
|
||||
// }
|
||||
// render() {
|
||||
// const {text, info} = this.props.data;
|
||||
// const {checked} = this.state;
|
||||
// return React.createElement(
|
||||
// "div",
|
||||
// {className: `ui-flex flex-vertical flex-justify-start flex-align-stretch flex-nowrap ui-switch-item ${flexContainer}`},
|
||||
// React.createElement(
|
||||
// "div",
|
||||
// {className: `ui-flex flex-horizontal flex-justify-start flex-align-stretch flex-nowrap ${flexWrap}`},
|
||||
// React.createElement(
|
||||
// "h3",
|
||||
// {className: `ui-form-title h3 margin-reset margin-reset ui-flex-child ${title} ${flexChild}`},
|
||||
// text
|
||||
// ),
|
||||
// React.createElement(
|
||||
// "div",
|
||||
// {className: `ui-switch-wrapper ui-flex-child ${checked ? switchWrapperChecked : switchWrapper}`, style: {flex: "0 0 auto"}},
|
||||
// React.createElement("input", {className: `ui-switch-checkbox ${switchClass}`, type: "checkbox", checked: checked, onChange: e => this.onChange(e)}),
|
||||
// React.createElement("div", {className: `ui-switch ${checked ? "checked" : ""}`})
|
||||
// )
|
||||
// ),
|
||||
// React.createElement(
|
||||
// "div",
|
||||
// {className: `ui-form-text style-description margin-top-4 ${description}`, style: {flex: "1 1 auto"}},
|
||||
// info
|
||||
// )
|
||||
// );
|
||||
// }
|
||||
// onChange() {
|
||||
// this.props.onChange(this.props.id, !this.state.checked);
|
||||
// this.setState({
|
||||
// checked: !this.state.checked
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
|
||||
/***/ }),
|
||||
|
||||
|
@ -7917,18 +8089,23 @@ class V2C_ThemeCard extends modules__WEBPACK_IMPORTED_MODULE_1__["React"].Compon
|
|||
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return V2C_SettingsTitle; });
|
||||
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return SettingsTitle; });
|
||||
/* harmony import */ var modules__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! modules */ "./src/modules/modules.js");
|
||||
|
||||
class V2C_SettingsTitle extends modules__WEBPACK_IMPORTED_MODULE_0__["React"].Component {
|
||||
const className = "bd-settings-title h2-2gWE-o title-3sZWYQ size16-14cGz5 height20-mO2eIN weightSemiBold-NJexzi defaultColor-1_ajX0 defaultMarginh2-2LTaUL marginBottom20-32qID7";
|
||||
class SettingsTitle extends modules__WEBPACK_IMPORTED_MODULE_0__["React"].Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
} //h2-2gWE-o title-3sZWYQ size16-14cGz5 height20-mO2eIN weightSemiBold-NJexzi da-h2 da-title da-size16 da-height20 da-weightSemiBold defaultColor-1_ajX0 da-defaultColor marginTop60-3PGbtK da-marginTop60 marginBottom20-32qID7 da-marginBottom20
|
||||
|
||||
|
||||
render() {
|
||||
const titleClass = this.props.className ? `${className} ${this.props.className}` : className;
|
||||
return modules__WEBPACK_IMPORTED_MODULE_0__["React"].createElement("h2", {
|
||||
className: "ui-form-title h2 margin-reset margin-bottom-20 marginTop60-3PGbtK h2-2gWE-o title-3sZWYQ size16-14cGz5 height20-mO2eIN weightSemiBold-NJexzi defaultColor-1_ajX0 defaultMarginh2-2LTaUL marginBottom20-32qID7"
|
||||
className: titleClass,
|
||||
onClick: () => {
|
||||
this.props.onClick && this.props.onClick();
|
||||
}
|
||||
}, this.props.text);
|
||||
}
|
||||
|
||||
|
@ -7936,6 +8113,31 @@ class V2C_SettingsTitle extends modules__WEBPACK_IMPORTED_MODULE_0__["React"].Co
|
|||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/ui/settings/vertical.jsx":
|
||||
/*!**************************************!*\
|
||||
!*** ./src/ui/settings/vertical.jsx ***!
|
||||
\**************************************/
|
||||
/*! exports provided: default */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return VerticalContainer; });
|
||||
/* harmony import */ var modules__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! modules */ "./src/modules/modules.js");
|
||||
|
||||
const className = "bd-vertical-container";
|
||||
class VerticalContainer extends modules__WEBPACK_IMPORTED_MODULE_0__["React"].Component {
|
||||
render() {
|
||||
const containerClass = this.props.className ? `${className} ${this.props.className}` : className;
|
||||
return modules__WEBPACK_IMPORTED_MODULE_0__["React"].createElement("div", {
|
||||
className: containerClass
|
||||
}, this.props.children);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/ui/sidebarview.js":
|
||||
/*!*******************************!*\
|
||||
!*** ./src/ui/sidebarview.js ***!
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -3048,7 +3048,8 @@
|
|||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
|
@ -3069,12 +3070,14 @@
|
|||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
|
@ -3089,17 +3092,20 @@
|
|||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
|
@ -3216,7 +3222,8 @@
|
|||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
|
@ -3228,6 +3235,7 @@
|
|||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
|
@ -3242,6 +3250,7 @@
|
|||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
|
@ -3249,12 +3258,14 @@
|
|||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
|
@ -3273,6 +3284,7 @@
|
|||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
|
@ -3353,7 +3365,8 @@
|
|||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
|
@ -3365,6 +3378,7 @@
|
|||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
|
@ -3450,7 +3464,8 @@
|
|||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
|
@ -3486,6 +3501,7 @@
|
|||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
|
@ -3505,6 +3521,7 @@
|
|||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
|
@ -3548,12 +3565,14 @@
|
|||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.3",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
@ -23,6 +23,7 @@ export default new class EmoteModule extends Builtin {
|
|||
|
||||
async initialize() {
|
||||
super.initialize();
|
||||
return;
|
||||
await this.getBlacklist();
|
||||
await this.loadEmoteData(EmoteInfo);
|
||||
|
||||
|
|
|
@ -104,11 +104,11 @@ Core.prototype.initObserver = function () {
|
|||
if (node.classList.contains("layer-3QrUeG")) {
|
||||
if (node.getElementsByClassName("guild-settings-base-section").length) node.setAttribute("layer-id", "server-settings");
|
||||
|
||||
if (node.getElementsByClassName("socialLinks-3jqNFy").length) {
|
||||
node.setAttribute("layer-id", "user-settings");
|
||||
node.setAttribute("id", "user-settings");
|
||||
if (!document.getElementById("bd-settings-sidebar")) SettingsPanel.renderSidebar();
|
||||
}
|
||||
// if (node.getElementsByClassName("socialLinks-3jqNFy").length) {
|
||||
// node.setAttribute("layer-id", "user-settings");
|
||||
// node.setAttribute("id", "user-settings");
|
||||
// if (!document.getElementById("bd-settings-sidebar")) SettingsPanel.renderSidebar();
|
||||
// }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -8,6 +8,7 @@ import WebpackModules from "./webpackmodules";
|
|||
|
||||
import {SettingsPanel as SettingsRenderer} from "ui";
|
||||
import Utilities from "./utilities";
|
||||
import {Toasts} from "ui";
|
||||
|
||||
//WebpackModules.getModule(m => m.getSection && m.getProps && !m.getGuildId && !m.getChannel)
|
||||
//WebpackModules.getByProps("getGuildId", "getSection")
|
||||
|
@ -52,8 +53,8 @@ export default new class SettingsPanel {
|
|||
console.log(data);
|
||||
data.returnValue.splice(23, 0, {section: "DIVIDER"});
|
||||
data.returnValue.splice(24, 0, {section: "HEADER", label: "BandagedBD"});
|
||||
data.returnValue.splice(25, 0, {section: "IJ1", label: "Injected Tab 1", element: () => this.renderer.core2});
|
||||
data.returnValue.splice(26, 0, {section: "IJ2", label: "Injected Tab 2", onClick: function() {console.log("CLICK2");}});
|
||||
data.returnValue.splice(25, 0, {section: "BBD Settings", label: "Settings", element: () => this.renderer.core2});
|
||||
data.returnValue.splice(26, 0, {section: "BBD Test", label: "Test Tab", onClick: function() {Toasts.success("This can just be a click listener!", {forceShow: true});}});
|
||||
}});
|
||||
const viewClass = WebpackModules.getByProps("standardSidebarView").standardSidebarView.split(" ")[0];
|
||||
const node = document.querySelector(`.${viewClass}`);
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
import {React} from "modules";
|
||||
|
||||
export default class Divider extends React.Component {
|
||||
render() {
|
||||
return <div className="bd-divider divider-3573oO marginTop8-1DLZ1n marginBottom40-2vIwTv" />;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,60 @@
|
|||
import {SettingsCookie} from "data";
|
||||
import {React, ReactDOM} from "modules";
|
||||
import Title from "./title";
|
||||
import Vertical from "./vertical";
|
||||
import Divider from "./divider";
|
||||
import Switch from "./switch";
|
||||
|
||||
export default class Group extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.container = React.createRef();
|
||||
this.state = {
|
||||
collapsed: this.props.collapsible && this.props.collapsed
|
||||
};
|
||||
}
|
||||
|
||||
// render() {
|
||||
// const {title, settings, button} = this.props;
|
||||
// const buttonComponent = button ? React.createElement("button", {key: "title-button", className: "bd-pfbtn", onClick: button.onClick}, button.title) : null;
|
||||
// return [React.createElement(SettingsTitle, {text: title}),
|
||||
// buttonComponent,
|
||||
// settings.map(setting => {
|
||||
// return React.createElement(Switch, {id: setting.id, key: setting.id, data: setting, checked: SettingsCookie[setting.id], onChange: (id, checked) => {
|
||||
// this.props.onChange(id, checked);
|
||||
// }});
|
||||
// })];
|
||||
// }
|
||||
|
||||
collapseGroup() {
|
||||
if (this.state.collapsed) return this.expandGroup();
|
||||
const container = ReactDOM.findDOMNode(this.container.current);
|
||||
// console.log(container.scrollHeight);
|
||||
container.style.setProperty("height", container.scrollHeight + "px");
|
||||
this.setState({collapsed: true}, () => setImmediate(() => container.style.setProperty("height", "")));//
|
||||
}
|
||||
|
||||
expandGroup() {
|
||||
const container = ReactDOM.findDOMNode(this.container.current);
|
||||
// console.log(container.scrollHeight);
|
||||
container.style.setProperty("height", container.scrollHeight + "px");
|
||||
this.setState({collapsed: false}, () => setTimeout(() => container.style.setProperty("height", ""), 300));//, () => container.style.setProperty("height", "")
|
||||
//, () => container.style.setProperty("height", "")
|
||||
}
|
||||
|
||||
render() {
|
||||
const {settings} = this.props;
|
||||
const groupClass = this.state.collapsed ? "bd-settings-group bd-settings-group-collapsed" : "bd-settings-group";
|
||||
return <div className={groupClass}>
|
||||
<Title text={this.props.title} collapsible={this.props.collapsible} onClick={() => this.collapseGroup()} />
|
||||
<Vertical className="bd-settings-container" ref={this.container}>
|
||||
{settings.map((setting) => {
|
||||
return <Switch id={setting.id} key={setting.id} name={setting.text} note={setting.info} checked={SettingsCookie[setting.id]} onChange={(id, checked) => {
|
||||
this.props.onChange(id, checked);
|
||||
}} />;
|
||||
})}
|
||||
</Vertical>
|
||||
{this.props.showDivider && <Divider />}
|
||||
</div>;
|
||||
}
|
||||
}
|
|
@ -1,5 +1,5 @@
|
|||
import {React} from "modules";
|
||||
import SettingsGroup from "./settingsgroup";
|
||||
import SettingsGroup from "./group";
|
||||
|
||||
export default class V2C_SectionedSettingsPanel extends React.Component {
|
||||
|
||||
|
|
|
@ -13,6 +13,7 @@ import ReloadIcon from "../icons/reload";
|
|||
|
||||
import CssEditor from "../customcss/editor";
|
||||
import SettingsGroup from "../settings/settingsgroup";
|
||||
import SettingsGroup2 from "../settings/group";
|
||||
|
||||
export default class V2_SettingsPanel {
|
||||
|
||||
|
@ -49,6 +50,7 @@ export default class V2_SettingsPanel {
|
|||
const settings = this.getSettings("core");
|
||||
const categories = [...new Set(settings.map(s => s.category))];
|
||||
const sections = categories.map(c => {return {title: c, settings: settings.filter(s => s.category == c)};});
|
||||
console.log(sections);
|
||||
return sections;
|
||||
}
|
||||
|
||||
|
@ -101,7 +103,7 @@ export default class V2_SettingsPanel {
|
|||
|
||||
get core2() {
|
||||
return this.coreSettings.map(section => {
|
||||
return React.createElement(SettingsGroup, Object.assign({}, section, {onChange: this.onChange}));
|
||||
return React.createElement(SettingsGroup2, Object.assign({}, section, {onChange: this.onChange}));
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -1,61 +1,94 @@
|
|||
import {React} from "modules";
|
||||
|
||||
const flexContainer = "flex-1xMQg5 flex-1O1GKY da-flex da-flex vertical-V37hAW flex-1O1GKY directionColumn-35P_nr justifyStart-2NDFzi alignStretch-DpGPf3 noWrap-3jynv6 switchItem-2hKKKK";
|
||||
const flexWrap = "flex-1xMQg5 flex-1O1GKY da-flex da-flex horizontal-1ae9ci horizontal-2EEEnY flex-1O1GKY directionRow-3v3tfG justifyStart-2NDFzi alignStart-H-X2h- noWrap-3jynv6";
|
||||
const flexChild = "flexChild-faoVW3 da-flexChild";
|
||||
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 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 switchWrapperEnabled = "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 da-checkboxEnabled da-checkbox";
|
||||
const description = "description-3_Ncsb formText-3fs7AJ da-description da-formText note-1V3kyJ da-note modeDefault-3a2Ph1 da-modeDefault primary-jw0I4K";
|
||||
|
||||
export default class V2C_Switch extends React.Component {
|
||||
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 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.setInitialState();
|
||||
this.onChange = this.onChange.bind(this);
|
||||
}
|
||||
|
||||
setInitialState() {
|
||||
console.log(props);
|
||||
this.state = {
|
||||
checked: this.props.checked
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const {text, info} = this.props.data;
|
||||
const {checked} = this.state;
|
||||
return React.createElement(
|
||||
"div",
|
||||
{className: `ui-flex flex-vertical flex-justify-start flex-align-stretch flex-nowrap ui-switch-item ${flexContainer}`},
|
||||
React.createElement(
|
||||
"div",
|
||||
{className: `ui-flex flex-horizontal flex-justify-start flex-align-stretch flex-nowrap ${flexWrap}`},
|
||||
React.createElement(
|
||||
"h3",
|
||||
{className: `ui-form-title h3 margin-reset margin-reset ui-flex-child ${title} ${flexChild}`},
|
||||
text
|
||||
),
|
||||
React.createElement(
|
||||
"div",
|
||||
{className: `ui-switch-wrapper ui-flex-child ${checked ? switchWrapperEnabled : switchWrapper}`, style: {flex: "0 0 auto"}},
|
||||
React.createElement("input", {className: `ui-switch-checkbox ${switchClass}`, type: "checkbox", checked: checked, onChange: e => this.onChange(e)}),
|
||||
React.createElement("div", {className: `ui-switch ${checked ? "checked" : ""}`})
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"div",
|
||||
{className: `ui-form-text style-description margin-top-4 ${description}`, style: {flex: "1 1 auto"}},
|
||||
info
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
onChange() {
|
||||
this.props.onChange(this.props.id, !this.state.checked);
|
||||
this.setState({
|
||||
checked: !this.state.checked
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
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={this.state.checked ? switchWrapperChecked : switchWrapper} tabIndex="0" style={{flex: "0 0 auto"}}>
|
||||
<input id={this.props.id} className={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>;
|
||||
}
|
||||
}
|
||||
|
||||
// export default class V2C_Switch extends React.Component {
|
||||
|
||||
// constructor(props) {
|
||||
// super(props);
|
||||
// this.setInitialState();
|
||||
// this.onChange = this.onChange.bind(this);
|
||||
// }
|
||||
|
||||
// setInitialState() {
|
||||
// this.state = {
|
||||
// checked: this.props.checked
|
||||
// };
|
||||
// }
|
||||
|
||||
// render() {
|
||||
// const {text, info} = this.props.data;
|
||||
// const {checked} = this.state;
|
||||
// return React.createElement(
|
||||
// "div",
|
||||
// {className: `ui-flex flex-vertical flex-justify-start flex-align-stretch flex-nowrap ui-switch-item ${flexContainer}`},
|
||||
// React.createElement(
|
||||
// "div",
|
||||
// {className: `ui-flex flex-horizontal flex-justify-start flex-align-stretch flex-nowrap ${flexWrap}`},
|
||||
// React.createElement(
|
||||
// "h3",
|
||||
// {className: `ui-form-title h3 margin-reset margin-reset ui-flex-child ${title} ${flexChild}`},
|
||||
// text
|
||||
// ),
|
||||
// React.createElement(
|
||||
// "div",
|
||||
// {className: `ui-switch-wrapper ui-flex-child ${checked ? switchWrapperChecked : switchWrapper}`, style: {flex: "0 0 auto"}},
|
||||
// React.createElement("input", {className: `ui-switch-checkbox ${switchClass}`, type: "checkbox", checked: checked, onChange: e => this.onChange(e)}),
|
||||
// React.createElement("div", {className: `ui-switch ${checked ? "checked" : ""}`})
|
||||
// )
|
||||
// ),
|
||||
// React.createElement(
|
||||
// "div",
|
||||
// {className: `ui-form-text style-description margin-top-4 ${description}`, style: {flex: "1 1 auto"}},
|
||||
// info
|
||||
// )
|
||||
// );
|
||||
// }
|
||||
|
||||
// onChange() {
|
||||
// this.props.onChange(this.props.id, !this.state.checked);
|
||||
// this.setState({
|
||||
// checked: !this.state.checked
|
||||
// });
|
||||
// }
|
||||
// }
|
|
@ -0,0 +1,17 @@
|
|||
|
||||
<h2 class="h2-2gWE-o title-3sZWYQ size16-14cGz5 height20-mO2eIN weightSemiBold-NJexzi da-h2 da-title da-size16 da-height20 da-weightSemiBold defaultColor-1_ajX0 da-defaultColor defaultMarginh2-2LTaUL marginBottom20-32qID7 da-defaultMarginh2 da-marginBottom20">Text & Images</h2>
|
||||
<div class="vertical-V37hAW flex-1O1GKY directionColumn-35P_nr da-vertical da-flex da-directionColumn">
|
||||
<h5 class="h5-18_1nd title-3sZWYQ size12-3R0845 height16-2Lv3qA weightSemiBold-NJexzi da-h5 da-title da-size12 da-height16 da-weightSemiBold marginBottom8-AtZOdT da-marginBottom8">Display images, videos, and lolcats</h5>
|
||||
<div class="flex-1xMQg5 flex-1O1GKY da-flex da-flex vertical-V37hAW flex-1O1GKY directionColumn-35P_nr justifyStart-2NDFzi alignStretch-DpGPf3 noWrap-3jynv6 marginTop8-1DLZ1n da-marginTop8 marginBottom20-32qID7 da-marginBottom20" style="flex: 1 1 auto;">
|
||||
<div class="flex-1xMQg5 flex-1O1GKY da-flex da-flex horizontal-1ae9ci horizontal-2EEEnY flex-1O1GKY directionRow-3v3tfG justifyStart-2NDFzi alignStart-H-X2h- noWrap-3jynv6" style="flex: 1 1 auto;">
|
||||
<div class="flexChild-faoVW3 da-flexChild" style="flex: 1 1 auto;">
|
||||
<label for="100" class="titleDefault-a8-ZSr title-31JmR4 da-titleDefault da-title">When posted as links to chat.</label>
|
||||
</div>
|
||||
<div class="flexChild-faoVW3 da-flexChild switchEnabled-V2WDBB switch-3wwwcV da-switchEnabled da-switch valueChecked-m-4IJZ value-2hFrkk sizeDefault-2YlOZr size-3rFEHg themeDefault-24hCdX" tabindex="0" style="flex: 0 0 auto;">
|
||||
<input id="100" class="checkboxEnabled-CtinEn checkbox-2tyjJg da-checkboxEnabled da-checkbox" type="checkbox" tabindex="-1" checked="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider-3573oO da-divider dividerDefault-3rvLe- da-dividerDefault"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider-3573oO da-divider marginTop8-1DLZ1n da-marginTop8 marginBottom40-2vIwTv da-marginBottom40"></div>
|
|
@ -1,14 +1,17 @@
|
|||
import {React} from "modules";
|
||||
|
||||
export default class V2C_SettingsTitle extends React.Component {
|
||||
const className = "bd-settings-title h2-2gWE-o title-3sZWYQ size16-14cGz5 height20-mO2eIN weightSemiBold-NJexzi defaultColor-1_ajX0 defaultMarginh2-2LTaUL marginBottom20-32qID7";
|
||||
|
||||
export default class SettingsTitle extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
//h2-2gWE-o title-3sZWYQ size16-14cGz5 height20-mO2eIN weightSemiBold-NJexzi da-h2 da-title da-size16 da-height20 da-weightSemiBold defaultColor-1_ajX0 da-defaultColor marginTop60-3PGbtK da-marginTop60 marginBottom20-32qID7 da-marginBottom20
|
||||
render() {
|
||||
const titleClass = this.props.className ? `${className} ${this.props.className}` : className;
|
||||
return React.createElement(
|
||||
"h2",
|
||||
{className: "ui-form-title h2 margin-reset margin-bottom-20 marginTop60-3PGbtK h2-2gWE-o title-3sZWYQ size16-14cGz5 height20-mO2eIN weightSemiBold-NJexzi defaultColor-1_ajX0 defaultMarginh2-2LTaUL marginBottom20-32qID7"},
|
||||
{className: titleClass, onClick: () => {this.props.onClick && this.props.onClick();}},
|
||||
this.props.text
|
||||
);
|
||||
}
|
||||
|
|
|
@ -0,0 +1,11 @@
|
|||
import {React} from "modules";
|
||||
|
||||
const className = "bd-vertical-container";
|
||||
|
||||
export default class VerticalContainer extends React.Component {
|
||||
|
||||
render() {
|
||||
const containerClass = this.props.className ? `${className} ${this.props.className}` : className;
|
||||
return <div className={containerClass}>{this.props.children}</div>;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue