feat: fixed icons width in sidebar
Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>
This commit is contained in:
Corentin Thomasset
Corentin THOMASSET
parent
78157b4cb5
commit
46514cf71b
@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
- [refactor] used vue-typecasting for number inputs
|
||||
- [feat] lazy loading tools routes
|
||||
- [feat] added [markdown editor](/#/markdown-editor)
|
||||
- [feat] added [lorem ipsum generator](/#/lorem-ipsum-generator)
|
||||
|
||||
## 1.2.1
|
||||
- [fix] [UuidGenerator] added quantity validation rules
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
Aggregated set of useful tools that every developer may need once in a while. Available [here](https://it-tools.tech).
|
||||
|
||||
## Functionality/roadmap
|
||||
## Functionalities roadmap
|
||||
Here is an unordered list of the current functionalities, and some that may come.
|
||||
|
||||
- [x] Token generator
|
||||
|
||||
50
src/App.vue
50
src/App.vue
@ -1,14 +1,15 @@
|
||||
<template>
|
||||
<v-app id="inspire">
|
||||
<vue-headful
|
||||
:title="currentRoute ? `${currentRoute.text} - IT-Tools` : 'IT-Tools'"
|
||||
:description="currentRoute ? currentRoute.description: 'Aggregated set of useful tools that every developer may need once in a while.'"
|
||||
:keywords="currentRoute ? currentRoute.keywords: null"
|
||||
image="/img/banner.png"
|
||||
:title="currentRoute ? `${currentRoute.text} - IT-Tools` : 'IT-Tools'"
|
||||
:description="currentRoute ? currentRoute.description: 'Aggregated set of useful tools that every developer may need once in a while.'"
|
||||
:keywords="currentRoute ? currentRoute.keywords: null"
|
||||
image="/img/banner.png"
|
||||
/>
|
||||
<v-navigation-drawer v-model="drawer" app clipped>
|
||||
|
||||
<SearchBar class="hidden-sm-and-up" />
|
||||
<template v-slot:prepend>
|
||||
<SearchBar class="hidden-sm-and-up"/>
|
||||
</template>
|
||||
|
||||
<v-list dense>
|
||||
|
||||
@ -99,7 +100,7 @@
|
||||
appVersion: 'v' + process.env.APPLICATION_VERSION,
|
||||
drawer: null,
|
||||
items: toolsComponents,
|
||||
currentRoute:{}
|
||||
currentRoute: {}
|
||||
}),
|
||||
mounted() {
|
||||
this.setTitle()
|
||||
@ -107,14 +108,14 @@
|
||||
created() {
|
||||
this.$vuetify.theme.dark = true
|
||||
},
|
||||
methods:{
|
||||
setTitle(){
|
||||
methods: {
|
||||
setTitle() {
|
||||
const path = this.$router.currentRoute.path;
|
||||
this.currentRoute = toolsComponents.map(p => p.child).flat().find(p => p.path === path)
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
'$route'(){
|
||||
watch: {
|
||||
'$route'() {
|
||||
this.setTitle()
|
||||
}
|
||||
}
|
||||
@ -126,6 +127,33 @@
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
.pretty-scrollbar{
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px!important;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
&::-webkit-scrollbar-track {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(241, 241, 241, 0.10) !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(241, 241, 241, 0.20)!important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.v-navigation-drawer__content{
|
||||
.pretty-scrollbar;
|
||||
}
|
||||
|
||||
.single-card {
|
||||
width: 100%;
|
||||
max-width: 700px !important;
|
||||
|
||||
@ -101,6 +101,13 @@ const toolsComponents = [
|
||||
component: () => import('./routes/tools/MarkdownEditor'),
|
||||
keywords: ['text', 'html', 'markdown']
|
||||
},
|
||||
{
|
||||
icon: 'fa-align-justify',
|
||||
text: 'Lorem ipsum generator',
|
||||
path: '/lorem-ipsum-generator',
|
||||
component: () => import('./routes/tools/LoremIpsumGenerator'),
|
||||
keywords: ['text', 'dolor', 'sit', 'placeholder', 'fill', 'dummy']
|
||||
}
|
||||
],
|
||||
}
|
||||
];
|
||||
|
||||
94
src/routes/tools/LoremIpsumGenerator.vue
Normal file
94
src/routes/tools/LoremIpsumGenerator.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<v-row justify="center" align="center" class="lorem-ipsum-generator">
|
||||
<v-col cols="12" xl="5" lg="6" md="12">
|
||||
<v-card>
|
||||
<v-card-title>Lorem ipsum generator</v-card-title>
|
||||
<v-card-text>
|
||||
<v-slider v-model="paragraphs" min="1" max="20" label="Paragraphs" thumb-label/>
|
||||
<v-range-slider v-model="sentencePerParagraph" min="1" max="50" label="Sentences per paragraph"
|
||||
thumb-label/>
|
||||
<v-range-slider v-model="wordPerSentence" min="1" max="50" label="Words per sentence" thumb-label hide-details/>
|
||||
<v-checkbox v-model="startWithLoremIpsum" label="Start with 'Lorem ipsum ...'" hide-details/>
|
||||
<v-checkbox v-model="asHTML" label="As HTML" hide-details/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" xl="5" lg="6" md="12">
|
||||
<v-card>
|
||||
<v-card-text>
|
||||
<v-textarea outlined readonly hide-details="auto" v-model="loremIpsum" rows="15"
|
||||
class="text-justify"></v-textarea>
|
||||
<div class="text-center mt-4">
|
||||
<v-btn depressed @click="copy()">Copy</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {copyToClipboard, randFromArray, randIntFromInterval} from "../../utils/helpers";
|
||||
|
||||
const vocabulary = ['a', 'ac', 'accumsan', 'ad', 'adipiscing', 'aenean', 'aliquam', 'aliquet', 'amet', 'ante', 'aptent', 'arcu', 'at', 'auctor', 'bibendum', 'blandit', 'class', 'commodo', 'condimentum', 'congue', 'consectetur', 'consequat', 'conubia', 'convallis', 'cras', 'cubilia', 'cum', 'curabitur', 'curae', 'dapibus', 'diam', 'dictum', 'dictumst', 'dignissim', 'dolor', 'donec', 'dui', 'duis', 'egestas', 'eget', 'eleifend', 'elementum', 'elit', 'enim', 'erat', 'eros', 'est', 'et', 'etiam', 'eu', 'euismod', 'facilisi', 'faucibus', 'felis', 'fermentum', 'feugiat', 'fringilla', 'fusce', 'gravida', 'habitant', 'habitasse', 'hac', 'hendrerit', 'himenaeos', 'iaculis', 'id', 'imperdiet', 'in', 'inceptos', 'integer', 'interdum', 'ipsum', 'justo', 'lacinia', 'lacus', 'laoreet', 'lectus', 'leo', 'ligula', 'litora', 'lobortis', 'lorem', 'luctus', 'maecenas', 'magna', 'magnis', 'malesuada', 'massa', 'mattis', 'mauris', 'metus', 'mi', 'molestie', 'mollis', 'montes', 'morbi', 'mus', 'nam', 'nascetur', 'natoque', 'nec', 'neque', 'netus', 'nisi', 'nisl', 'non', 'nostra', 'nulla', 'nullam', 'nunc', 'odio', 'orci', 'ornare', 'parturient', 'pellentesque', 'penatibus', 'per', 'pharetra', 'phasellus', 'placerat', 'platea', 'porta', 'porttitor', 'posuere', 'potenti', 'praesent', 'pretium', 'primis', 'proin', 'pulvinar', 'purus', 'quam', 'quis', 'quisque', 'rhoncus', 'ridiculus', 'risus', 'rutrum', 'sagittis', 'sapien', 'scelerisque', 'sed', 'sem', 'semper', 'senectus', 'sit', 'sociis', 'sociosqu', 'sodales', 'sollicitudin', 'suscipit', 'suspendisse', 'taciti', 'tellus', 'tempor', 'tempus', 'tincidunt', 'torquent', 'tortor', 'turpis', 'ullamcorper', 'ultrices', 'ultricies', 'urna', 'varius', 'vehicula', 'vel', 'velit', 'venenatis', 'vestibulum', 'vitae', 'vivamus', 'viverra', 'volutpat', 'vulputate'];
|
||||
const firstSentence = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
|
||||
|
||||
const generateSentence = (length) => {
|
||||
let sentence = Array.from({length}).map(() => randFromArray(vocabulary)).join(' ')
|
||||
sentence = sentence.charAt(0).toUpperCase() + sentence.slice(1) + '.'
|
||||
return sentence
|
||||
}
|
||||
|
||||
|
||||
export default {
|
||||
name: "LoremIpsumGenerator",
|
||||
data: () => ({
|
||||
paragraphs: 1,
|
||||
sentencePerParagraph: [3, 8],
|
||||
wordPerSentence: [8, 15],
|
||||
startWithLoremIpsum: true,
|
||||
asHTML: false
|
||||
}),
|
||||
methods:{
|
||||
copy(){
|
||||
copyToClipboard(this.loremIpsum)
|
||||
this.$toast.success('Copied to clipboard.')
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
loremIpsum: function () {
|
||||
const lorem = Array
|
||||
.from({length: this.paragraphs})
|
||||
.map(() => {
|
||||
const length = randIntFromInterval(...this.sentencePerParagraph);
|
||||
|
||||
return Array.from({length}).map(() => {
|
||||
const wordCount = randIntFromInterval(...this.wordPerSentence);
|
||||
return generateSentence(wordCount);
|
||||
})
|
||||
});
|
||||
|
||||
if (this.startWithLoremIpsum) {
|
||||
lorem[0][0] = firstSentence
|
||||
}
|
||||
|
||||
let result;
|
||||
if(this.asHTML){
|
||||
result = `<p>${lorem.map(s => s.join(' ')).join('</p>\n\n<p>')}</p>`
|
||||
}else{
|
||||
result = lorem.map(s => s.join(' ')).join('\n\n')
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
::v-deep {
|
||||
.v-label{
|
||||
min-width: 200px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -37,10 +37,16 @@ const debounce = (callback, delay = 300) => {
|
||||
}
|
||||
}
|
||||
|
||||
const randFromArray = (array) => array[Math.floor(Math.random() * array.length)];
|
||||
|
||||
const randIntFromInterval = (min, max) => Math.floor(Math.random() * (max - min) + min)
|
||||
|
||||
export {
|
||||
copyToClipboard,
|
||||
fileIsImage,
|
||||
formatBytes,
|
||||
isInt,
|
||||
debounce
|
||||
debounce,
|
||||
randFromArray,
|
||||
randIntFromInterval
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user