yevhen/notes_list
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added icons to the rows

Browse Source
This commit is contained in:
Yevhen Odynets
2021-10-08 14:56:47 +03:00
parent 239452682c
commit f762af05e5
15 changed files with 73 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/app.19f5ee6c7563dd0839a8.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/app.css → dist/app.532fa67fd2123b5dfcf1.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/app.532fa67fd2123b5dfcf1.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
dist/faker.19f5ee6c7563dd0839a8.js → dist/faker.532fa67fd2123b5dfcf1.js vendored
View File

File diff suppressed because one or more lines are too long

4
dist/index.html vendored
View File

@@ -4,12 +4,12 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Notes in JS (Home task 1)</title> <title>Notes in JS (Home task 1)</title>
<link href="app.css" rel="stylesheet"></head> <link href="app.532fa67fd2123b5dfcf1.css" rel="stylesheet"></head>
<body> <body>
<div id="appConsole" class="uk-container uk-margin-remove uk-background-muted uk-text-small"></div> <div id="appConsole" class="uk-container uk-margin-remove uk-background-muted uk-text-small"></div>
<div id="app" class="uk-container"></div> <div id="app" class="uk-container"></div>
<script defer src="vendors-node_modules_faker_index_js.19f5ee6c7563dd0839a8.js"></script><script defer src="faker.19f5ee6c7563dd0839a8.js"></script><script defer src="app.19f5ee6c7563dd0839a8.js"></script></body> <script defer src="vendors-node_modules_faker_index_js.532fa67fd2123b5dfcf1.js"></script><script defer src="faker.532fa67fd2123b5dfcf1.js"></script><script defer src="app.532fa67fd2123b5dfcf1.js"></script></body>
</html> </html>

2
dist/vendors-node_modules_faker_index_js.19f5ee6c7563dd0839a8.js → dist/vendors-node_modules_faker_index_js.532fa67fd2123b5dfcf1.js vendored
View File

File diff suppressed because one or more lines are too long

1
src/images/idea_48dp.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#f8f8ff"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 447 B

1
src/images/quote_48dp.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#f8f8ff"><path d="M5 17h3l2-4V7H4v6h3l-2 4zm10 0h3l2-4V7h-6v6h3l-2 4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 171 B

1
src/images/random_thought_48dp.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 20 20" height="48px" viewBox="0 0 20 20" width="48px" fill="#f8f8ff"><g><rect fill="none" height="20" width="20"/></g><g><g><path d="M10.5,4C8.22,4,6.35,5.71,6.06,7.91l-1.54,2.31C4.3,10.55,4.53,11,4.93,11H6v2c0,0.55,0.45,1,1,1h1v2h5v-3.76 c1.21-0.81,2-2.18,2-3.74C15,6.01,12.99,4,10.5,4z M12.33,8.67c0,0.09-0.01,0.18-0.02,0.26l0.56,0.44 c0.05,0.04,0.07,0.11,0.03,0.17l-0.53,0.92c-0.03,0.06-0.1,0.08-0.16,0.06l-0.66-0.27c-0.14,0.1-0.29,0.19-0.45,0.26L11,11.22 c-0.01,0.07-0.06,0.11-0.13,0.11H9.8c-0.07,0-0.12-0.05-0.13-0.11l-0.1-0.71c-0.16-0.07-0.31-0.15-0.45-0.26l-0.66,0.27 c-0.06,0.02-0.13,0-0.16-0.06L7.76,9.54C7.73,9.48,7.74,9.41,7.79,9.37l0.56-0.44C8.34,8.84,8.33,8.75,8.33,8.67 s0.01-0.18,0.02-0.26L7.79,7.97C7.74,7.93,7.73,7.86,7.76,7.8l0.53-0.92c0.03-0.06,0.1-0.08,0.16-0.06l0.66,0.27 c0.14-0.1,0.29-0.19,0.45-0.26l0.1-0.71C9.68,6.05,9.73,6,9.8,6h1.07c0.07,0,0.12,0.05,0.13,0.11l0.1,0.71 c0.16,0.07,0.31,0.15,0.45,0.26l0.66-0.27c0.06-0.02,0.13,0,0.16,0.06l0.53,0.92c0.03,0.06,0.02,0.13-0.03,0.17l-0.56,0.44 C12.33,8.49,12.33,8.58,12.33,8.67z"/><path d="M10.33,7.71c-0.52,0-0.95,0.43-0.95,0.95c0,0.52,0.43,0.95,0.95,0.95s0.95-0.43,0.95-0.95 C11.29,8.14,10.86,7.71,10.33,7.71z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
src/images/task_48dp.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#f8f8ff"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17 18c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zM7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm0-3l1.1-2h7.45c.75 0 1.41-.41 1.75-1.03L21.7 4H5.21l-.94-2H1v2h2l3.6 7.59L3.62 17H19v-2H7z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 366 B

12
src/modules/DOMController.js
View File

