forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-13 19:13:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed short URL creation and modal close buttons

Browse Source
This commit is contained in:
Alejandro Celaya
2022-03-06 11:16:31 +01:00
parent 6a739b7a25
commit 27e3b6f0d0
6 changed files with 22 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/index.scss
View File

@@ -153,6 +153,10 @@ hr {
color: var(--text-color); color: var(--text-color);
} }
.btn-close {
filter: var(--btn-close-filter);
}
.table-hover tbody tr:hover { .table-hover tbody tr:hover {
background-color: var(--secondary-color); background-color: var(--secondary-color);
} }

5
src/servers/helpers/ServerForm.scss
View File

@@ -1,5 +0,0 @@
@import '../../utils/base';
.server-form .form-group:last-child {
margin-bottom: 0;
}

1
src/servers/helpers/ServerForm.tsx
View File

@@ -3,7 +3,6 @@ import { InputFormGroup } from '../../utils/forms/InputFormGroup';
import { handleEventPreventingDefault } from '../../utils/utils'; import { handleEventPreventingDefault } from '../../utils/utils';
import { ServerData } from '../data'; import { ServerData } from '../data';
import { SimpleCard } from '../../utils/SimpleCard'; import { SimpleCard } from '../../utils/SimpleCard';
import './ServerForm.scss';
interface ServerFormProps { interface ServerFormProps {
onSubmit: (server: ServerData) => void; onSubmit: (server: ServerData) => void;

1
src/short-urls/ShortUrlForm.scss
View File

@@ -1,6 +1,5 @@
@import '../utils/base'; @import '../utils/base';
.short-url-form .card-body > .form-group:last-child,
.short-url-form p:last-child { .short-url-form p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }

34
src/short-urls/ShortUrlForm.tsx
View File

@@ -86,15 +86,13 @@ export const ShortUrlForm = (
</FormGroup> </FormGroup>
); );
const renderDateInput = (id: DateFields, placeholder: string, props: Partial<DateInputProps> = {}) => ( const renderDateInput = (id: DateFields, placeholder: string, props: Partial<DateInputProps> = {}) => (
<div className="form-group"> <DateInput
<DateInput selected={shortUrlData[id] ? toDate(shortUrlData[id] as string | Date) : null}
selected={shortUrlData[id] ? toDate(shortUrlData[id] as string | Date) : null} placeholderText={placeholder}
placeholderText={placeholder} isClearable
isClearable onChange={(date) => setShortUrlData({ ...shortUrlData, [id]: date })}
onChange={(date) => setShortUrlData({ ...shortUrlData, [id]: date })} {...props}
{...props} />
/>
</div>
); );
const basicComponents = ( const basicComponents = (
<> <>
@@ -110,9 +108,9 @@ export const ShortUrlForm = (
</FormGroup> </FormGroup>
<Row> <Row>
{isBasicMode && renderOptionalInput('customSlug', 'Custom slug', 'text', { bsSize: 'lg' }, { className: 'col-lg-6' })} {isBasicMode && renderOptionalInput('customSlug', 'Custom slug', 'text', { bsSize: 'lg' }, { className: 'col-lg-6' })}
<FormGroup className={isBasicMode ? 'col-lg-6' : 'col-12 mb-0'}> <div className={isBasicMode ? 'col-lg-6' : 'col-12 mb-0'}>
<TagsSelector selectedTags={shortUrlData.tags ?? []} onChange={changeTags} /> <TagsSelector selectedTags={shortUrlData.tags ?? []} onChange={changeTags} />
</FormGroup> </div>
</Row> </Row>
</> </>
); );
@@ -154,12 +152,10 @@ export const ShortUrlForm = (
})} })}
</div> </div>
</Row> </Row>
<FormGroup> <DomainSelector
<DomainSelector value={shortUrlData.domain}
value={shortUrlData.domain} onChange={(domain?: string) => setShortUrlData({ ...shortUrlData, domain })}
onChange={(domain?: string) => setShortUrlData({ ...shortUrlData, domain })} />
/>
</FormGroup>
</> </>
)} )}
</SimpleCard> </SimpleCard>
@@ -169,7 +165,9 @@ export const ShortUrlForm = (
<div className={limitAccessCardClasses}> <div className={limitAccessCardClasses}>
<SimpleCard title="Limit access to the short URL"> <SimpleCard title="Limit access to the short URL">
{renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })} {renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
{renderDateInput('validSince', 'Enabled since...', { maxDate: shortUrlData.validUntil ? toDate(shortUrlData.validUntil) : undefined })} <div className="mb-3">
{renderDateInput('validSince', 'Enabled since...', { maxDate: shortUrlData.validUntil ? toDate(shortUrlData.validUntil) : undefined })}
</div>
{renderDateInput('validUntil', 'Enabled until...', { minDate: shortUrlData.validSince ? toDate(shortUrlData.validSince) : undefined })} {renderDateInput('validUntil', 'Enabled until...', { minDate: shortUrlData.validSince ? toDate(shortUrlData.validSince) : undefined })}
</SimpleCard> </SimpleCard>
</div> </div>

2
src/theme/theme.scss
View File

@@ -44,6 +44,7 @@ html:not([data-theme='dark']) {
--input-text-color: #{$lightInputTextColor}; --input-text-color: #{$lightInputTextColor};
--table-border-color: #{$lightTableBorderColor}; --table-border-color: #{$lightTableBorderColor};
--table-highlight-color: #{$lightTableHighlightColor}; --table-highlight-color: #{$lightTableHighlightColor};
--btn-close-filter: initial;
} }
html[data-theme='dark'] { html[data-theme='dark'] {
@@ -60,4 +61,5 @@ html[data-theme='dark'] {
--input-text-color: #{$darkInputTextColor}; --input-text-color: #{$darkInputTextColor};
--table-border-color: #{$darkTableBorderColor}; --table-border-color: #{$darkTableBorderColor};
--table-highlight-color: #{$darkTableHighlightColor}; --table-highlight-color: #{$darkTableHighlightColor};
--btn-close-filter: invert(1);
} }