mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2024-11-22 19:56:39 +00:00
[frontend] Custom Emoji Deletion (#994)
* re-add eslint * fix oauth url getting too long * actually attach single emoji get and delete routes * basic emoji details + deletion using rtk query * refactor emoji upload to rtk query * clean up old redux api+reducers for custom emoji * fix validation order * refactor custom emoji form fields * remove unused requires * cleanup, fix most eslint errors * more small eslint fixes * fix max emoji size * tiny bit of function documentation
This commit is contained in:
parent
be011b1641
commit
eb25739c34
|
@ -79,6 +79,8 @@ func New(processor processing.Processor) api.ClientModule {
|
||||||
func (m *Module) Route(r router.Router) error {
|
func (m *Module) Route(r router.Router) error {
|
||||||
r.AttachHandler(http.MethodPost, EmojiPath, m.EmojiCreatePOSTHandler)
|
r.AttachHandler(http.MethodPost, EmojiPath, m.EmojiCreatePOSTHandler)
|
||||||
r.AttachHandler(http.MethodGet, EmojiPath, m.EmojisGETHandler)
|
r.AttachHandler(http.MethodGet, EmojiPath, m.EmojisGETHandler)
|
||||||
|
r.AttachHandler(http.MethodDelete, EmojiPathWithID, m.EmojiDELETEHandler)
|
||||||
|
r.AttachHandler(http.MethodGet, EmojiPathWithID, m.EmojiGETHandler)
|
||||||
r.AttachHandler(http.MethodPost, DomainBlocksPath, m.DomainBlocksPOSTHandler)
|
r.AttachHandler(http.MethodPost, DomainBlocksPath, m.DomainBlocksPOSTHandler)
|
||||||
r.AttachHandler(http.MethodGet, DomainBlocksPath, m.DomainBlocksGETHandler)
|
r.AttachHandler(http.MethodGet, DomainBlocksPath, m.DomainBlocksGETHandler)
|
||||||
r.AttachHandler(http.MethodGet, DomainBlocksPathWithID, m.DomainBlockGETHandler)
|
r.AttachHandler(http.MethodGet, DomainBlocksPathWithID, m.DomainBlockGETHandler)
|
||||||
|
|
|
@ -1,8 +1,5 @@
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
"extends": ["@f0x52/eslint-config-react"],
|
"extends": ["@joepie91/eslint-config/react"]
|
||||||
"rules": {
|
|
||||||
"react/prop-types": "off"
|
|
||||||
}
|
|
||||||
};
|
};
|
|
@ -261,12 +261,16 @@ section.login {
|
||||||
}
|
}
|
||||||
|
|
||||||
section.error {
|
section.error {
|
||||||
|
word-break: break-word;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
border: 1px solid #ff000080;
|
border: 1px solid #ff000080;
|
||||||
margin-left: 1em;
|
margin-left: 1em;
|
||||||
|
|
|
@ -66,6 +66,7 @@ skulk({
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
settings: {
|
settings: {
|
||||||
|
debug: false,
|
||||||
entryFile: "settings",
|
entryFile: "settings",
|
||||||
outputFile: "settings.js",
|
outputFile: "settings.js",
|
||||||
prodCfg: prodCfg,
|
prodCfg: prodCfg,
|
||||||
|
|
|
@ -30,9 +30,13 @@
|
||||||
"@babel/preset-env": "^7.19.4",
|
"@babel/preset-env": "^7.19.4",
|
||||||
"@babel/preset-react": "^7.18.6",
|
"@babel/preset-react": "^7.18.6",
|
||||||
"@browserify/envify": "^6.0.0",
|
"@browserify/envify": "^6.0.0",
|
||||||
|
"@joepie91/eslint-config": "^1.1.1",
|
||||||
"autoprefixer": "^10.4.13",
|
"autoprefixer": "^10.4.13",
|
||||||
"babelify": "^10.0.0",
|
"babelify": "^10.0.0",
|
||||||
"css-extract": "^2.0.0",
|
"css-extract": "^2.0.0",
|
||||||
|
"eslint": "^8.26.0",
|
||||||
|
"eslint-plugin-react": "^7.31.10",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
"factor-bundle": "^2.5.0",
|
"factor-bundle": "^2.5.0",
|
||||||
"icssify": "^2.0.0",
|
"icssify": "^2.0.0",
|
||||||
"postcss": "^8.4.18",
|
"postcss": "^8.4.18",
|
||||||
|
|
|
@ -18,7 +18,6 @@
|
||||||
|
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
const Promise = require("bluebird");
|
|
||||||
const React = require("react");
|
const React = require("react");
|
||||||
const Redux = require("react-redux");
|
const Redux = require("react-redux");
|
||||||
|
|
||||||
|
|
|
@ -1,229 +0,0 @@
|
||||||
/*
|
|
||||||
GoToSocial
|
|
||||||
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
|
||||||
|
|
||||||
This program is free software: you can redistribute it and/or modify
|
|
||||||
it under the terms of the GNU Affero General Public License as published by
|
|
||||||
the Free Software Foundation, either version 3 of the License, or
|
|
||||||
(at your option) any later version.
|
|
||||||
|
|
||||||
This program is distributed in the hope that it will be useful,
|
|
||||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
||||||
GNU Affero General Public License for more details.
|
|
||||||
|
|
||||||
You should have received a copy of the GNU Affero General Public License
|
|
||||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
||||||
*/
|
|
||||||
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
const Promise = require("bluebird");
|
|
||||||
const React = require("react");
|
|
||||||
const Redux = require("react-redux");
|
|
||||||
const {Switch, Route, Link, Redirect, useRoute, useLocation} = require("wouter");
|
|
||||||
|
|
||||||
const Submit = require("../components/submit");
|
|
||||||
const FakeToot = require("../components/fake-toot");
|
|
||||||
const { formFields } = require("../components/form-fields");
|
|
||||||
|
|
||||||
const api = require("../lib/api");
|
|
||||||
const adminActions = require("../redux/reducers/admin").actions;
|
|
||||||
const submit = require("../lib/submit");
|
|
||||||
const BackButton = require("../components/back-button");
|
|
||||||
|
|
||||||
const base = "/settings/admin/custom-emoji";
|
|
||||||
|
|
||||||
module.exports = function CustomEmoji() {
|
|
||||||
const dispatch = Redux.useDispatch();
|
|
||||||
const [loaded, setLoaded] = React.useState(false);
|
|
||||||
|
|
||||||
const [errorMsg, setError] = React.useState("");
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
if (!loaded) {
|
|
||||||
Promise.try(() => {
|
|
||||||
return dispatch(api.admin.fetchCustomEmoji());
|
|
||||||
}).then(() => {
|
|
||||||
setLoaded(true);
|
|
||||||
}).catch((e) => {
|
|
||||||
setLoaded(true);
|
|
||||||
setError(e.message);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
if (!loaded) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<h1>Custom Emoji</h1>
|
|
||||||
Loading...
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{errorMsg.length > 0 &&
|
|
||||||
<div className="error accent">{errorMsg}</div>
|
|
||||||
}
|
|
||||||
<Switch>
|
|
||||||
<Route path={`${base}/:emojiId`}>
|
|
||||||
<EmojiDetailWrapped />
|
|
||||||
</Route>
|
|
||||||
<EmojiOverview />
|
|
||||||
</Switch>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
function EmojiOverview() {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<h1>Custom Emoji</h1>
|
|
||||||
<EmojiList/>
|
|
||||||
<NewEmoji/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const NewEmojiForm = formFields(adminActions.updateNewEmojiVal, (state) => state.admin.newEmoji);
|
|
||||||
function NewEmoji() {
|
|
||||||
const dispatch = Redux.useDispatch();
|
|
||||||
const newEmojiForm = Redux.useSelector((state) => state.admin.newEmoji);
|
|
||||||
|
|
||||||
const [errorMsg, setError] = React.useState("");
|
|
||||||
const [statusMsg, setStatus] = React.useState("");
|
|
||||||
|
|
||||||
const uploadEmoji = submit(
|
|
||||||
() => dispatch(api.admin.newEmoji()),
|
|
||||||
{
|
|
||||||
setStatus, setError,
|
|
||||||
onSuccess: function() {
|
|
||||||
URL.revokeObjectURL(newEmojiForm.image);
|
|
||||||
return Promise.all([
|
|
||||||
dispatch(adminActions.updateNewEmojiVal(["image", undefined])),
|
|
||||||
dispatch(adminActions.updateNewEmojiVal(["imageFile", undefined])),
|
|
||||||
dispatch(adminActions.updateNewEmojiVal(["shortcode", ""])),
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
if (newEmojiForm.shortcode.length == 0) {
|
|
||||||
if (newEmojiForm.imageFile != undefined) {
|
|
||||||
let [name, ext] = newEmojiForm.imageFile.name.split(".");
|
|
||||||
dispatch(adminActions.updateNewEmojiVal(["shortcode", name]));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
let emojiOrShortcode = `:${newEmojiForm.shortcode}:`;
|
|
||||||
|
|
||||||
if (newEmojiForm.image != undefined) {
|
|
||||||
emojiOrShortcode = <img
|
|
||||||
className="emoji"
|
|
||||||
src={newEmojiForm.image}
|
|
||||||
title={`:${newEmojiForm.shortcode}:`}
|
|
||||||
alt={newEmojiForm.shortcode}
|
|
||||||
/>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h2>Add new custom emoji</h2>
|
|
||||||
|
|
||||||
<FakeToot>
|
|
||||||
Look at this new custom emoji {emojiOrShortcode} isn't it cool?
|
|
||||||
</FakeToot>
|
|
||||||
|
|
||||||
<NewEmojiForm.File
|
|
||||||
id="image"
|
|
||||||
name="Image"
|
|
||||||
fileType="image/png,image/gif"
|
|
||||||
showSize={true}
|
|
||||||
maxSize={50 * 1000}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<NewEmojiForm.TextInput
|
|
||||||
id="shortcode"
|
|
||||||
name="Shortcode (without : :), must be unique on the instance"
|
|
||||||
placeHolder="blobcat"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Submit onClick={uploadEmoji} label="Upload" errorMsg={errorMsg} statusMsg={statusMsg} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function EmojiList() {
|
|
||||||
const emoji = Redux.useSelector((state) => state.admin.emoji);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h2>Overview</h2>
|
|
||||||
<div className="list emoji-list">
|
|
||||||
{Object.entries(emoji).map(([category, entries]) => {
|
|
||||||
return <EmojiCategory key={category} category={category} entries={entries}/>;
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function EmojiCategory({category, entries}) {
|
|
||||||
return (
|
|
||||||
<div className="entry">
|
|
||||||
<b>{category}</b>
|
|
||||||
<div className="emoji-group">
|
|
||||||
{entries.map((e) => {
|
|
||||||
return (
|
|
||||||
<Link key={e.id} to={`${base}/${e.id}`}>
|
|
||||||
{/* <Link key={e.static_url} to={`${base}`}> */}
|
|
||||||
<a>
|
|
||||||
<img src={e.url} alt={e.shortcode} title={`:${e.shortcode}:`}/>
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function EmojiDetailWrapped() {
|
|
||||||
/* We wrap the component to generate formFields with a setter depending on the domain
|
|
||||||
if formFields() is used inside the same component that is re-rendered with their state,
|
|
||||||
inputs get re-created on every change, causing them to lose focus, and bad performance
|
|
||||||
*/
|
|
||||||
let [_match, {emojiId}] = useRoute(`${base}/:emojiId`);
|
|
||||||
const emojiById = Redux.useSelector((state) => state.admin.emojiById);
|
|
||||||
const emoji = emojiById[emojiId];
|
|
||||||
if (emoji == undefined) {
|
|
||||||
return (
|
|
||||||
<h1><BackButton to={base}/> Custom Emoji: </h1>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function alterEmoji([key, val]) {
|
|
||||||
return adminActions.updateDomainBlockVal([emojiId, key, val]);
|
|
||||||
}
|
|
||||||
|
|
||||||
const fields = formFields(alterEmoji, (state) => state.admin.blockedInstances[emojiId]);
|
|
||||||
|
|
||||||
return <EmojiDetail emoji={emoji} Form={fields} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
function EmojiDetail({emoji, Form}) {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h1><BackButton to={base}/> Custom Emoji: {emoji.shortcode}</h1>
|
|
||||||
<p>
|
|
||||||
Editing custom emoji isn't implemented yet.<br/>
|
|
||||||
<a target="_blank" rel="noreferrer" href="https://github.com/superseriousbusiness/gotosocial/issues/797">View implementation progress.</a>
|
|
||||||
</p>
|
|
||||||
<img src={emoji.url} alt={emoji.shortcode} title={`:${emoji.shortcode}:`}/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
86
web/source/settings/admin/emoji/detail.js
Normal file
86
web/source/settings/admin/emoji/detail.js
Normal file
|
@ -0,0 +1,86 @@
|
||||||
|
/*
|
||||||
|
GoToSocial
|
||||||
|
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||||
|
|
||||||
|
This program is free software: you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU Affero General Public License as published by
|
||||||
|
the Free Software Foundation, either version 3 of the License, or
|
||||||
|
(at your option) any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU Affero General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU Affero General Public License
|
||||||
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
const React = require("react");
|
||||||
|
|
||||||
|
const { useRoute, Link, Redirect } = require("wouter");
|
||||||
|
|
||||||
|
const BackButton = require("../../components/back-button");
|
||||||
|
|
||||||
|
const query = require("../../lib/query");
|
||||||
|
|
||||||
|
const base = "/settings/admin/custom-emoji";
|
||||||
|
|
||||||
|
/* We wrap the component to generate formFields with a setter depending on the domain
|
||||||
|
if formFields() is used inside the same component that is re-rendered with their state,
|
||||||
|
inputs get re-created on every change, causing them to lose focus, and bad performance
|
||||||
|
*/
|
||||||
|
module.exports = function EmojiDetailWrapped() {
|
||||||
|
let [_match, {emojiId}] = useRoute(`${base}/:emojiId`);
|
||||||
|
const {currentData: emoji, isLoading, error} = query.useGetEmojiQuery(emojiId);
|
||||||
|
|
||||||
|
return (<>
|
||||||
|
{error && <div className="error accent">{error.status}: {error.data.error}</div>}
|
||||||
|
{isLoading
|
||||||
|
? "Loading..."
|
||||||
|
: <EmojiDetail emoji={emoji}/>
|
||||||
|
}
|
||||||
|
</>);
|
||||||
|
};
|
||||||
|
|
||||||
|
function EmojiDetail({emoji}) {
|
||||||
|
if (emoji == undefined) {
|
||||||
|
return (<>
|
||||||
|
<Link to={base}>
|
||||||
|
<a className="button">go back</a>
|
||||||
|
</Link>
|
||||||
|
</>);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1><BackButton to={base}/> Custom Emoji: {emoji.shortcode}</h1>
|
||||||
|
<DeleteButton id={emoji.id}/>
|
||||||
|
<p>
|
||||||
|
Editing custom emoji isn't implemented yet.<br/>
|
||||||
|
<a target="_blank" rel="noreferrer" href="https://github.com/superseriousbusiness/gotosocial/issues/797">View implementation progress.</a>
|
||||||
|
</p>
|
||||||
|
<img src={emoji.url} alt={emoji.shortcode} title={`:${emoji.shortcode}:`}/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DeleteButton({id}) {
|
||||||
|
// TODO: confirmation dialog?
|
||||||
|
const [deleteEmoji, deleteResult] = query.useDeleteEmojiMutation();
|
||||||
|
|
||||||
|
let text = "Delete this emoji";
|
||||||
|
if (deleteResult.isLoading) {
|
||||||
|
text = "processing...";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (deleteResult.isSuccess) {
|
||||||
|
return <Redirect to={base}/>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button onClick={() => deleteEmoji(id)} disabled={deleteResult.isLoading}>{text}</button>
|
||||||
|
);
|
||||||
|
}
|
40
web/source/settings/admin/emoji/index.js
Normal file
40
web/source/settings/admin/emoji/index.js
Normal file
|
@ -0,0 +1,40 @@
|
||||||
|
/*
|
||||||
|
GoToSocial
|
||||||
|
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||||
|
|
||||||
|
This program is free software: you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU Affero General Public License as published by
|
||||||
|
the Free Software Foundation, either version 3 of the License, or
|
||||||
|
(at your option) any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU Affero General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU Affero General Public License
|
||||||
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
const React = require("react");
|
||||||
|
const {Switch, Route} = require("wouter");
|
||||||
|
|
||||||
|
const EmojiOverview = require("./overview");
|
||||||
|
const EmojiDetail = require("./detail");
|
||||||
|
|
||||||
|
const base = "/settings/admin/custom-emoji";
|
||||||
|
|
||||||
|
module.exports = function CustomEmoji() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Switch>
|
||||||
|
<Route path={`${base}/:emojiId`}>
|
||||||
|
<EmojiDetail />
|
||||||
|
</Route>
|
||||||
|
<EmojiOverview />
|
||||||
|
</Switch>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
133
web/source/settings/admin/emoji/new-emoji.js
Normal file
133
web/source/settings/admin/emoji/new-emoji.js
Normal file
|
@ -0,0 +1,133 @@
|
||||||
|
/*
|
||||||
|
GoToSocial
|
||||||
|
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||||
|
|
||||||
|
This program is free software: you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU Affero General Public License as published by
|
||||||
|
the Free Software Foundation, either version 3 of the License, or
|
||||||
|
(at your option) any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU Affero General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU Affero General Public License
|
||||||
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
const Promise = require('bluebird');
|
||||||
|
const React = require("react");
|
||||||
|
|
||||||
|
const FakeToot = require("../../components/fake-toot");
|
||||||
|
const MutateButton = require("../../components/mutation-button");
|
||||||
|
|
||||||
|
const {
|
||||||
|
useTextInput,
|
||||||
|
useFileInput
|
||||||
|
} = require("../../components/form");
|
||||||
|
|
||||||
|
const query = require("../../lib/query");
|
||||||
|
|
||||||
|
module.exports = function NewEmojiForm({emoji}) {
|
||||||
|
const emojiCodes = React.useMemo(() => {
|
||||||
|
return new Set(emoji.map((e) => e.shortcode));
|
||||||
|
}, [emoji]);
|
||||||
|
|
||||||
|
const [addEmoji, result] = query.useAddEmojiMutation();
|
||||||
|
|
||||||
|
const [onFileChange, resetFile, {image, imageURL, imageInfo}] = useFileInput("image", {
|
||||||
|
withPreview: true,
|
||||||
|
maxSize: 50 * 1024
|
||||||
|
});
|
||||||
|
|
||||||
|
const [onShortcodeChange, resetShortcode, {shortcode, setShortcode, shortcodeRef}] = useTextInput("shortcode", {
|
||||||
|
validator: function validateShortcode(code) {
|
||||||
|
return emojiCodes.has(code)
|
||||||
|
? "Shortcode already in use"
|
||||||
|
: "";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (shortcode.length == 0) {
|
||||||
|
if (image != undefined) {
|
||||||
|
let [name, _ext] = image.name.split(".");
|
||||||
|
setShortcode(name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [image]);
|
||||||
|
|
||||||
|
function uploadEmoji(e) {
|
||||||
|
if (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
Promise.try(() => {
|
||||||
|
return addEmoji({
|
||||||
|
image,
|
||||||
|
shortcode
|
||||||
|
});
|
||||||
|
}).then(() => {
|
||||||
|
resetFile();
|
||||||
|
resetShortcode();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
let emojiOrShortcode = `:${shortcode}:`;
|
||||||
|
|
||||||
|
if (imageURL != undefined) {
|
||||||
|
emojiOrShortcode = <img
|
||||||
|
className="emoji"
|
||||||
|
src={imageURL}
|
||||||
|
title={`:${shortcode}:`}
|
||||||
|
alt={shortcode}
|
||||||
|
/>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2>Add new custom emoji</h2>
|
||||||
|
|
||||||
|
<FakeToot>
|
||||||
|
Look at this new custom emoji {emojiOrShortcode} isn't it cool?
|
||||||
|
</FakeToot>
|
||||||
|
|
||||||
|
<form onSubmit={uploadEmoji} className="form-flex">
|
||||||
|
<div className="form-field file">
|
||||||
|
<label className="file-input button" htmlFor="image">
|
||||||
|
Browse
|
||||||
|
</label>
|
||||||
|
{imageInfo}
|
||||||
|
<input
|
||||||
|
className="hidden"
|
||||||
|
type="file"
|
||||||
|
id="image"
|
||||||
|
name="Image"
|
||||||
|
accept="image/png,image/gif"
|
||||||
|
onChange={onFileChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-field text">
|
||||||
|
<label htmlFor="shortcode">
|
||||||
|
Shortcode, must be unique among the instance's local emoji
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="shortcode"
|
||||||
|
name="Shortcode"
|
||||||
|
ref={shortcodeRef}
|
||||||
|
onChange={onShortcodeChange}
|
||||||
|
value={shortcode}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<MutateButton text="Upload emoji" result={result}/>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
99
web/source/settings/admin/emoji/overview.js
Normal file
99
web/source/settings/admin/emoji/overview.js
Normal file
|
@ -0,0 +1,99 @@
|
||||||
|
/*
|
||||||
|
GoToSocial
|
||||||
|
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||||
|
|
||||||
|
This program is free software: you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU Affero General Public License as published by
|
||||||
|
the Free Software Foundation, either version 3 of the License, or
|
||||||
|
(at your option) any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU Affero General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU Affero General Public License
|
||||||
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
const React = require("react");
|
||||||
|
const {Link} = require("wouter");
|
||||||
|
const defaultValue = require('default-value');
|
||||||
|
|
||||||
|
const NewEmojiForm = require("./new-emoji");
|
||||||
|
|
||||||
|
const query = require("../../lib/query");
|
||||||
|
|
||||||
|
const base = "/settings/admin/custom-emoji";
|
||||||
|
|
||||||
|
module.exports = function EmojiOverview() {
|
||||||
|
const {
|
||||||
|
data: emoji,
|
||||||
|
isLoading,
|
||||||
|
error
|
||||||
|
} = query.useGetAllEmojiQuery({filter: "domain:local"});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h1>Custom Emoji</h1>
|
||||||
|
{error &&
|
||||||
|
<div className="error accent">{error}</div>
|
||||||
|
}
|
||||||
|
{isLoading
|
||||||
|
? "Loading..."
|
||||||
|
: <>
|
||||||
|
<EmojiList emoji={emoji}/>
|
||||||
|
<NewEmojiForm emoji={emoji}/>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
function EmojiList({emoji}) {
|
||||||
|
const byCategory = React.useMemo(() => {
|
||||||
|
const categories = {};
|
||||||
|
|
||||||
|
emoji.forEach((emoji) => {
|
||||||
|
let cat = defaultValue(emoji.category, "Unsorted");
|
||||||
|
categories[cat] = defaultValue(categories[cat], []);
|
||||||
|
categories[cat].push(emoji);
|
||||||
|
});
|
||||||
|
|
||||||
|
return categories;
|
||||||
|
}, [emoji]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2>Overview</h2>
|
||||||
|
<div className="list emoji-list">
|
||||||
|
{emoji.length == 0 && "No local emoji yet"}
|
||||||
|
{Object.entries(byCategory).map(([category, entries]) => {
|
||||||
|
return <EmojiCategory key={category} category={category} entries={entries}/>;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function EmojiCategory({category, entries}) {
|
||||||
|
return (
|
||||||
|
<div className="entry">
|
||||||
|
<b>{category}</b>
|
||||||
|
<div className="emoji-group">
|
||||||
|
{entries.map((e) => {
|
||||||
|
return (
|
||||||
|
<Link key={e.id} to={`${base}/${e.id}`}>
|
||||||
|
{/* <Link key={e.static_url} to={`${base}`}> */}
|
||||||
|
<a>
|
||||||
|
<img src={e.url} alt={e.shortcode} title={`:${e.shortcode}:`}/>
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
|
@ -50,7 +50,7 @@ module.exports = function AdminSettings() {
|
||||||
return dispatch(api.admin.fetchDomainBlocks());
|
return dispatch(api.admin.fetchDomainBlocks());
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, []);
|
}, [dispatch, loadedBlockedInstances]);
|
||||||
|
|
||||||
if (!loadedBlockedInstances) {
|
if (!loadedBlockedInstances) {
|
||||||
return (
|
return (
|
||||||
|
@ -315,7 +315,7 @@ function InstancePage({domain, Form}) {
|
||||||
if (entry == undefined) {
|
if (entry == undefined) {
|
||||||
dispatch(api.admin.getEditableDomainBlock(domain));
|
dispatch(api.admin.getEditableDomainBlock(domain));
|
||||||
}
|
}
|
||||||
}, []);
|
}, [dispatch, domain, entry]);
|
||||||
|
|
||||||
const [errorMsg, setError] = React.useState("");
|
const [errorMsg, setError] = React.useState("");
|
||||||
const [statusMsg, setStatus] = React.useState("");
|
const [statusMsg, setStatus] = React.useState("");
|
||||||
|
|
|
@ -18,7 +18,6 @@
|
||||||
|
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
const Promise = require("bluebird");
|
|
||||||
const React = require("react");
|
const React = require("react");
|
||||||
const Redux = require("react-redux");
|
const Redux = require("react-redux");
|
||||||
|
|
||||||
|
@ -32,7 +31,7 @@ const adminActions = require("../redux/reducers/instances").actions;
|
||||||
const {
|
const {
|
||||||
TextInput,
|
TextInput,
|
||||||
TextArea,
|
TextArea,
|
||||||
File
|
_File
|
||||||
} = require("../components/form-fields").formFields(adminActions.setAdminSettingsVal, (state) => state.instances.adminSettings);
|
} = require("../components/form-fields").formFields(adminActions.setAdminSettingsVal, (state) => state.instances.adminSettings);
|
||||||
|
|
||||||
module.exports = function AdminSettings() {
|
module.exports = function AdminSettings() {
|
||||||
|
|
|
@ -18,7 +18,6 @@
|
||||||
|
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
const Promise = require("bluebird");
|
|
||||||
const React = require("react");
|
const React = require("react");
|
||||||
|
|
||||||
module.exports = function ErrorFallback({error, resetErrorBoundary}) {
|
module.exports = function ErrorFallback({error, resetErrorBoundary}) {
|
||||||
|
|
|
@ -119,7 +119,7 @@ module.exports = {
|
||||||
field = (
|
field = (
|
||||||
<>
|
<>
|
||||||
<label htmlFor={id} className="file-input button">Browse</label>
|
<label htmlFor={id} className="file-input button">Browse</label>
|
||||||
<span>
|
<span className="form-info">
|
||||||
{file ? file.name : "no file selected"} {size}
|
{file ? file.name : "no file selected"} {size}
|
||||||
</span>
|
</span>
|
||||||
{/* <a onClick={removeFile("header")}>remove</a> */}
|
{/* <a onClick={removeFile("header")}>remove</a> */}
|
||||||
|
|
78
web/source/settings/components/form/file.jsx
Normal file
78
web/source/settings/components/form/file.jsx
Normal file
|
@ -0,0 +1,78 @@
|
||||||
|
/*
|
||||||
|
GoToSocial
|
||||||
|
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||||
|
|
||||||
|
This program is free software: you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU Affero General Public License as published by
|
||||||
|
the Free Software Foundation, either version 3 of the License, or
|
||||||
|
(at your option) any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU Affero General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU Affero General Public License
|
||||||
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
const React = require("react");
|
||||||
|
const prettierBytes = require("prettier-bytes");
|
||||||
|
|
||||||
|
module.exports = function useFileInput({name, _Name}, {
|
||||||
|
withPreview,
|
||||||
|
maxSize,
|
||||||
|
initialInfo = "no file selected"
|
||||||
|
}) {
|
||||||
|
const [file, setFile] = React.useState();
|
||||||
|
const [imageURL, setImageURL] = React.useState();
|
||||||
|
const [info, setInfo] = React.useState();
|
||||||
|
|
||||||
|
function onChange(e) {
|
||||||
|
let file = e.target.files[0];
|
||||||
|
setFile(file);
|
||||||
|
|
||||||
|
URL.revokeObjectURL(imageURL);
|
||||||
|
|
||||||
|
if (file != undefined) {
|
||||||
|
if (withPreview) {
|
||||||
|
setImageURL(URL.createObjectURL(file));
|
||||||
|
}
|
||||||
|
|
||||||
|
let size = prettierBytes(file.size);
|
||||||
|
if (maxSize && file.size > maxSize) {
|
||||||
|
size = <span className="error-text">{size}</span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
setInfo(<>
|
||||||
|
{file.name} ({size})
|
||||||
|
</>);
|
||||||
|
} else {
|
||||||
|
setInfo();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function reset() {
|
||||||
|
URL.revokeObjectURL(imageURL);
|
||||||
|
setImageURL();
|
||||||
|
setFile();
|
||||||
|
setInfo();
|
||||||
|
}
|
||||||
|
|
||||||
|
return [
|
||||||
|
onChange,
|
||||||
|
reset,
|
||||||
|
{
|
||||||
|
[name]: file,
|
||||||
|
[`${name}URL`]: imageURL,
|
||||||
|
[`${name}Info`]: <span className="form-info">
|
||||||
|
{info
|
||||||
|
? info
|
||||||
|
: initialInfo
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
];
|
||||||
|
};
|
36
web/source/settings/components/form/index.js
Normal file
36
web/source/settings/components/form/index.js
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
/*
|
||||||
|
GoToSocial
|
||||||
|
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||||
|
|
||||||
|
This program is free software: you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU Affero General Public License as published by
|
||||||
|
the Free Software Foundation, either version 3 of the License, or
|
||||||
|
(at your option) any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU Affero General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU Affero General Public License
|
||||||
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
function capitalizeFirst(str) {
|
||||||
|
return str.slice(0,1).toUpperCase()+str.slice(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function makeHook(func) {
|
||||||
|
return (name, ...args) => func({
|
||||||
|
name,
|
||||||
|
Name: capitalizeFirst(name)
|
||||||
|
},
|
||||||
|
...args);
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
useTextInput: makeHook(require("./text")),
|
||||||
|
useFileInput: makeHook(require("./file"))
|
||||||
|
};
|
56
web/source/settings/components/form/text.jsx
Normal file
56
web/source/settings/components/form/text.jsx
Normal file
|
@ -0,0 +1,56 @@
|
||||||
|
/*
|
||||||
|
GoToSocial
|
||||||
|
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||||
|
|
||||||
|
This program is free software: you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU Affero General Public License as published by
|
||||||
|
the Free Software Foundation, either version 3 of the License, or
|
||||||
|
(at your option) any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU Affero General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU Affero General Public License
|
||||||
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
const React = require("react");
|
||||||
|
|
||||||
|
module.exports = function useTextInput({name, Name}, {validator} = {}) {
|
||||||
|
const [text, setText] = React.useState("");
|
||||||
|
const textRef = React.useRef(null);
|
||||||
|
|
||||||
|
function onChange(e) {
|
||||||
|
let input = e.target.value;
|
||||||
|
setText(input);
|
||||||
|
|
||||||
|
if (validator) {
|
||||||
|
validator(input);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function reset() {
|
||||||
|
setText("");
|
||||||
|
}
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (validator) {
|
||||||
|
textRef.current.setCustomValidity(validator(text));
|
||||||
|
textRef.current.reportValidity();
|
||||||
|
}
|
||||||
|
}, [text, textRef, validator]);
|
||||||
|
|
||||||
|
return [
|
||||||
|
onChange,
|
||||||
|
reset,
|
||||||
|
{
|
||||||
|
[name]: text,
|
||||||
|
[`${name}Ref`]: textRef,
|
||||||
|
[`set${Name}`]: setText
|
||||||
|
}
|
||||||
|
];
|
||||||
|
};
|
42
web/source/settings/components/mutation-button.jsx
Normal file
42
web/source/settings/components/mutation-button.jsx
Normal file
|
@ -0,0 +1,42 @@
|
||||||
|
/*
|
||||||
|
GoToSocial
|
||||||
|
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||||
|
|
||||||
|
This program is free software: you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU Affero General Public License as published by
|
||||||
|
the Free Software Foundation, either version 3 of the License, or
|
||||||
|
(at your option) any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU Affero General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU Affero General Public License
|
||||||
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
const React = require("react");
|
||||||
|
|
||||||
|
module.exports = function MutateButton({text, result}) {
|
||||||
|
let buttonText = text;
|
||||||
|
|
||||||
|
if (result.isLoading) {
|
||||||
|
buttonText = "Processing...";
|
||||||
|
}
|
||||||
|
|
||||||
|
return (<div>
|
||||||
|
{result.error &&
|
||||||
|
<section className="error">{result.error.status}: {result.error.data.error}</section>
|
||||||
|
}
|
||||||
|
<input
|
||||||
|
className="button"
|
||||||
|
type="submit"
|
||||||
|
disabled={result.isLoading}
|
||||||
|
value={buttonText}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
|
@ -46,7 +46,7 @@ const nav = {
|
||||||
"Instance Settings": require("./admin/settings.js"),
|
"Instance Settings": require("./admin/settings.js"),
|
||||||
"Actions": require("./admin/actions"),
|
"Actions": require("./admin/actions"),
|
||||||
"Federation": require("./admin/federation.js"),
|
"Federation": require("./admin/federation.js"),
|
||||||
"Custom Emoji": require("./admin/emoji.js"),
|
"Custom Emoji": require("./admin/emoji"),
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -94,7 +94,7 @@ function App() {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, []);
|
}, [loginState, dispatch]);
|
||||||
|
|
||||||
let ErrorElement = null;
|
let ErrorElement = null;
|
||||||
if (errorMsg != undefined) {
|
if (errorMsg != undefined) {
|
||||||
|
|
|
@ -160,33 +160,6 @@ module.exports = function ({ apiCall, getChanges }) {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
fetchCustomEmoji: function fetchCustomEmoji() {
|
|
||||||
return function (dispatch, _getState) {
|
|
||||||
return Promise.try(() => {
|
|
||||||
return dispatch(apiCall("GET", "/api/v1/admin/custom_emojis?filter=domain:local&limit=0"));
|
|
||||||
}).then((emoji) => {
|
|
||||||
return dispatch(admin.setEmoji(emoji));
|
|
||||||
});
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
newEmoji: function newEmoji() {
|
|
||||||
return function (dispatch, getState) {
|
|
||||||
return Promise.try(() => {
|
|
||||||
const state = getState().admin.newEmoji;
|
|
||||||
|
|
||||||
const update = getChanges(state, {
|
|
||||||
formKeys: ["shortcode"],
|
|
||||||
fileKeys: ["image"]
|
|
||||||
});
|
|
||||||
|
|
||||||
return dispatch(apiCall("POST", "/api/v1/admin/custom_emojis", update, "form"));
|
|
||||||
}).then((emoji) => {
|
|
||||||
return dispatch(admin.addEmoji(emoji));
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
return adminAPI;
|
return adminAPI;
|
||||||
};
|
};
|
|
@ -24,14 +24,12 @@ const d = require("dotty");
|
||||||
|
|
||||||
const { APIError, AuthenticationError } = require("../errors");
|
const { APIError, AuthenticationError } = require("../errors");
|
||||||
const { setInstanceInfo, setNamedInstanceInfo } = require("../../redux/reducers/instances").actions;
|
const { setInstanceInfo, setNamedInstanceInfo } = require("../../redux/reducers/instances").actions;
|
||||||
const oauth = require("../../redux/reducers/oauth").actions;
|
|
||||||
|
|
||||||
function apiCall(method, route, payload, type = "json") {
|
function apiCall(method, route, payload, type = "json") {
|
||||||
return function (dispatch, getState) {
|
return function (dispatch, getState) {
|
||||||
const state = getState();
|
const state = getState();
|
||||||
let base = state.oauth.instance;
|
let base = state.oauth.instance;
|
||||||
let auth = state.oauth.token;
|
let auth = state.oauth.token;
|
||||||
console.log(method, base, route, "auth:", auth != undefined);
|
|
||||||
|
|
||||||
return Promise.try(() => {
|
return Promise.try(() => {
|
||||||
let url = new URL(base);
|
let url = new URL(base);
|
||||||
|
@ -51,21 +49,7 @@ function apiCall(method, route, payload, type = "json") {
|
||||||
headers["Content-Type"] = "application/json";
|
headers["Content-Type"] = "application/json";
|
||||||
body = JSON.stringify(payload);
|
body = JSON.stringify(payload);
|
||||||
} else if (type == "form") {
|
} else if (type == "form") {
|
||||||
const formData = new FormData();
|
body = convertToForm(payload);
|
||||||
Object.entries(payload).forEach(([key, val]) => {
|
|
||||||
if (isPlainObject(val)) {
|
|
||||||
Object.entries(val).forEach(([key2, val2]) => {
|
|
||||||
if (val2 != undefined) {
|
|
||||||
formData.set(`${key}[${key2}]`, val2);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
if (val != undefined) {
|
|
||||||
formData.set(key, val);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
body = formData;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -100,6 +84,28 @@ function apiCall(method, route, payload, type = "json") {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Takes an object with (nested) keys, and transforms it into
|
||||||
|
a FormData object to be sent over the API
|
||||||
|
*/
|
||||||
|
function convertToForm(payload) {
|
||||||
|
const formData = new FormData();
|
||||||
|
Object.entries(payload).forEach(([key, val]) => {
|
||||||
|
if (isPlainObject(val)) {
|
||||||
|
Object.entries(val).forEach(([key2, val2]) => {
|
||||||
|
if (val2 != undefined) {
|
||||||
|
formData.set(`${key}[${key2}]`, val2);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
if (val != undefined) {
|
||||||
|
formData.set(key, val);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return formData;
|
||||||
|
}
|
||||||
|
|
||||||
function getChanges(state, keys) {
|
function getChanges(state, keys) {
|
||||||
const { formKeys = [], fileKeys = [], renamedKeys = {} } = keys;
|
const { formKeys = [], fileKeys = [], renamedKeys = {} } = keys;
|
||||||
const update = {};
|
const update = {};
|
||||||
|
@ -129,7 +135,8 @@ function getChanges(state, keys) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function getCurrentUrl() {
|
function getCurrentUrl() {
|
||||||
return `${window.location.origin}${window.location.pathname}`;
|
let [pre, _past] = window.location.pathname.split("/settings");
|
||||||
|
return `${window.location.origin}${pre}/settings`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function fetchInstanceWithoutStore(domain) {
|
function fetchInstanceWithoutStore(domain) {
|
||||||
|
@ -181,5 +188,6 @@ module.exports = {
|
||||||
user: require("./user")(submoduleArgs),
|
user: require("./user")(submoduleArgs),
|
||||||
admin: require("./admin")(submoduleArgs),
|
admin: require("./admin")(submoduleArgs),
|
||||||
apiCall,
|
apiCall,
|
||||||
|
convertToForm,
|
||||||
getChanges
|
getChanges
|
||||||
};
|
};
|
|
@ -19,8 +19,7 @@
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
const React = require("react");
|
const React = require("react");
|
||||||
const Redux = require("react-redux");
|
const { Link, Route, Redirect } = require("wouter");
|
||||||
const { Link, Route, Switch, Redirect } = require("wouter");
|
|
||||||
const { ErrorBoundary } = require("react-error-boundary");
|
const { ErrorBoundary } = require("react-error-boundary");
|
||||||
|
|
||||||
const ErrorFallback = require("../components/error");
|
const ErrorFallback = require("../components/error");
|
||||||
|
|
|
@ -1,134 +0,0 @@
|
||||||
/*
|
|
||||||
GoToSocial
|
|
||||||
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
|
||||||
|
|
||||||
This program is free software: you can redistribute it and/or modify
|
|
||||||
it under the terms of the GNU Affero General Public License as published by
|
|
||||||
the Free Software Foundation, either version 3 of the License, or
|
|
||||||
(at your option) any later version.
|
|
||||||
|
|
||||||
This program is distributed in the hope that it will be useful,
|
|
||||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
||||||
GNU Affero General Public License for more details.
|
|
||||||
|
|
||||||
You should have received a copy of the GNU Affero General Public License
|
|
||||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
||||||
*/
|
|
||||||
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
const Promise = require("bluebird");
|
|
||||||
const React = require("react");
|
|
||||||
const ReactDom = require("react-dom");
|
|
||||||
|
|
||||||
const oauthLib = require("./oauth");
|
|
||||||
|
|
||||||
module.exports = function createPanel(clientName, scope, Component) {
|
|
||||||
ReactDom.render(<Panel/>, document.getElementById("root"));
|
|
||||||
|
|
||||||
function Panel() {
|
|
||||||
const [oauth, setOauth] = React.useState();
|
|
||||||
const [hasAuth, setAuth] = React.useState(false);
|
|
||||||
const [oauthState, setOauthState] = React.useState(localStorage.getItem("oauth"));
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
let state = localStorage.getItem("oauth");
|
|
||||||
if (state != undefined) {
|
|
||||||
state = JSON.parse(state);
|
|
||||||
let restoredOauth = oauthLib(state.config, state);
|
|
||||||
Promise.try(() => {
|
|
||||||
return restoredOauth.callback();
|
|
||||||
}).then(() => {
|
|
||||||
setAuth(true);
|
|
||||||
});
|
|
||||||
setOauth(restoredOauth);
|
|
||||||
}
|
|
||||||
}, [setAuth, setOauth]);
|
|
||||||
|
|
||||||
if (!hasAuth && oauth && oauth.isAuthorized()) {
|
|
||||||
setAuth(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (oauth && oauth.isAuthorized()) {
|
|
||||||
return <Component oauth={oauth} />;
|
|
||||||
} else if (oauthState != undefined) {
|
|
||||||
return "processing oauth...";
|
|
||||||
} else {
|
|
||||||
return <Auth setOauth={setOauth} />;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function Auth({setOauth}) {
|
|
||||||
const [ instance, setInstance ] = React.useState("");
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
let isStillMounted = true;
|
|
||||||
// check if current domain runs an instance
|
|
||||||
let thisUrl = new URL(window.location.origin);
|
|
||||||
thisUrl.pathname = "/api/v1/instance";
|
|
||||||
Promise.try(() => {
|
|
||||||
return fetch(thisUrl.href);
|
|
||||||
}).then((res) => {
|
|
||||||
if (res.status == 200) {
|
|
||||||
return res.json();
|
|
||||||
}
|
|
||||||
}).then((json) => {
|
|
||||||
if (json && json.uri && isStillMounted) {
|
|
||||||
setInstance(json.uri);
|
|
||||||
}
|
|
||||||
}).catch((e) => {
|
|
||||||
console.log("error checking instance response:", e);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
// cleanup function
|
|
||||||
isStillMounted = false;
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
function doAuth() {
|
|
||||||
return Promise.try(() => {
|
|
||||||
return new URL(instance);
|
|
||||||
}).catch(TypeError, () => {
|
|
||||||
return new URL(`https://${instance}`);
|
|
||||||
}).then((parsedURL) => {
|
|
||||||
let url = parsedURL.toString();
|
|
||||||
let oauth = oauthLib({
|
|
||||||
instance: url,
|
|
||||||
client_name: clientName,
|
|
||||||
scope: scope,
|
|
||||||
website: window.location.href
|
|
||||||
});
|
|
||||||
setOauth(oauth);
|
|
||||||
setInstance(url);
|
|
||||||
return oauth.register().then(() => {
|
|
||||||
return oauth;
|
|
||||||
});
|
|
||||||
}).then((oauth) => {
|
|
||||||
return oauth.authorize();
|
|
||||||
}).catch((e) => {
|
|
||||||
console.log("error authenticating:", e);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateInstance(e) {
|
|
||||||
if (e.key == "Enter") {
|
|
||||||
doAuth();
|
|
||||||
} else {
|
|
||||||
setInstance(e.target.value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="login">
|
|
||||||
<h1>OAUTH Login:</h1>
|
|
||||||
<form onSubmit={(e) => e.preventDefault()}>
|
|
||||||
<label htmlFor="instance">Instance: </label>
|
|
||||||
<input value={instance} onChange={updateInstance} id="instance"/>
|
|
||||||
<button onClick={doAuth}>Authenticate</button>
|
|
||||||
</form>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
55
web/source/settings/lib/query/base.js
Normal file
55
web/source/settings/lib/query/base.js
Normal file
|
@ -0,0 +1,55 @@
|
||||||
|
/*
|
||||||
|
GoToSocial
|
||||||
|
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||||
|
|
||||||
|
This program is free software: you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU Affero General Public License as published by
|
||||||
|
the Free Software Foundation, either version 3 of the License, or
|
||||||
|
(at your option) any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU Affero General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU Affero General Public License
|
||||||
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
const { createApi, fetchBaseQuery } = require("@reduxjs/toolkit/query/react");
|
||||||
|
|
||||||
|
const { convertToForm } = require("../api");
|
||||||
|
|
||||||
|
function instanceBasedQuery(args, api, extraOptions) {
|
||||||
|
const state = api.getState();
|
||||||
|
const {instance, token} = state.oauth;
|
||||||
|
|
||||||
|
if (args.baseUrl == undefined) {
|
||||||
|
args.baseUrl = instance;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (args.asForm) {
|
||||||
|
delete args.asForm;
|
||||||
|
args.body = convertToForm(args.body);
|
||||||
|
}
|
||||||
|
|
||||||
|
return fetchBaseQuery({
|
||||||
|
baseUrl: args.baseUrl,
|
||||||
|
prepareHeaders: (headers) => {
|
||||||
|
if (token != undefined) {
|
||||||
|
headers.set('Authorization', token);
|
||||||
|
}
|
||||||
|
headers.set("Accept", "application/json");
|
||||||
|
return headers;
|
||||||
|
},
|
||||||
|
})(args, api, extraOptions);
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = createApi({
|
||||||
|
reducerPath: "api",
|
||||||
|
baseQuery: instanceBasedQuery,
|
||||||
|
tagTypes: ["Emojis"],
|
||||||
|
endpoints: () => ({})
|
||||||
|
});
|
66
web/source/settings/lib/query/custom-emoji.js
Normal file
66
web/source/settings/lib/query/custom-emoji.js
Normal file
|
@ -0,0 +1,66 @@
|
||||||
|
/*
|
||||||
|
GoToSocial
|
||||||
|
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||||
|
|
||||||
|
This program is free software: you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU Affero General Public License as published by
|
||||||
|
the Free Software Foundation, either version 3 of the License, or
|
||||||
|
(at your option) any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU Affero General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU Affero General Public License
|
||||||
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
const base = require("./base");
|
||||||
|
|
||||||
|
const endpoints = (build) => ({
|
||||||
|
getAllEmoji: build.query({
|
||||||
|
query: (params = {}) => ({
|
||||||
|
url: "/api/v1/admin/custom_emojis",
|
||||||
|
params: {
|
||||||
|
limit: 0,
|
||||||
|
...params
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
providesTags: (res) =>
|
||||||
|
res
|
||||||
|
? [...res.map((emoji) => ({type: "Emojis", id: emoji.id})), {type: "Emojis", id: "LIST"}]
|
||||||
|
: [{type: "Emojis", id: "LIST"}]
|
||||||
|
}),
|
||||||
|
getEmoji: build.query({
|
||||||
|
query: (id) => ({
|
||||||
|
url: `/api/v1/admin/custom_emojis/${id}`
|
||||||
|
}),
|
||||||
|
providesTags: (res, error, id) => [{type: "Emojis", id}]
|
||||||
|
}),
|
||||||
|
addEmoji: build.mutation({
|
||||||
|
query: (form) => {
|
||||||
|
return {
|
||||||
|
method: "POST",
|
||||||
|
url: `/api/v1/admin/custom_emojis`,
|
||||||
|
asForm: true,
|
||||||
|
body: form
|
||||||
|
};
|
||||||
|
},
|
||||||
|
invalidatesTags: (res) =>
|
||||||
|
res
|
||||||
|
? [{type: "Emojis", id: "LIST"}, {type: "Emojis", id: res.id}]
|
||||||
|
: [{type: "Emojis", id: "LIST"}]
|
||||||
|
}),
|
||||||
|
deleteEmoji: build.mutation({
|
||||||
|
query: (id) => ({
|
||||||
|
method: "DELETE",
|
||||||
|
url: `/api/v1/admin/custom_emojis/${id}`
|
||||||
|
}),
|
||||||
|
invalidatesTags: (res, error, id) => [{type: "Emojis", id}]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = base.injectEndpoints({endpoints});
|
24
web/source/settings/lib/query/index.js
Normal file
24
web/source/settings/lib/query/index.js
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
/*
|
||||||
|
GoToSocial
|
||||||
|
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||||
|
|
||||||
|
This program is free software: you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU Affero General Public License as published by
|
||||||
|
the Free Software Foundation, either version 3 of the License, or
|
||||||
|
(at your option) any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU Affero General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU Affero General Public License
|
||||||
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
...require("./base"),
|
||||||
|
...require("./custom-emoji.js")
|
||||||
|
};
|
|
@ -18,18 +18,20 @@
|
||||||
|
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
const { createStore, combineReducers, applyMiddleware } = require("redux");
|
const { combineReducers } = require("redux");
|
||||||
const { persistStore, persistReducer } = require("redux-persist");
|
const { configureStore } = require("@reduxjs/toolkit");
|
||||||
const thunk = require("redux-thunk").default;
|
const {
|
||||||
const { composeWithDevTools } = require("redux-devtools-extension");
|
persistStore,
|
||||||
|
persistReducer,
|
||||||
|
FLUSH,
|
||||||
|
REHYDRATE,
|
||||||
|
PAUSE,
|
||||||
|
PERSIST,
|
||||||
|
PURGE,
|
||||||
|
REGISTER,
|
||||||
|
} = require("redux-persist");
|
||||||
|
|
||||||
const persistConfig = {
|
const query = require("../lib/query/base");
|
||||||
key: "gotosocial-settings",
|
|
||||||
storage: require("redux-persist/lib/storage").default,
|
|
||||||
stateReconciler: require("redux-persist/lib/stateReconciler/autoMergeLevel2").default,
|
|
||||||
whitelist: ["oauth"],
|
|
||||||
blacklist: ["temporary"]
|
|
||||||
};
|
|
||||||
|
|
||||||
const combinedReducers = combineReducers({
|
const combinedReducers = combineReducers({
|
||||||
oauth: require("./reducers/oauth").reducer,
|
oauth: require("./reducers/oauth").reducer,
|
||||||
|
@ -37,13 +39,27 @@ const combinedReducers = combineReducers({
|
||||||
temporary: require("./reducers/temporary").reducer,
|
temporary: require("./reducers/temporary").reducer,
|
||||||
user: require("./reducers/user").reducer,
|
user: require("./reducers/user").reducer,
|
||||||
admin: require("./reducers/admin").reducer,
|
admin: require("./reducers/admin").reducer,
|
||||||
|
[query.reducerPath]: query.reducer
|
||||||
});
|
});
|
||||||
|
|
||||||
const persistedReducer = persistReducer(persistConfig, combinedReducers);
|
const persistedReducer = persistReducer({
|
||||||
const composedEnhancer = composeWithDevTools(applyMiddleware(thunk));
|
key: "gotosocial-settings",
|
||||||
|
storage: require("redux-persist/lib/storage").default,
|
||||||
|
stateReconciler: require("redux-persist/lib/stateReconciler/autoMergeLevel2").default,
|
||||||
|
whitelist: ["oauth"],
|
||||||
|
}, combinedReducers);
|
||||||
|
|
||||||
|
const store = configureStore({
|
||||||
|
reducer: persistedReducer,
|
||||||
|
middleware: (getDefaultMiddleware) => {
|
||||||
|
return getDefaultMiddleware({
|
||||||
|
serializableCheck: {
|
||||||
|
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER, "temporary/setScrollElement"]
|
||||||
|
}
|
||||||
|
}).concat(query.middleware);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// TODO: change to configureStore
|
|
||||||
const store = createStore(persistedReducer, composedEnhancer);
|
|
||||||
const persistor = persistStore(store);
|
const persistor = persistStore(store);
|
||||||
|
|
||||||
module.exports = { store, persistor };
|
module.exports = { store, persistor };
|
|
@ -19,7 +19,6 @@
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
const { createSlice } = require("@reduxjs/toolkit");
|
const { createSlice } = require("@reduxjs/toolkit");
|
||||||
const defaultValue = require("default-value");
|
|
||||||
|
|
||||||
function sortBlocks(blocks) {
|
function sortBlocks(blocks) {
|
||||||
return blocks.sort((a, b) => { // alphabetical sort
|
return blocks.sort((a, b) => { // alphabetical sort
|
||||||
|
@ -35,13 +34,6 @@ function emptyBlock() {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function emptyEmojiForm() {
|
|
||||||
return {
|
|
||||||
id: Date.now(),
|
|
||||||
shortcode: ""
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = createSlice({
|
module.exports = createSlice({
|
||||||
name: "admin",
|
name: "admin",
|
||||||
initialState: {
|
initialState: {
|
||||||
|
@ -52,10 +44,7 @@ module.exports = createSlice({
|
||||||
exportType: "plain",
|
exportType: "plain",
|
||||||
...emptyBlock()
|
...emptyBlock()
|
||||||
},
|
},
|
||||||
newInstanceBlocks: {},
|
newInstanceBlocks: {}
|
||||||
emoji: {},
|
|
||||||
emojiById: {},
|
|
||||||
newEmoji: emptyEmojiForm()
|
|
||||||
},
|
},
|
||||||
reducers: {
|
reducers: {
|
||||||
setBlockedInstances: (state, { payload }) => {
|
setBlockedInstances: (state, { payload }) => {
|
||||||
|
@ -105,34 +94,6 @@ module.exports = createSlice({
|
||||||
state.bulkBlock.list = Object.values(state.blockedInstances).map((entry) => {
|
state.bulkBlock.list = Object.values(state.blockedInstances).map((entry) => {
|
||||||
return entry.domain;
|
return entry.domain;
|
||||||
}).join("\n");
|
}).join("\n");
|
||||||
},
|
|
||||||
|
|
||||||
setEmoji: (state, {payload}) => {
|
|
||||||
state.emoji = {};
|
|
||||||
payload.forEach((emoji) => {
|
|
||||||
if (emoji.category == undefined) {
|
|
||||||
emoji.category = "Unsorted";
|
|
||||||
}
|
}
|
||||||
state.emoji[emoji.category] = defaultValue(state.emoji[emoji.category], []);
|
|
||||||
state.emoji[emoji.category].push(emoji);
|
|
||||||
state.emojiById[emoji.id] = emoji;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
updateNewEmojiVal: (state, { payload: [key, val] }) => {
|
|
||||||
state.newEmoji[key] = val;
|
|
||||||
},
|
|
||||||
|
|
||||||
addEmoji: (state, {payload: emoji}) => {
|
|
||||||
if (emoji.category == undefined) {
|
|
||||||
emoji.category = "Unsorted";
|
|
||||||
}
|
|
||||||
if (emoji.id == undefined) {
|
|
||||||
emoji.id = Date.now();
|
|
||||||
}
|
|
||||||
state.emoji[emoji.category] = defaultValue(state.emoji[emoji.category], []);
|
|
||||||
state.emoji[emoji.category].push(emoji);
|
|
||||||
state.emojiById[emoji.id] = emoji;
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
});
|
});
|
|
@ -283,6 +283,12 @@ section.with-sidebar > div {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.form-flex {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.file-upload > div {
|
.file-upload > div {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
|
@ -330,19 +336,6 @@ section.with-sidebar > div {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
div.form-field {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
span {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
padding: 0.3rem 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
|
@ -363,6 +356,20 @@ section.with-sidebar > div {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.form-field.file {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
span.form-info {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 0.3rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
@ -18,7 +18,6 @@
|
||||||
|
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
const Promise = require("bluebird");
|
|
||||||
const React = require("react");
|
const React = require("react");
|
||||||
const Redux = require("react-redux");
|
const Redux = require("react-redux");
|
||||||
|
|
||||||
|
|
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue