Skip to content

Commit

Permalink
Replace wikit button with codex button (#764)
Browse files Browse the repository at this point in the history 
* Replace wikit button with codex button

Bug: T346797
  • Loading branch information
@guergana
guergana committed Nov 16, 2023
1 parent 7c30131 commit 855f55b
Show file tree
Hide file tree
Showing 5 changed files with 74 additions and 64 deletions.
15 changes: 7 additions & 8 deletions resources/js/Components/MismatchRow.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,15 +68,15 @@
<span class="upload-date">{{uploadDate}}</span>
<div class="description">
{{uploadInfoDescription}}
<wikit-button
<cdx-button
v-if="shouldTruncate"
class="full-description-button"
variant="quiet"
type="progressive"
@click.native="showDialog"
weight="quiet"
action="progressive"
@click="showDialog"
>
{{$i18n('results-full-description-button')}}
</wikit-button>
</cdx-button>
</div>
</div>
<cdx-dialog class="full-description-dialog"
Expand Down Expand Up @@ -111,10 +111,9 @@ import { formatISO } from 'date-fns';
import type { PropType } from 'vue';
import { defineComponent } from 'vue';
import {
Button as WikitButton,
Link as WikitLink
} from '@wmde/wikit-vue-components';
import { CdxDialog, CdxSelect } from "@wikimedia/codex";
import { CdxButton, CdxDialog, CdxSelect } from "@wikimedia/codex";
import { MenuItem } from '@wmde/wikit-vue-components/dist/components/MenuItem';
import { LabelledMismatch, ReviewDecision } from "../types/Mismatch";
Expand All @@ -138,7 +137,7 @@ interface MismatchRowState {
export default defineComponent({
components: {
WikitButton,
CdxButton,
WikitLink,
CdxDialog,
CdxSelect
Expand Down
49 changes: 25 additions & 24 deletions resources/js/Pages/Home.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,15 @@
<section id="description-section">
<header class="description-header">
<h2 class="h4">{{ $i18n('about-mismatch-finder-title') }}</h2>
<wikit-button
<cdx-button
id="faq-button"
variant="quiet"
type="progressive"
@click.native="faqDialog = true"
weight="quiet"
action="progressive"
@click="faqDialog = true"
>
<template #prefix>
<icon type="info-outlined" size="medium" color="inherit"/>
</template>
<cdx-icon :icon="cdxIconInfo" />
{{ $i18n('faq-button') }}
</wikit-button>
</cdx-button>
</header>
<cdx-dialog id="faq-dialog"
v-model:open="faqDialog"
Expand Down Expand Up @@ -69,17 +67,15 @@
<section id="querying-section">
<div class="heading">
<h2 class="h5">{{ $i18n('item-form-title') }}</h2>
<wikit-button
<cdx-button
class="random-mismatches"
type="neutral"
@click.native="showRandom()"
weight="normal"
@click="showRandom()"
:disabled="loading"
>
<template #prefix>
<icon type="die" size="medium" color="inherit"/>
</template>
<cdx-icon :icon="cdxIconDie" />
{{ $i18n('random-mismatches') }}
</wikit-button>
</cdx-button>
</div>
<form id="items-form" @submit.prevent="send">
<text-area
Expand All @@ -91,15 +87,15 @@
v-model="form.itemsInput"
/>
<div class="form-buttons">
<wikit-button
<cdx-button
class="submit-ids"
variant="primary"
type="progressive"
weight="primary"
action="progressive"
native-type="submit"
:disabled="loading"
>
{{ $i18n('item-form-submit') }}
</wikit-button>
</cdx-button>
</div>
</form>
</section>
Expand All @@ -111,12 +107,11 @@
import { mapState } from 'pinia';
import { useStore } from '../store';
import {
Button as WikitButton,
Icon,
Message,
TextArea
} from '@wmde/wikit-vue-components';
import { CdxDialog } from "@wikimedia/codex";
import { CdxDialog, CdxButton, CdxIcon } from "@wikimedia/codex";
import { cdxIconDie, cdxIconInfo } from '@wikimedia/codex-icons';
import { defineComponent } from 'vue';
interface HomeState {
Expand All @@ -143,11 +138,17 @@
export default defineComponent({
components: {
CdxDialog,
CdxButton,
CdxIcon,
InertiaHead,
Icon,
Message,
TextArea,
WikitButton
},
setup() {
return {
cdxIconDie,
cdxIconInfo
};
},
methods: {
splitInput: function(): Array<string> {
Expand Down
20 changes: 12 additions & 8 deletions resources/js/Pages/Layout.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,9 @@
</InertiaLink>
<div class="userSection" ref="userSection">
<div v-detect-click-outside="onClickOutsideLanguageSelector" class="languageSelector">
<LanguageSelectorButton type="neutral" :aria-label="$i18n('toggle-language-selector-button')"
@click.native="onToggleLanguageSelector">
<template #prefix>
<Icon type="language-selector" />
</template>
<LanguageSelectorButton :aria-label="$i18n('toggle-language-selector-button')"
@click="onToggleLanguageSelector">
<cdx-icon :icon="cdxIconLanguage" />
{{ currentLanguageAutonym }}
</LanguageSelectorButton>
<LanguageSelector v-show="showLanguageSelector" ref="languageSelector"
Expand Down Expand Up @@ -70,7 +68,8 @@
import { PropType } from 'vue';
import { Link as InertiaLink } from '@inertiajs/inertia-vue3';
import { Link as WikitLink } from '@wmde/wikit-vue-components';
import { Button as LanguageSelectorButton, Icon } from '@wmde/wikit-vue-components';
import { CdxButton as LanguageSelectorButton, CdxIcon } from "@wikimedia/codex";
import { cdxIconLanguage } from '@wikimedia/codex-icons';
import AuthWidget from '../Components/AuthWidget.vue';
import LanguageSelector from '../Components/LanguageSelector.vue';
import WikidataToolFooter from '../Components/WikidataToolFooter.vue';
Expand All @@ -85,12 +84,17 @@ export default defineComponent({
components: {
AuthWidget,
LanguageSelectorButton,
Icon,
CdxIcon,
InertiaLink,
LanguageSelector,
WikidataToolFooter,
WikitLink
},
setup() {
return {
cdxIconLanguage
};
},
data() {
return {
showLanguageSelector: false,
Expand Down Expand Up @@ -177,7 +181,7 @@ export default defineComponent({
},
beforeUnmount () {
this.resizeObserver.unobserve(this.$refs.contentWrap as Element)
},
}
});
</script>

Expand Down
48 changes: 24 additions & 24 deletions resources/js/Pages/Results.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,22 @@
<div class="page-container results-page">
<loading-overlay ref="overlay" />
<inertia-head title="Mismatch Finder - Results" />
<wikit-button class="back-button" @click.native="() => $inertia.get('/', {})">
<template #prefix>
<icon type="arrowprevious" size="medium" color="inherit" :dir="pageDirection"/>
</template>
<cdx-button class="back-button" @click="() => $inertia.get('/', {})">
<cdx-icon :icon="cdxIconArrowPrevious" />
{{ $i18n('results-back-button') }}
</wikit-button>
</cdx-button>
<section id="description-section">
<header class="description-header">
<h2 class="h4">{{ $i18n('results-page-title') }}</h2>
<wikit-button
<cdx-button
id="instructions-button"
variant="quiet"
type="progressive"
@click.native="instructionsDialog = true"
weight="quiet"
action="progressive"
@click="instructionsDialog = true"
>
<template #prefix>
<icon type="info-outlined" size="medium" color="inherit"/>
</template>
<cdx-icon :icon="cdxIconInfo" />
{{$i18n('results-instructions-button')}}
</wikit-button>
</cdx-button>
</header>

<cdx-dialog id="instructions-dialog"
Expand Down Expand Up @@ -96,14 +92,13 @@
</span>
</Message>
<div class="form-buttons">
<wikit-button
<cdx-button
:disabled="!user"
variant="primary"
type="progressive"
native-type="submit"
weight="primary"
action="progressive"
>
{{ $i18n('result-form-submit') }}
</wikit-button>
</cdx-button>
</div>
</footer>
</form>
Expand Down Expand Up @@ -143,12 +138,11 @@
import { Head as InertiaHead } from '@inertiajs/inertia-vue3';
import {
Link as WikitLink,
Button as WikitButton,
Checkbox,
Icon,
Message } from '@wmde/wikit-vue-components';
import { CdxDialog } from "@wikimedia/codex";
import { CdxButton, CdxIcon, CdxDialog } from "@wikimedia/codex";
import { cdxIconInfo, cdxIconArrowPrevious } from '@wikimedia/codex-icons';
import LoadingOverlay from '../Components/LoadingOverlay.vue';
import MismatchesTable from '../Components/MismatchesTable.vue';
Expand Down Expand Up @@ -195,14 +189,20 @@
export default defineComponent({
components: {
InertiaHead,
Icon,
LoadingOverlay,
MismatchesTable,
WikitLink,
WikitButton,
Checkbox,
Message,
CdxDialog
CdxDialog,
CdxButton,
CdxIcon
},
setup() {
return {
cdxIconInfo,
cdxIconArrowPrevious
};
},
props: {
user: {
Expand Down
6 changes: 6 additions & 0 deletions resources/sass/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -423,3 +423,9 @@ dl.import-meta .download-csv {
}
}
}

// TODO: This is a temporary fix until issue https://phabricator.wikimedia.org/T326900
// is marked as resolved.
.cdx-button .cdx-icon {
vertical-align: text-top;
}

0 comments on commit 855f55b

Please sign in to comment.