@@ -146,7 +146,11 @@ export default class DOMController {
for (const [key, value] of Object.entries(NotesAPI.getAnalytics())) { for (const [key, value] of Object.entries(NotesAPI.getAnalytics())) {
const row = createNode('tr') const row = createNode('tr')
row.classList.add('category-row')
const td = createNode('td', {}, ucWords(key)) const td = createNode('td', {}, ucWords(key))
const i = createNode('i', { class: `icon-${key}` }, )
td.appendChild(i)
row.appendChild(td) row.appendChild(td)
for (const [key, val] of Object.entries( value ) ) { for (const [key, val] of Object.entries( value ) ) {
@@ -159,7 +163,7 @@ export default class DOMController {
} }
/** /**
* * TODO: need to rewrite simplified
* @param len * @param len
* @param archived * @param archived
*/ */
@@ -175,6 +179,8 @@ export default class DOMController {
const row = createNode('tr') const row = createNode('tr')
row.dataset.id = el.id row.dataset.id = el.id
row.classList.add('category-row')
let i = createNode('i', { class: `icon-${el.category}` }, )
window.env.gridOrder.notes.forEach(key => { window.env.gridOrder.notes.forEach(key => {
let attrs = {} let attrs = {}
@@ -211,6 +217,10 @@ export default class DOMController {
const td = createNode('td', attrs, value) const td = createNode('td', attrs, value)
if( key === 'createdAt'){
td.appendChild(i)
}
if (key.match(/^(edit|archive|delete)$/)) { if (key.match(/^(edit|archive|delete)$/)) {
this.listener([td, 'click', td.dataset.action, td]) this.listener([td, 'click', td.dataset.action, td])
} }

4
src/modules/NotesAPI.js
View File

@@ -172,8 +172,8 @@ export default class NotesAPI {
cats.forEach((cat, i) => { cats.forEach((cat, i) => {
analytics[cat] = { analytics[cat] = {
Active: isArchive.filter(el => el[cat] === 'on').length, Archived: isArchive.filter(el => el[cat] === 'on').length,
Archived: isArchive.filter(el => el[cat] == '').length, Active: isArchive.filter(el => el[cat] == '').length,
} }
}) })
} }

37
src/styles/main.css
View File

@@ -73,6 +73,43 @@ tbody td{
background-size: 16px; background-size: 16px;
} }
tr.category-row td:first-child {
position: relative;
padding-left: 60px;
}
tr.category-row td:first-child > i{
position: absolute;
display: block;
width: 32px;
height: 32px;
top: 4px;
left: 8px;
background-repeat: no-repeat;
background-position: center;
background-size: 24px;
border-radius: 50%;
background-color: #888;
}
.icon-task{
background-image: url(../images/task_48dp.svg);
background-size: 20px !important;
}
.icon-quote{
background-image: url(../images/quote_48dp.svg)
}
.icon-random_thought{
background-image: url(../images/random_thought_48dp.svg)
}
.icon-idea{
background-image: url(../images/idea_48dp.svg)
}
.icon-edit{ .icon-edit{
background-image: url(../images/edit_48dp.svg) background-image: url(../images/edit_48dp.svg)
} }

9
src/templates/grid.js
View File

@@ -5,7 +5,7 @@ export default `
</div> </div>
</nav> </nav>
<table id="notesGrid" class="uk-table uk-table-small uk-table-striped uk-table-hover uk-table-divider"> <table id="notesGrid" class="uk-table uk-table-small uk-table-striped uk-table-hover uk-table-divider">
<col width="156"> <col width="222">
<col width="250"> <col width="250">
<col width="150"> <col width="150">
<col> <col>
@@ -30,9 +30,9 @@ export default `
</table> </table>
<table id="analyticsGrid" class="uk-table uk-table-small uk-table-striped uk-table-hover uk-table-divider uk-hidden"> <table id="analyticsGrid" class="uk-table uk-table-small uk-table-striped uk-table-hover uk-table-divider uk-hidden">
<col width="156"> <col width="222">
<col width="250"> <col width="250">
<col width="150"> <col>
<thead> <thead>
<tr> <tr>
<th>Note Category</th> <th>Note Category</th>
@@ -41,6 +41,9 @@ export default `
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="category-row">
<td><i class="icon-task icon-idea icon-quote icon-random_thought"></i></td>
</tr>
</tbody> </tbody>
</table> </table>

8
webpack.config.js
View File

@@ -23,7 +23,9 @@ const isDev = process.env.NODE_ENV !== 'production'
const plugins = [ const plugins = [
new CleanWebpackPlugin(), new CleanWebpackPlugin(),
new MiniCssExtractPlugin(), new MiniCssExtractPlugin({
filename: '[name].[hash].css'
}),
new PurgeCSSPlugin({ new PurgeCSSPlugin({
paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, { nodir: true }), paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, { nodir: true }),
//only: ['bundle', 'vendor'] //only: ['bundle', 'vendor']
@@ -51,6 +53,8 @@ const stylesLoaders = loader => {
}, },
] ]
console.log(loaders)
if (loader) { if (loader) {
loaders.push(loader) loaders.push(loader)
} }
@@ -103,7 +107,7 @@ module.exports = {
], ],
}, },
// //
entry: { faker: './src/faker', app: './src/index' }, entry: { faker: './src/faker', app: './src/index' },
output: { output: {
path: path.resolve(__dirname, 'dist'), path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash].js', filename: '[name].[hash].js',