Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace deprecated text-muted bootstrap class #657

Merged
merged 1 commit into from
Aug 21, 2024
Merged

Replace deprecated text-muted bootstrap class #657

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion example/src/views/AboutView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ import MainLayout from "../layouts/MainLayout.vue"
</p>

<hr />
<div class="text-center text-muted">
<div class="text-center text-secondary">
<b>pev2</b> is brought to you by
<a href="https://dalibo.com">Dalibo</a>
</div>
Expand Down
16 changes: 10 additions & 6 deletions example/src/views/HomeView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ function handleDrop(event: DragEvent) {
</div>
<div class="row mb-3">
<div class="col d-flex">
<div class="text-muted">
<div class="text-secondary">
For best results, use
<code>
EXPLAIN (ANALYZE, COSTS, VERBOSE, BUFFERS, FORMAT JSON)
Expand Down Expand Up @@ -202,7 +202,7 @@ function handleDrop(event: DragEvent) {
<form v-on:submit.prevent="submitPlan">
<div class="mb-3">
<label for="planInput" class="form-label">
Plan <span class="small text-muted">(text or JSON)</span>
Plan <span class="small text-secondary">(text or JSON)</span>
</label>
<textarea
:class="['form-control', draggingPlan ? 'dropzone-over' : '']"
Expand All @@ -218,7 +218,7 @@ function handleDrop(event: DragEvent) {
</div>
<div class="mb-3">
<label for="queryInput" class="form-label">
Query <span class="small text-muted">(optional)</span>
Query <span class="small text-secondary">(optional)</span>
</label>
<textarea
:class="['form-control', draggingQuery ? 'dropzone-over' : '']"
Expand All @@ -234,7 +234,7 @@ function handleDrop(event: DragEvent) {
</div>
<div class="mb-3">
<label for="queryName" class="form-label">
Plan Name <span class="small text-muted">(optional)</span>
Plan Name <span class="small text-secondary">(optional)</span>
</label>
<input
type="text"
Expand Down Expand Up @@ -282,7 +282,7 @@ function handleDrop(event: DragEvent) {
</div>
<div class="row">
<div class="col">
<small class="text-muted">
<small class="text-secondary">
created
<span :title="plan[3]?.toString()">
{{ time_ago(plan[3]) }}
Expand All @@ -293,7 +293,11 @@ function handleDrop(event: DragEvent) {
</div>
</li>
</ul>
<p class="text-muted text-center" v-if="!savedPlans?.length" v-cloak>
<p
class="text-secondary text-center"
v-if="!savedPlans?.length"
v-cloak
>
<em> You haven't saved any plan yet.</em>
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/assets/scss/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
color: color-yiq($value);
font-weight: bold;

.text-muted {
.text-secondary {
color: color-yiq($value) !important;
font-weight: normal;
}
Expand Down
2 changes: 1 addition & 1 deletion src/assets/scss/_plan-node.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ $bg-color: #fff;
border: 0;
}

.text-muted {
.text-secondary {
color: $text-color-light;
}

Expand Down
4 changes: 2 additions & 2 deletions src/assets/scss/_plan.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ $connector-line: 2px solid darken($line-color, 10%);
cursor : grabbing;
}

.text-muted {
.text-secondary {
color: $gray !important;
}

Expand Down Expand Up @@ -81,7 +81,7 @@ $connector-line: 2px solid darken($line-color, 10%);
.tippy-popper .tippy-tooltip {
text-align: left;
}
.tippy-popper .text-muted {
.tippy-popper .text-secondary {
color: inherit !important;
}

Expand Down
4 changes: 2 additions & 2 deletions src/components/Diagram.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,7 +269,7 @@ provide("scrollTo", scrollTo)
</ul>
<FontAwesomeIcon
:icon="faInfoCircle"
class="cursor-help d-inline-block text-muted"
class="cursor-help d-inline-block text-secondary"
v-tippy="{
content: getHelpMessage('hint track_io_timing'),
allowHTML: true,
Expand Down Expand Up @@ -325,7 +325,7 @@ provide("scrollTo", scrollTo)
</template>
</tbody>
</table>
<div class="p-2 text-center text-muted" v-else>
<div class="p-2 text-center text-secondary" v-else>
<em> No data available </em>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/DiagramRow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ watch(
style="height: 10px"
v-else-if="diagramViewOptions.metric == Metric.estimate_factor"
>
<span class="text-muted small">
<span class="text-secondary small">
<FontAwesomeIcon
fixed-width
:icon="faArrowDown"
Expand Down Expand Up @@ -241,7 +241,7 @@ watch(
aria-valuemin="0"
aria-valuemax="100"
></div>
<span class="text-muted small">
<span class="text-secondary small">
<FontAwesomeIcon
fixed-width
:icon="faArrowUp"
Expand Down
20 changes: 10 additions & 10 deletions src/components/GridRow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ function formattedProp(propName: keyof typeof NodeProp) {
</script>
<template>
<tr @click="showDetails = !showDetails" class="node">
<td class="node-index text-muted">
<td class="node-index text-secondary">
<!-- node id -->
<a :href="`#plan/node/${node.nodeId}`" @click.stop>
<span class="font-weight-normal small">#{{ node.nodeId }} </span>
Expand Down Expand Up @@ -291,27 +291,27 @@ function formattedProp(propName: keyof typeof NodeProp) {

<span class="text-body-secondary">
<template v-if="node[NodeProp.RELATION_NAME]">
<span class="text-muted">on</span>
<span class="text-secondary">on</span>
<span v-if="node[NodeProp.SCHEMA]"
>{{ node[NodeProp.SCHEMA] }}.</span
>{{ node[NodeProp.RELATION_NAME] }}
<span v-if="node[NodeProp.ALIAS]">
<span class="text-muted">as</span>
<span class="text-secondary">as</span>
{{ node[NodeProp.ALIAS] }}
</span>
</template>
<template v-else-if="node[NodeProp.ALIAS]">
<span class="text-muted">on</span>
<span class="text-secondary">on</span>
<span v-html="keysToString(node[NodeProp.ALIAS] as string)"></span>
</template>
<template v-if="node[NodeProp.GROUP_KEY]">
<span class="text-muted">by</span>
<span class="text-secondary">by</span>
<span
v-html="keysToString(node[NodeProp.GROUP_KEY] as string)"
></span>
</template>
<template v-if="node[NodeProp.SORT_KEY]">
<span class="text-muted">by</span>
<span class="text-secondary">by</span>
<span
v-html="
sortKeys(
Expand All @@ -323,23 +323,23 @@ function formattedProp(propName: keyof typeof NodeProp) {
</template>
<template v-if="node[NodeProp.JOIN_TYPE]">
{{ node[NodeProp.JOIN_TYPE] }}
<span class="text-muted">join</span>
<span class="text-secondary">join</span>
</template>
<template v-if="node[NodeProp.INDEX_NAME]">
<span class="text-muted">using</span>
<span class="text-secondary">using</span>
<span
v-html="keysToString(node[NodeProp.INDEX_NAME] as string)"
></span>
</template>
<template v-if="node[NodeProp.HASH_CONDITION]">
<span class="text-muted">on</span>
<span class="text-secondary">on</span>
<span
v-html="keysToString(node[NodeProp.HASH_CONDITION] as string)"
></span>
</template>
<template v-if="node[NodeProp.CTE_NAME]">
<span class="text-reset">
<span class="text-muted">CTE</span>
<span class="text-secondary">CTE</span>
{{ node[NodeProp.CTE_NAME] }}
</span>
</template>
Expand Down
2 changes: 1 addition & 1 deletion src/components/MiscDetail.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ function calculateProps() {
</template>
</table>

<div class="text-muted text-end">
<div class="text-secondary text-end">
<em>* Calculated value</em>
</div>
</template>
2 changes: 1 addition & 1 deletion src/components/NodeBadges.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ const {
<FontAwesomeIcon
fixed-width
:icon="faFilter"
class="text-muted"
class="text-secondary"
></FontAwesomeIcon>
</span>
</template>
28 changes: 15 additions & 13 deletions src/components/PlanNode.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ function centerCte() {
{{ node[NodeProp.SUBPLAN_NAME] }}
</b>
</div>
<div class="workers text-muted py-0 px-1" v-if="workersPlannedCount">
<div class="workers text-secondary py-0 px-1" v-if="workersPlannedCount">
<div
v-for="index in workersPlannedCountReversed"
:key="index"
Expand All @@ -140,7 +140,7 @@ function centerCte() {
class="text-body overflow-hidden btn btn-light text-start py-0 px-1"
@click.prevent.stop="showDetails = !showDetails"
>
<span class="text-muted">
<span class="text-secondary">
<FontAwesomeIcon
fixed-width
:icon="faChevronUp"
Expand Down Expand Up @@ -170,20 +170,20 @@ function centerCte() {
v-if="node[NodeProp.RELATION_NAME]"
:class="{ 'line-clamp-2': !showDetails }"
>
<span class="text-muted">on</span>
<span class="text-secondary">on</span>
<span v-if="node[NodeProp.SCHEMA]"
>{{ node[NodeProp.SCHEMA] }}.</span
>{{ node[NodeProp.RELATION_NAME] }}
<span v-if="node[NodeProp.ALIAS]">
<span class="text-muted">as</span>
<span class="text-secondary">as</span>
{{ node[NodeProp.ALIAS] }}
</span>
</div>
<div
v-else-if="node[NodeProp.ALIAS]"
:class="{ 'line-clamp-2': !showDetails }"
>
<span class="text-muted">on</span>
<span class="text-secondary">on</span>
<span
v-html="keysToString(node[NodeProp.ALIAS] as string)"
></span>
Expand All @@ -192,7 +192,7 @@ function centerCte() {
v-if="node[NodeProp.GROUP_KEY]"
:class="{ 'line-clamp-2': !showDetails }"
>
<span class="text-muted">by</span>
<span class="text-secondary">by</span>
<span
v-html="keysToString(node[NodeProp.GROUP_KEY] as string)"
></span>
Expand All @@ -201,7 +201,7 @@ function centerCte() {
v-if="node[NodeProp.SORT_KEY]"
:class="{ 'line-clamp-2': !showDetails }"
>
<span class="text-muted">by</span>
<span class="text-secondary">by</span>
<span
v-html="
sortKeys(
Expand All @@ -213,13 +213,13 @@ function centerCte() {
</div>
<div v-if="node[NodeProp.JOIN_TYPE]">
{{ node[NodeProp.JOIN_TYPE] }}
<span class="text-muted">join</span>
<span class="text-secondary">join</span>
</div>
<div
v-if="node[NodeProp.INDEX_NAME]"
:class="{ 'line-clamp-2': !showDetails }"
>
<span class="text-muted">using</span>
<span class="text-secondary">using</span>
<span
v-html="keysToString(node[NodeProp.INDEX_NAME] as string)"
></span>
Expand All @@ -228,7 +228,7 @@ function centerCte() {
v-if="node[NodeProp.HASH_CONDITION]"
:class="{ 'line-clamp-2': !showDetails }"
>
<span class="text-muted">on</span>
<span class="text-secondary">on</span>
<span
v-html="keysToString(node[NodeProp.HASH_CONDITION] as string)"
></span>
Expand All @@ -237,9 +237,9 @@ function centerCte() {
<a class="text-reset" href="" @click.prevent.stop="centerCte">
<FontAwesomeIcon
:icon="faSearch"
class="text-muted"
class="text-secondary"
></FontAwesomeIcon>
<span class="text-muted">CTE</span>
<span class="text-secondary">CTE</span>
{{ node[NodeProp.CTE_NAME] }}
</a>
</div>
Expand All @@ -265,7 +265,9 @@ function centerCte() {
></div>
</div>
<span class="node-bar-label">
<span class="text-muted">{{ viewOptions.highlightType }}:</span>
<span class="text-secondary"
>{{ viewOptions.highlightType }}:</span
>
<span v-html="highlightValue"></span>
</span>
</div>
Expand Down
Loading
Loading