deadcxap/liberama
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Дополнительно отображаем тип файла в списке изображений

Browse Source
This commit is contained in:
Book Pauk
2020-12-15 20:17:21 +07:00
parent 3eb3dd371a
commit e48af7ee7d
2 changed files with 30 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
client/components/Reader/ContentsPage/ContentsPage.vue
View File

@@ -62,7 +62,10 @@
<div v-for="item in images" :key="item.key" class="column" style="width: 540px">
<div class="row item q-px-sm no-wrap">
<div class="col row clickable" @click="setBookPos(item.offset)">
<div class="no-expand-button"></div>
<div class="no-expand-button column justify-center items-center">
<div v-show="item.type == 'image/jpeg'" class="image-type it-jpg-color row justify-center">JPG</div>
<div v-show="item.type == 'image/png'" class="image-type it-png-color row justify-center">PNG</div>
</div>
<div :style="item.indentStyle"></div>
<div class="q-mr-sm col overflow-hidden column justify-center" :style="item.labelStyle" v-html="item.label"></div>
<div class="column justify-center">{{ item.perc }}%</div>
@@ -113,7 +116,7 @@ class ContentsPage extends Vue {
//закладки
//далее формаирование оглавления
//далее формирование оглавления
if (this.parsed == parsed)
return;
@@ -192,16 +195,23 @@ class ContentsPage extends Vue {
const ims = parsed.images;
for (i = 0; i < ims.length; i++) {
const image = ims[i];
let id = image.href;
if (id[0] == "#")
id = id.substr(1);
const label = `Изображение ${image.num}`;
const indentStyle = getIndentStyle(0);
const indentStyle = getIndentStyle(1);
const labelStyle = getLabelStyle(0);
const p = parsed.para[image.paraIndex];
newImages.push({perc: (p.offset/parsed.textLength*100).toFixed(0), label, key: i, offset: p.offset, indentStyle, labelStyle});
newImages.push({perc: (p.offset/parsed.textLength*100).toFixed(0), label, key: i, offset: p.offset,
indentStyle, labelStyle, type: (parsed.binary[id] ? parsed.binary[id].type : '')});
}
this.images = newImages;
if (this.selectedTab == 'contents' && !this.contents.length && this.images.length)
this.selectedTab = 'images';
}
async expandClick(key) {
@@ -280,4 +290,18 @@ class ContentsPage extends Vue {
.expanded-icon {
transform: rotate(90deg);
}
.image-type {
border: 1px solid black;
border-radius: 6px;
font-size: 80%;
padding: 2px 0 2px 0;
width: 34px;
}
.it-jpg-color {
background: linear-gradient(to right, #fabc3d, #ffec6d);
}
.it-png-color {
background: linear-gradient(to right, #4bc4e5, #6bf4ff);
}
</style>

4
client/components/Reader/share/BookParser.js
View File

@@ -211,7 +211,7 @@ export default class BookParser {
newParagraph(`<image href="${href}">${' '.repeat(maxImageLineCount)}</image>`, maxImageLineCount);
imageIndex++;
this.images.push({paraIndex, num: imageIndex});
this.images.push({paraIndex, num: imageIndex, href});
if (inPara && this.showInlineImagesInCenter)
newParagraph(' ', 1);
@@ -220,7 +220,7 @@ export default class BookParser {
newParagraph(`<image href="${href}">${' '.repeat(maxImageLineCount)}</image>`, maxImageLineCount);
imageIndex++;
this.images.push({paraIndex, num: imageIndex});
this.images.push({paraIndex, num: imageIndex, href});
}
}
}