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
2019-01-09 21:33:56 +07:00
parent aabce0cc12
commit bb4573b735
2 changed files with 61 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
client/components/Reader/Reader.vue
View File

@@ -2,22 +2,42 @@
<el-container>
<el-header height='50px'>
<div class="header">
<el-button plain class="tool-button" @click="doBack"><i class="el-icon-back"></i></el-button>
<el-tooltip content="Загрузить книгу" open-delay="1000" effect="light">
<el-button class="tool-button" :class="buttonActiveClass('back')" @click="doBack"><i class="el-icon-back"></i></el-button>
</el-tooltip>
<div>
<el-button plain class="tool-button" @click="" ><i class="el-icon-arrow-left"></i></el-button>
<el-button plain class="tool-button" @click="" ><i class="el-icon-arrow-right"></i></el-button>
<el-tooltip content="Действие назад" open-delay="1000" effect="light">
<el-button class="tool-button" @click="" ><i class="el-icon-arrow-left"></i></el-button>
</el-tooltip>
<el-tooltip content="Действие вперед" open-delay="1000" effect="light">
<el-button class="tool-button" @click="" ><i class="el-icon-arrow-right"></i></el-button>
</el-tooltip>
<div class="space"></div>
<el-button plain class="tool-button" @click=""><i class="el-icon-rank"></i></el-button>
<el-button plain class="tool-button" @click=""><i class="el-icon-d-arrow-right"></i></el-button>
<el-button plain class="tool-button" @click=""><i class="el-icon-sort"></i></el-button>
<el-button plain class="tool-button" @click=""><i class="el-icon-search"></i></el-button>
<el-button plain class="tool-button" @click=""><i class="el-icon-refresh"></i></el-button>
<el-tooltip content="На весь экран" open-delay="1000" effect="light">
<el-button class="tool-button" @click=""><i class="el-icon-rank"></i></el-button>
</el-tooltip>
<el-tooltip content="Прокрутка книги" open-delay="1000" effect="light">
<el-button class="tool-button" @click=""><i class="el-icon-d-arrow-right"></i></el-button>
</el-tooltip>
<el-tooltip content="Плавный скроллинг" open-delay="1000" effect="light">
<el-button class="tool-button" @click=""><i class="el-icon-sort"></i></el-button>
</el-tooltip>
<el-tooltip content="Найти в тексте" open-delay="1000" effect="light">
<el-button class="tool-button" @click=""><i class="el-icon-search"></i></el-button>
</el-tooltip>
<el-tooltip content="Принудительно обновить книгу в обход кеша" open-delay="1000" effect="light">
<el-button class="tool-button" @click=""><i class="el-icon-refresh"></i></el-button>
</el-tooltip>
<div class="space"></div>
<el-button plain class="tool-button" @click=""><i class="el-icon-document"></i></el-button>
<el-tooltip content="История" open-delay="1000" effect="light">
<el-button class="tool-button" @click=""><i class="el-icon-document"></i></el-button>
</el-tooltip>
</div>
<el-button plain class="tool-button" @click=""><i class="el-icon-setting"></i></el-button>
<el-tooltip content="Настроить" open-delay="1000" effect="light">
<el-button class="tool-button" @click=""><i class="el-icon-setting"></i></el-button>
</el-tooltip>
</div>
</el-header>
@@ -34,10 +54,20 @@ import Component from 'vue-class-component';
export default @Component({
})
class Reader extends Vue {
activeBack = false;
created() {
}
doBack() {
this.activeBack = !this.activeBack;
}
buttonActiveClass(button) {
const activeClass = { 'tool-button-active': true, 'tool-button-active:hover': true };
switch (button) {
case 'back': return (this.activeBack ? activeClass : {}); break;
}
return {};
}
}
//-----------------------------------------------------------------------------
@@ -78,16 +108,32 @@ class Reader extends Vue {
margin-left: 2px;
margin-right: 2px;
padding: 0;
color: #3E843E;
background-color: #E6EDF4;
margin-top: 5px;
height: 38px;
width: 38px;
border: 0;
box-shadow: 3px 3px 5px black;
}
.tool-button:hover {
background-color: white;
}
.tool-button-active {
box-shadow: 0 0 0;
color: white;
background-color: #8AB45F;
}
.tool-button-active:hover {
color: white;
background-color: #81C581;
}
i {
font-size: 200%;
color: #806142;
}
.space {

5
client/element.js
View File

@@ -32,6 +32,9 @@ import './theme/tabs.css';
import ElTabPane from 'element-ui/lib/tab-pane';
import './theme/tab-pane.css';
import ElTooltip from 'element-ui/lib/tooltip';
import './theme/tooltip.css';
import ElContainer from 'element-ui/lib/container';
import './theme/container.css';
@@ -48,7 +51,7 @@ const ElNotification = () => import('element-ui/lib/notification');
import './theme/notification.css';
const components = {
ElMenu, ElMenuItem, ElButton, ElCheckbox, ElTabs, ElTabPane,
ElMenu, ElMenuItem, ElButton, ElCheckbox, ElTabs, ElTabPane, ElTooltip,
ElContainer, ElAside, ElMain, ElHeader,
ElNotification
};