rename commentserver files

This commit is contained in:
zeppi 2022-02-03 10:13:54 -05:00 committed by jessopb
parent 6b37fd2eae
commit cbc3624664
5 changed files with 22 additions and 21 deletions

View file

@ -18,14 +18,17 @@ type Props = {
[ https://myserver.com:50001 x (selected)] [ https://myserver.com:50001 x (selected)]
*/ */
const ItemPanel = (props: Props) => { const InputTogglePanel = (props: Props) => {
const { onClick, active, serverDetails, onRemove } = props; const { onClick, active, serverDetails, onRemove } = props;
return ( return (
<div onClick={() => onClick(serverDetails)} className={classnames('itemPanel', { 'itemPanel--active': active })}> <div
<div className={'itemPanel__details'}> onClick={() => onClick(serverDetails)}
<div className={'itemPanel__name'}>{`${serverDetails.name}`}</div> className={classnames('input-toggle-panel', { 'input-toggle-panel--active': active })}
<div className={'itemPanel__url'}>{`${serverDetails.url}`}</div> >
<div className={'input-toggle-panel__details'}>
<div className={'input-toggle-panel__name'}>{`${serverDetails.name}`}</div>
<div className={'input-toggle-panel__url'}>{`${serverDetails.url}`}</div>
</div> </div>
{onRemove && ( {onRemove && (
<Button <Button
@ -40,4 +43,4 @@ const ItemPanel = (props: Props) => {
); );
}; };
export default ItemPanel; export default InputTogglePanel;

View file

@ -21,11 +21,9 @@ const isValidServerString = (serverString) => {
const si = serverString.indexOf('/'); const si = serverString.indexOf('/');
const pi = serverString.indexOf(':'); const pi = serverString.indexOf(':');
const path = si === -1 ? '' : serverString.slice(si); const path = si === -1 ? '' : serverString.slice(si);
console.log('path', path);
const hostMaybePort = si === -1 ? serverString : serverString.slice(0, si); const hostMaybePort = si === -1 ? serverString : serverString.slice(0, si);
const host = pi === -1 ? hostMaybePort : hostMaybePort.slice(0, pi); const host = pi === -1 ? hostMaybePort : hostMaybePort.slice(0, pi);
const port = pi === -1 ? '' : hostMaybePort.slice(pi + 1); const port = pi === -1 ? '' : hostMaybePort.slice(pi + 1);
console.log('port', port);
const portInt = parseInt(port); const portInt = parseInt(port);
return ( return (
@ -61,7 +59,7 @@ function ServerInputRow(props: Props) {
return ( return (
<Form onSubmit={onSubmit}> <Form onSubmit={onSubmit}>
<div className="itemPanel--input"> <div className="input-toggle-panel--input">
<FormField <FormField
type="text" type="text"
label={__('Name')} label={__('Name')}
@ -83,7 +81,7 @@ function ServerInputRow(props: Props) {
/> />
</div> </div>
</div> </div>
<div className="itemPanel--input"> <div className="input-toggle-panel--input">
<FormField <FormField
label={'Use https'} label={'Use https'}
name="use_https" name="use_https"

View file

@ -2,8 +2,8 @@
import { COMMENT_SERVER_API } from 'config'; // COMMENT_SERVER_NAME, import { COMMENT_SERVER_API } from 'config'; // COMMENT_SERVER_NAME,
import React from 'react'; import React from 'react';
import Comments from 'comments'; import Comments from 'comments';
import ItemPanel from 'component/common/item-panel'; import InputTogglePanel from 'component/common/input-radio-panel';
import ItemInputRow from 'component/common/item-panel-input-row'; import ItemInputRow from './internal/input-radio-panel-addCommentServer';
import Button from 'component/button'; import Button from 'component/button';
type Props = { type Props = {
@ -64,10 +64,10 @@ function SettingCommentsServer(props: Props) {
return ( return (
<React.Fragment> <React.Fragment>
<div className={'fieldset-section'}> <div className={'fieldset-section'}>
<ItemPanel onClick={handleSelectServer} active={!customServerEnabled} serverDetails={defaultServer} /> <InputTogglePanel onClick={handleSelectServer} active={!customServerEnabled} serverDetails={defaultServer} />
{!!customCommentServers.length && <label>{__('Custom Servers')}</label>} {!!customCommentServers.length && <label>{__('Custom Servers')}</label>}
{customCommentServers.map((server) => ( {customCommentServers.map((server) => (
<ItemPanel <InputTogglePanel
key={server.url} key={server.url}
active={customServerEnabled && customServerUrl === server.url} active={customServerEnabled && customServerUrl === server.url}
onClick={handleSelectServer} onClick={handleSelectServer}

View file

@ -68,4 +68,4 @@
@import 'component/wallet-tip-send'; @import 'component/wallet-tip-send';
@import 'component/swipe-list'; @import 'component/swipe-list';
@import 'component/utils'; @import 'component/utils';
@import 'component/item-panel'; @import 'component/input-radio-panel';

View file

@ -1,4 +1,4 @@
.itemPanel { .input-toggle-panel {
padding: var(--spacing-m); padding: var(--spacing-m);
margin-bottom: var(--spacing-m); margin-bottom: var(--spacing-m);
width: 100%; width: 100%;
@ -16,7 +16,7 @@
} }
} }
.itemPanel__details { .input-toggle-panel__details {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
@ -24,20 +24,20 @@
flex-direction: column; flex-direction: column;
} }
} }
.itemPanel__name { .input-toggle-panel__name {
min-width: 100px; min-width: 100px;
width: 100px; width: 100px;
} }
.itemPanel__url { .input-toggle-panel__url {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.itemPanel--active { .input-toggle-panel--active {
color: var(--color-button-toggle-text); color: var(--color-button-toggle-text);
background-color: var(--color-button-toggle-bg); background-color: var(--color-button-toggle-bg);
} }
.itemPanel--input { .input-toggle-panel--input {
min-height: var(--spacing-l); min-height: var(--spacing-l);
padding: 0 0 var(--spacing-s) 0; padding: 0 0 var(--spacing-s) 0;
fieldset-section, fieldset-section,