github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(ui/buttons): set hyperlink style [EE-4007] (#7524)

pull/7563/head
Chaim Lev-Ari 2022-08-24 07:40:50 +03:00 committed by GitHub
parent 87214d48be
commit 234627f278
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 139 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/css/app.css
View File

@ -117,10 +117,6 @@ input[type='checkbox'] {
text-align: center;
}
a[ng-click] {
cursor: pointer;
}
.space-right {
margin-right: 5px;
}

85
app/assets/css/button.css
View File

@ -25,14 +25,14 @@ fieldset[disabled] .btn {
box-shadow: none;
}
.btn-primary {
.btn.btn-primary {
@apply text-white bg-blue-8 border-blue-8;
@apply hover:text-white hover:bg-blue-9 hover:border-blue-9;
@apply th-dark:hover:bg-blue-7 th-dark:hover:border-blue-7;
}
.btn-primary:active,
.btn-primary.active,
.btn.btn-primary:active,
.btn.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
@apply bg-blue-9 border-blue-5;
}
@ -44,7 +44,7 @@ fieldset[disabled] .btn {
}
/* Button Secondary */
.btn-secondary {
.btn.btn-secondary {
@apply border border-solid;
@apply text-blue-9 bg-blue-2 border-blue-8;
@ -54,18 +54,18 @@ fieldset[disabled] .btn {
@apply th-dark:hover:bg-blue-11;
}
.btn-danger {
.btn.btn-danger {
@apply bg-error-8 border-error-8;
@apply hover:bg-error-7 hover:border-error-7 hover:text-white;
}
.btn-danger:active,
.btn-danger.active,
.btn.btn-danger:active,
.btn.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
@apply bg-error-8 text-white border-blue-5;
}
.btn-dangerlight {
.btn.btn-dangerlight {
@apply text-error-9 th-dark:text-white;
@apply bg-error-3 th-dark:bg-error-9;
@apply hover:bg-error-2 th-dark:hover:bg-error-11;
@ -73,18 +73,18 @@ fieldset[disabled] .btn {
@apply border border-solid;
}
.btn-success {
.btn.btn-success {
background-color: var(--ui-success-7);
}
.btn-success:hover {
.btn.btn-success:hover {
color: var(--white-color);
}
/* secondary-grey */
.btn-default,
.btn-light {
@apply bg-gray-2 border-gray-5 text-gray-9;
.btn.btn-default,
.btn.btn-light {
@apply bg-white border-gray-5 text-gray-9;
@apply hover:bg-gray-3 hover:border-gray-5 hover:text-gray-10;
/* dark mode */
@ -95,28 +95,18 @@ fieldset[disabled] .btn {
@apply th-highcontrast:hover:bg-gray-9 th-highcontrast:hover:border-gray-6 th-highcontrast:hover:text-gray-warm-4;
}
.btn-light:active,
.btn-light.active,
.btn.btn-light:active,
.btn.btn-light.active,
.open > .dropdown-toggle.btn-light {
background-color: var(--ui-gray-3);
}
.btn-link {
.btn.btn-link {
@apply text-blue-8 hover:text-blue-9 disabled:text-gray-5;
@apply th-dark:text-blue-8 th-dark:hover:text-blue-7;
@apply th-highcontrast:text-blue-8 th-highcontrast:hover:text-blue-7;
}
.hyperlink,
.hyperlink:focus {
color: var(--ui-blue-8);
}
.hyperlink:hover {
text-decoration: underline;
color: var(--ui-blue-9);
}
.btn-group {
display: inline-flex;
}
@ -129,30 +119,43 @@ fieldset[disabled] .btn {
/* focus */
.btn-primary:focus,
.btn-secondary:focus,
.btn-light:focus {
.btn.btn-primary:focus,
.btn.btn-secondary:focus,
.btn.btn-light:focus {
@apply border-blue-5;
}
.btn-danger:focus,
.btn-dangerlight:focus {
.btn.btn-danger:focus,
.btn.btn-dangerlight:focus {
@apply border-blue-6;
}
.btn-primary:focus,
.btn-secondary:focus,
.btn-light:focus,
.btn-danger:focus,
.btn-dangerlight:focus {
.btn.btn-primary:focus,
.btn.btn-secondary:focus,
.btn.btn-light:focus,
.btn.btn-danger:focus,
.btn.btn-dangerlight:focus {
--btn-focus-color: var(--ui-blue-3);
box-shadow: 0px 0px 0px 4px var(--btn-focus-color);
}
[theme='dark'] .btn-primary:focus,
[theme='dark'] .btn-secondary:focus,
[theme='dark'] .btn-light:focus,
[theme='dark'] .btn-danger:focus,
[theme='dark'] .btn-dangerlight:focus {
[theme='dark'] .btn.btn-primary:focus,
[theme='dark'] .btn.btn-secondary:focus,
[theme='dark'] .btn.btn-light:focus,
[theme='dark'] .btn.btn-danger:focus,
[theme='dark'] .btn.btn-dangerlight:focus {
--btn-focus-color: var(--ui-blue-11);
}
a.no-link,
a[ng-click] {
@apply text-current;
@apply hover:no-underline hover:text-current;
@apply focus:no-underline focus:text-current;
}
a,
a.hyperlink {
@apply text-blue-8 hover:text-blue-9;
@apply hover:underline cursor-pointer;
}

11
app/assets/css/vendor-override.css
View File

@ -31,17 +31,6 @@
border-top: 1px solid var(--border-table-top-color);
}
a {
color: inherit;
cursor: pointer;
}
a:hover,
a:focus {
color: inherit;
text-decoration: none;
}
.input-group-addon {
color: var(--text-input-group-addon-color);
background-color: var(--bg-input-group-addon-color);

4
app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html
View File

@ -50,9 +50,9 @@
ng-click="$ctrl.expandItem(value, !value.Expanded)"
>
<td>
<a ng-if="$ctrl.itemCanExpand(value)">
<button class="btn btn-none" ng-if="$ctrl.itemCanExpand(value)" type="button">
<i ng-class="{ 'fas fa-angle-down': value.Expanded, 'fas fa-angle-right': !value.Expanded }" class="space-right" aria-hidden="true"></i>
</a>
</button>
<a ui-sref="docker.networks.network({ id: key, nodeName: $ctrl.nodeName })">{{ key }}</a>
</td>
<td>{{ value.IPAddress || '-' }}</td>

71
app/docker/components/datatables/images-datatable/imagesDatatable.html
View File

@ -127,15 +127,20 @@
<thead>
<tr>
<th uib-dropdown dropdown-append-to-body auto-close="disabled" popover-placement="bottom-left" is-open="$ctrl.filters.state.open">
<span class="md-checkbox" ng-if="!$ctrl.offlineMode">
<input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
<label for="select_all"></label>
</span>
<a ng-click="$ctrl.changeOrderBy('Id')">
Id
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Id' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Id' && $ctrl.state.reverseOrder"></i>
</a>
<div class="flex gap-1 items-center">
<span class="md-checkbox" ng-if="!$ctrl.offlineMode">
<input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
<label for="select_all"></label>
</span>
<table-column-header
col-title="'Id'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Id'"
is-sorted-desc="$ctrl.state.orderBy === 'Id' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Id')"
></table-column-header>
</div>
<div>
<span uib-dropdown-toggle class="table-filter" ng-if="!$ctrl.filters.state.enabled">Filter <i class="fa fa-filter" aria-hidden="true"></i></span>
<span uib-dropdown-toggle class="table-filter filter-active" ng-if="$ctrl.filters.state.enabled">Filter <i class="fa fa-check" aria-hidden="true"></i></span>
@ -160,32 +165,40 @@
</div>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('RepoTags')">
Tags
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'RepoTags' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'RepoTags' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'Tags'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'RepoTags'"
is-sorted-desc="$ctrl.state.orderBy === 'RepoTags' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('RepoTags')"
></table-column-header>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('VirtualSize')">
Size
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'VirtualSize' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'VirtualSize' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'Size'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'VirtualSize'"
is-sorted-desc="$ctrl.state.orderBy === 'VirtualSize' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('VirtualSize')"
></table-column-header>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('Created')">
Created
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Created' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Created' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'Created'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Created'"
is-sorted-desc="$ctrl.state.orderBy === 'Created' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Created')"
></table-column-header>
</th>
<th ng-if="$ctrl.showHostColumn">
<a ng-click="$ctrl.changeOrderBy('NodeName')">
Host
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'NodeName' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'NodeName' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'Host'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'NodeName'"
is-sorted-desc="$ctrl.state.orderBy === 'NodeName' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('NodeName')"
></table-column-header>
</th>
</tr>
</thead>

2
app/docker/components/datatables/services-datatable/servicesDatatable.html
View File

@ -156,7 +156,7 @@
<input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event); $event.stopPropagation()" />
<label for="select_{{ $index }}"></label>
</span>
<a><i ng-class="{ 'fas fa-angle-down': item.Expanded, 'fas fa-angle-right': !item.Expanded }" class="space-right" aria-hidden="true"></i></a>
<i ng-class="{ 'fas fa-angle-down': item.Expanded, 'fas fa-angle-right': !item.Expanded }" class="space-right" aria-hidden="true"></i>
</td>
<td>
<a ui-sref="docker.services.service({id: item.Id})" ng-click="$event.stopPropagation()">{{ item.Name }}</a>

16
app/docker/components/datatables/volumes-datatable/volumesDatatable.html
View File

@ -190,11 +190,17 @@
item.Id | truncate: 40
}}</a>
<span ng-if="$ctrl.offlineMode">{{ item.Id | truncate: 40 }}</span>
<btn authorization="DockerAgentBrowseList" ng-if="$ctrl.showBrowseAction && !$ctrl.offlineMode">
<a ui-sref="docker.volumes.volume.browse({ id: item.Id, nodeName: item.NodeName })" class="btn btn-xs btn-primary space-left">
<pr-icon icon="'search'" feather="true"></pr-icon> browse
</a>
</btn>
<button
ng-if="$ctrl.showBrowseAction && !$ctrl.offlineMode"
type="button"
ui-sref="docker.volumes.volume.browse({ id: item.Id, nodeName: item.NodeName })"
class="btn btn-xs btn-primary space-left"
authorization="DockerAgentBrowseList"
>
<pr-icon icon="'search'" feather="true"></pr-icon> browse
</button>
<span style="margin-left: 10px" class="label label-warning image-tag space-left" ng-if="item.dangling">Unused</span>
</td>
<td>{{ item.StackName ? item.StackName : '-' }}</td>

14
app/docker/views/dashboard/dashboard.html
View File

@ -77,29 +77,29 @@
</div>
<div class="dashboard-grid mx-4">
<a ui-sref="docker.stacks" ng-if="showStacks">
<dashboard-item feather-icon="true" icon="'layers'" feather-icon="true" type="'Stack'" value="stackCount"></dashboard-item>
<a class="no-link" ui-sref="docker.stacks" ng-if="showStacks">
<dashboard-item feather-icon="true" icon="'layers'" type="'Stack'" value="stackCount"></dashboard-item>
</a>
<div ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE' && applicationState.endpoint.mode.role === 'MANAGER'">
<a ui-sref="docker.services">
<a class="no-link" ui-sref="docker.services">
<dashboard-item feather-icon="true" icon="'shuffle'" type="'Service'" value="serviceCount"></dashboard-item>
</a>
</div>
<a ng-if="containers" ui-sref="docker.containers">
<a class="no-link" ng-if="containers" ui-sref="docker.containers">
<dashboard-item feather-icon="true" icon="'box'" type="'Container'" value="containers.length" children="containerStatusComponent"></dashboard-item>
</a>
<a ng-if="images" ui-sref="docker.images">
<a class="no-link" ng-if="images" ui-sref="docker.images">
<dashboard-item feather-icon="true" icon="'list'" type="'Image'" value="images.length" children="imagesTotalSizeComponent"></dashboard-item>
</a>
<a ui-sref="docker.volumes">
<a class="no-link" ui-sref="docker.volumes">
<dashboard-item feather-icon="true" icon="'database'" type="'Volume'" value="volumeCount"></dashboard-item>
</a>
<a ui-sref="docker.networks">
<a class="no-link" ui-sref="docker.networks">
<dashboard-item feather-icon="true" icon="'share2'" type="'Network'" value="networkCount"></dashboard-item>
</a>

7
app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html
View File

@ -238,13 +238,18 @@
</div>
</td>
<td>
<a ng-if="item.KubernetesApplications" ui-sref="kubernetes.helm({ name: item.Name, namespace: item.ResourcePool })" ng-click="$event.stopPropagation()"
<a
ng-if="item.KubernetesApplications"
ui-sref="kubernetes.helm({ name: item.Name, namespace: item.ResourcePool })"
ng-click="$event.stopPropagation()"
class="hyperlink"
>{{ item.Name }}
</a>
<a
ng-if="!item.KubernetesApplications"
ui-sref="kubernetes.applications.application({ name: item.Name, namespace: item.ResourcePool })"
ng-click="$event.stopPropagation()"
class="hyperlink"
>{{ item.Name }}
</a>
<span class="label label-info image-tag label-margins" ng-if="$ctrl.isSystemNamespace(item)">system</span>

14
app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
View File

@ -3,14 +3,12 @@
<div class="form-group" ng-if="$ctrl.isCreation">
<div class="col-sm-12">
<p>
<a class="small interactive vertical-center" ng-if="$ctrl.formValues.IsSimple" ng-click="$ctrl.showAdvancedMode()">
<pr-icon icon="'list'" feather="true"></pr-icon> Advanced mode
</a>
<a class="small interactive vertical-center" ng-if="!$ctrl.formValues.IsSimple" ng-click="$ctrl.showSimpleMode()">
<pr-icon icon="'edit'" feather="true"></pr-icon> Simple mode
</a>
</p>
<button type="button" class="btn btn-link btn-sm hover:no-underline !ml-0 p-0" ng-if="$ctrl.formValues.IsSimple" ng-click="$ctrl.showAdvancedMode()">
<pr-icon icon="'list'" feather="true"></pr-icon> Advanced mode
</button>
<button type="button" class="btn btn-link btn-sm hover:no-underline !ml-0 p-0" ng-if="!$ctrl.formValues.IsSimple" ng-click="$ctrl.showSimpleMode()">
<pr-icon icon="'edit'" feather="true"></pr-icon> Simple mode
</button>
</div>
<div class="col-sm-12 small text-muted vertical-center" ng-if="$ctrl.formValues.IsSimple">
<pr-icon icon="'info'" mode="'primary'" feather="true"></pr-icon>

8
app/kubernetes/views/dashboard/dashboard.html
View File

@ -40,23 +40,23 @@
<div class="dashboard-grid mx-4">
<div ng-if="ctrl.pools" data-cy="k8sDashboard-namespaces">
<a ui-sref="kubernetes.resourcePools">
<a class="no-link" ui-sref="kubernetes.resourcePools">
<dashboard-item feather-icon="true" icon="'layers'" type="'Namespace'" value="ctrl.pools.length"></dashboard-item>
</a>
</div>
<div ng-if="ctrl.applications" data-cy="k8sDashboard-applications">
<a ui-sref="kubernetes.applications">
<a class="no-link" ui-sref="kubernetes.applications">
<dashboard-item feather-icon="true" icon="'box'" type="'Application'" value="ctrl.applications.length"></dashboard-item>
</a>
</div>
<div ng-if="ctrl.configurations" data-cy="k8sDashboard-configurations">
<a ui-sref="kubernetes.configurations">
<a class="no-link" ui-sref="kubernetes.configurations">
<dashboard-item feather-icon="true" icon="'lock'" type="'ConfigMaps & Secret'" value="ctrl.configurations.length"></dashboard-item>
</a>
</div>
<div ng-if="ctrl.volumes" data-cy="k8sDashboard-volumes">
<a ui-sref="kubernetes.volumes">
<a class="no-link" ui-sref="kubernetes.volumes">
<dashboard-item feather-icon="true" icon="'database'" type="'Volume'" value="ctrl.volumes.length"></dashboard-item>
</a>
</div>

2
app/portainer/components/custom-template-selector/custom-template-selector.html
View File

@ -12,7 +12,7 @@
<option value="" label="Select a Custom template" disabled selected="selected"> </option>
</select>
<span class="small text-muted pt-[7px]" ng-if="!$ctrl.templates.length">
No custom templates are available. Head over to the <a class="hyperlink" ui-state="$ctrl.newTemplatePath">custom template view</a> to create one.
No custom templates are available. Head over to the <a ui-state="$ctrl.newTemplatePath">custom template view</a> to create one.
</span>
</div>
</div>

13
app/portainer/components/datatables/datatable.css
View File

@ -40,19 +40,6 @@
@apply text-blue-7;
}
.datatable tr > td a:not(.btn) {
color: var(--ui-blue-8);
}
.datatable tr > td a:not(.btn):hover,
.datatable tr > td a:not(.btn):focus {
text-decoration: underline;
}
.datatable tr > td a.actions {
color: currentColor;
}
.toolBar .actionBar {
display: inline-flex;
}

18
app/portainer/components/forms/registry-form-gitlab/registry-form-gitlab.html
View File

@ -48,14 +48,24 @@
<div class="form-group">
<div class="col-sm-12">
<a class="small interactive vertical-center" ng-if="!$ctrl.state.overrideConfiguration" ng-click="$ctrl.state.overrideConfiguration = true;">
<button
type="button"
class="btn btn-link btn-sm hover:no-underline !ml-0 p-0"
ng-if="!$ctrl.state.overrideConfiguration"
ng-click="$ctrl.state.overrideConfiguration = true;"
>
<pr-icon icon="'tool'" feather="true"></pr-icon>
Override default configuration
</a>
<a class="small interactive vertical-center" ng-if="$ctrl.state.overrideConfiguration" ng-click="$ctrl.state.overrideConfiguration = false; $ctrl.resetDefaults()">
</button>
<button
type="button"
class="btn btn-link btn-sm hover:no-underline !ml-0 p-0"
ng-if="$ctrl.state.overrideConfiguration"
ng-click="$ctrl.state.overrideConfiguration = false; $ctrl.resetDefaults()"
>
<pr-icon icon="'settings'" feather="true"></pr-icon>
Use default configuration
</a>
</button>
</div>
</div>

3
app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.tsx
View File

@ -46,12 +46,11 @@ export function EnvironmentItem({ environment, onClick, groupName }: Props) {
<div className={styles.root}>
<button
type="button"
color="link"
onClick={() => onClick(environment)}
className={styles.wrapperButton}
>
<Link
className={clsx('blocklist-item', styles.item)}
className={clsx('blocklist-item no-link', styles.item)}
to={route}
params={{
endpointId: environment.Id,