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

Move theme helpers and some stylesheets to proper locations

Browse Source
This commit is contained in:
Alejandro Celaya
2023-08-05 11:14:03 +02:00
parent 93048e3327
commit d9939f5c3a
48 changed files with 64 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
shlink-web-component/src/Main.tsx
View File

@@ -9,6 +9,7 @@ import { AsideMenu } from './common/AsideMenu';
import { useFeature } from './utils/features';
import { useSwipeable } from './utils/helpers/hooks';
import { useRoutesPrefix } from './utils/routesPrefix';
import './utils/StickyCardPaginator.scss';
export type MainProps = {
createNotFound?: (nonPrefixedHomePath: string) => ReactNode;

4
shlink-web-component/src/common/AsideMenu.scss
View File

@@ -1,5 +1,5 @@
@import '../../../src/utils/base';
@import '../../../src/utils/mixins/vertical-align';
@import '@shlinkio/shlink-frontend-kit/base';
@import '../utils/mixins/vertical-align';
.aside-menu {
width: $asideMenuWidth;

4
shlink-web-component/src/domains/DomainSelector.scss
View File

@@ -1,5 +1,5 @@
@import '../../../src/utils/base';
@import '../../../src/utils/mixins/vertical-align';
@import '@shlinkio/shlink-frontend-kit/base';
@import '../utils/mixins/vertical-align';
.domains-dropdown__toggle-btn.domains-dropdown__toggle-btn,
.domains-dropdown__toggle-btn.domains-dropdown__toggle-btn:hover,

2
shlink-web-component/src/overview/helpers/HighlightCard.scss
View File

@@ -1,4 +1,4 @@
@import '../../../../src/utils/base';
@import '@shlinkio/shlink-frontend-kit/base';
.highlight-card.highlight-card {
text-align: center;

2
shlink-web-component/src/short-urls/ShortUrlForm.scss
View File

@@ -1,4 +1,4 @@
@import '../../../src/utils/base';
@import '@shlinkio/shlink-frontend-kit/base';
.short-url-form p:last-child {
margin-bottom: 0;

11
shlink-web-component/src/short-urls/helpers/ShortUrlsRow.scss
View File

@@ -1,6 +1,11 @@
@import '../../../../src/utils/base';
@import '../../../../src/utils/mixins/text-ellipsis';
@import '../../../../src/utils/mixins/vertical-align';
@import '@shlinkio/shlink-frontend-kit/base';
@import '../../utils/mixins/vertical-align';
@mixin text-ellipsis() {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.short-urls-row__cell.short-urls-row__cell {
vertical-align: middle !important;

4
shlink-web-component/src/tags/TagsTable.scss
View File

@@ -1,5 +1,5 @@
@import '../../../src/utils/base';
@import '../../../src/utils/mixins/sticky-cell';
@import '@shlinkio/shlink-frontend-kit/base';
@import '../utils/mixins/sticky-cell';
.tags-table__header-cell.tags-table__header-cell {
@include sticky-cell(false);

7
shlink-web-component/src/utils/StickyCardPaginator.scss Normal file
View File

@@ -0,0 +1,7 @@
.sticky-card-paginator {
position: sticky;
bottom: 0;
background-color: var(--primary-color-alfa);
padding: .75rem 0;
border-top: 1px solid var(--border-color);
}

4
shlink-web-component/src/utils/components/IconInput.scss
View File

@@ -1,5 +1,5 @@
@import '../../../../src/utils/mixins/vertical-align';
@import '../../../../src/utils/base';
@import '../mixins/vertical-align';
@import '@shlinkio/shlink-frontend-kit/base';
.icon-input-container {
position: relative;

4
shlink-web-component/src/utils/dates/DateInput.scss
View File

@@ -1,5 +1,5 @@
@import '../../../../src/utils/mixins/vertical-align';
@import '../../../../src/utils/base';
@import '../mixins/vertical-align';
@import '@shlinkio/shlink-frontend-kit/base';
.react-datepicker__close-icon.react-datepicker__close-icon {
@include vertical-align();

8
shlink-web-component/src/utils/mixins/fit-with-margin.scss Normal file
View File

@@ -0,0 +1,8 @@
@mixin fit-with-margin($margin) {
$offset: $margin * 2;
width: calc(100% - #{$offset});
max-width: calc(100% - #{$offset});
height: calc(100% - #{$offset});
margin: $margin;
}

36
shlink-web-component/src/utils/mixins/sticky-cell.scss Normal file
View File

@@ -0,0 +1,36 @@
@import '@shlinkio/shlink-frontend-kit/base';
@mixin sticky-cell($with-separators: true) {
z-index: 1;
position: relative;
&:before {
content: '';
position: absolute;
top: -1px;
left: 0;
bottom: -1px;
right: if($with-separators, -1px, 0);
background: var(--table-border-color);
z-index: -2;
}
&:first-child:before {
left: if($with-separators, -1px, 0);
}
&:after {
content: '';
position: absolute;
top: 0;
left: if($with-separators, 1px, 0);
bottom: 0;
right: 0;
background: var(--primary-color);
z-index: -1;
}
&:first-child:after {
left: 0;
}
}

5
shlink-web-component/src/utils/mixins/vertical-align.scss Normal file
View File

@@ -0,0 +1,5 @@
@mixin vertical-align($extraTransforms: null) {
position: absolute;
top: 50%;
transform: translateY(-50%) $extraTransforms;
}

2
shlink-web-component/src/utils/settings.ts
View File

@@ -1,5 +1,5 @@
import type { Theme } from '@shlinkio/shlink-frontend-kit';
import { createContext, useContext } from 'react';
import type { Theme } from '../../../src/utils/theme';
import type { ShortUrlsOrder } from '../short-urls/data';
import type { TagsOrder } from '../tags/data/TagsListChildrenProps';
import type { DateInterval } from './dates/helpers/dateIntervals';

4
shlink-web-component/src/visits/VisitsTable.scss
View File

@@ -1,5 +1,5 @@
@import '../../../src/utils/base';
@import '../../../src/utils/mixins/sticky-cell';
@import '@shlinkio/shlink-frontend-kit/base';
@import '../utils/mixins/sticky-cell';
.visits-table {
margin: 1.5rem 0 0;

2
shlink-web-component/src/visits/charts/DoughnutChart.tsx
View File

@@ -1,9 +1,9 @@
import { isDarkThemeEnabled, PRIMARY_DARK_COLOR, PRIMARY_LIGHT_COLOR } from '@shlinkio/shlink-frontend-kit';
import type { Chart, ChartData, ChartDataset, ChartOptions } from 'chart.js';
import { keys, values } from 'ramda';
import type { FC } from 'react';
import { memo, useState } from 'react';
import { Doughnut } from 'react-chartjs-2';
import { isDarkThemeEnabled, PRIMARY_DARK_COLOR, PRIMARY_LIGHT_COLOR } from '../../../../src/utils/theme';
import { renderPieChartLabel } from '../../utils/helpers/charts';
import type { Stats } from '../types';
import { DoughnutChartLegend } from './DoughnutChartLegend';

2
shlink-web-component/src/visits/charts/DoughnutChartLegend.scss
View File

@@ -1,4 +1,4 @@
@import '../../../../src/utils/base';
@import '@shlinkio/shlink-frontend-kit/base';
.doughnut-chart-legend {
list-style-type: none;

2
shlink-web-component/src/visits/charts/HorizontalBarChart.tsx
View File

@@ -1,9 +1,9 @@
import { HIGHLIGHTED_COLOR, HIGHLIGHTED_COLOR_ALPHA, MAIN_COLOR, MAIN_COLOR_ALPHA } from '@shlinkio/shlink-frontend-kit';
import type { ChartData, ChartDataset, ChartOptions, InteractionItem } from 'chart.js';
import { keys, values } from 'ramda';
import type { FC, MutableRefObject } from 'react';
import { useRef } from 'react';
import { Bar, getElementAtEvent } from 'react-chartjs-2';
import { HIGHLIGHTED_COLOR, HIGHLIGHTED_COLOR_ALPHA, MAIN_COLOR, MAIN_COLOR_ALPHA } from '../../../../src/utils/theme';
import { pointerOnHover, renderChartLabel } from '../../utils/helpers/charts';
import { prettify } from '../../utils/helpers/numbers';
import type { Stats } from '../types';

2
shlink-web-component/src/visits/charts/LineChartCard.scss
View File

@@ -1,4 +1,4 @@
@import '../../../../src/utils/base';
@import '@shlinkio/shlink-frontend-kit/base';
.line-chart-card__body canvas {
height: 300px !important;

3
shlink-web-component/src/visits/charts/LineChartCard.tsx
View File

@@ -1,4 +1,4 @@
import { ToggleSwitch, useToggle } from '@shlinkio/shlink-frontend-kit';
import { HIGHLIGHTED_COLOR, MAIN_COLOR, ToggleSwitch, useToggle } from '@shlinkio/shlink-frontend-kit';
import type { ChartData, ChartDataset, ChartOptions, InteractionItem } from 'chart.js';
import {
add,
@@ -24,7 +24,6 @@ import {
DropdownToggle,
UncontrolledDropdown,
} from 'reactstrap';
import { HIGHLIGHTED_COLOR, MAIN_COLOR } from '../../../../src/utils/theme';
import { formatInternational } from '../../utils/dates/helpers/date';
import { rangeOf } from '../../utils/helpers';
import { pointerOnHover, renderChartLabel } from '../../utils/helpers/charts';

4
shlink-web-component/src/visits/helpers/MapModal.scss
View File

@@ -1,5 +1,5 @@
@import '../../../../src/utils/base';
@import '../../../../src/utils/mixins/fit-with-margin';
@import '@shlinkio/shlink-frontend-kit/base';
@import '../../utils/mixins/fit-with-margin';
.map-modal__modal.map-modal__modal {
@media (min-width: $mdMin) {