faa7a38a7d
This commit centralizes the styling of key UI elements across the project to ensure: - Consistent look and feel. - Enhanced code reusability. - Simpified maintenance, improving development speed. It establishes a uniform foundation that can be leveraged across different parts of the project, even enabling the styling to be shared across different websites (supporting issue #49). Key changes: - Apply the following shared styles globally: * Styling of code, blockquotes, superscripts, horizontal rules and anchors. * Vertical and horizontal spacing. - Segregate base styling into dedicated SCSS files for clearer structure and increased maintainability. - Remove custom styling from affected components, enabling global style reuse for visual uniformity, reduced redundancy, and enhanced semantics. Other supporting changes: - Rename `globals.scss` to `base.scss` for better clarity. - Add `.editorconfig` for `.scss` files to ensure consistent whitespace usage. - Remove `2` file from the project root, that was included in the source code by mistake. - Remove unused font-face imports
68 lines
1.6 KiB
Vue
68 lines
1.6 KiB
Vue
<template>
|
|
<code class="copyable-command">
|
|
<span class="dollar">$</span>
|
|
<span ref="copyableTextHolder"><slot /></span>
|
|
<span class="copy-action-container">
|
|
<TooltipWrapper>
|
|
<FlatButton icon="copy" @click="copyCode" />
|
|
<template #tooltip>
|
|
Copy
|
|
</template>
|
|
</TooltipWrapper>
|
|
</span>
|
|
</code>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, shallowRef } from 'vue';
|
|
import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
|
|
import { injectKey } from '@/presentation/injectionSymbols';
|
|
import FlatButton from '@/presentation/components/Shared/FlatButton.vue';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
TooltipWrapper,
|
|
FlatButton,
|
|
},
|
|
setup() {
|
|
const { copyText } = injectKey((keys) => keys.useClipboard);
|
|
|
|
const copyableTextHolderRef = shallowRef<HTMLElement | undefined>();
|
|
|
|
async function copyCode() {
|
|
const element = copyableTextHolderRef.value;
|
|
if (!element) {
|
|
throw new Error('Code element could not be found.');
|
|
}
|
|
const code = element.textContent;
|
|
if (!code) {
|
|
throw new Error('Code element does not contain any text.');
|
|
}
|
|
await copyText(code);
|
|
}
|
|
|
|
return {
|
|
copyCode,
|
|
copyableTextHolder: copyableTextHolderRef,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
|
|
.copyable-command {
|
|
display: inline-flex;
|
|
padding: 0.25em;
|
|
font-size: $font-size-absolute-small;
|
|
.dollar {
|
|
margin-right: 0.5rem;
|
|
user-select: none;
|
|
}
|
|
.copy-action-container {
|
|
margin-left: 1rem;
|
|
}
|
|
}
|
|
</style>
|