yiyun-fe
/
yiyunjianzhu-vue
4
0
Fork 0
Code Pull Requests 0 Releases 0 Activity
Browse Source

导航栏UI样式调整 检查更新

dev-remain
kim131 4 years ago
parent
2f6a2a3884
commit
13e752ed9d
9 changed files with 110 additions and 53 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +3
    -11
      public/static/css/main.css
  2. +9
    -0
      public/static/img/operate-window/小窗口化.svg
  3. +7
    -0
      public/static/img/搜索激活.svg
  4. +4
    -3
      src/components/app-header/app-header.vue
  5. +4
    -11
      src/components/app-header/components/user_center.vue
  6. +49
    -6
      src/components/search-bar/search-bar.vue
  7. +8
    -8
      src/services/system.js
  8. +17
    -9
      src/views/main_web/index/index.vue
  9. +9
    -5
      src/views/main_web/workspace/workspace.new.vue

+ 3
- 11
public/static/css/main.css View File

@@ -4114,8 +4114,9 @@ button:focus {
z-index: 9;
}
.Cicon{
font-size: 28px;
line-height: 30px;
/* font-size: 28px; */
font-size: 32px;
line-height: 32px;
color: #A7A8B7;
transition: ease all 0.5s;
cursor: pointer;
@@ -9066,15 +9067,6 @@ h5.dulilabel{
.border-box {
box-sizing: border-box;
}
/* 搜索功能 搜索入口 */
.search-entry {
position: relative;
width: 26px;
height: 26px;
background: url('/static/img/搜索.svg') center/100%;
cursor: pointer;
}
/* 文件左上角图标 */
.green-icon, .gray-icon , .blue-icon {


+ 9
- 0
public/static/img/operate-window/小窗口化.svg View File

@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="12px" viewBox="0 0 14 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>小窗口化</title>
<g id="UI关系整理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="导航栏" transform="translate(-1453.000000, -125.000000)" fill="#979797" fill-rule="nonzero">
<path d="M1466.5,125.5 L1466.5,133.5 L1460.5,133.5 L1460.5,136.5 L1453.5,136.5 L1453.5,130.5 L1456.5,130.5 L1456.5,125.5 L1466.5,125.5 Z M1456.5,131.5 L1454.5,131.5 L1454.5,135.5 L1459.5,135.5 L1459.5,133.5 L1456.5,133.5 L1456.5,131.5 Z M1457.5,132.5 L1465.5,132.5 L1465.5,127.5 L1457.5,127.5 L1457.5,132.5 Z" id="小窗口化"></path>
</g>
</g>
</svg>

+ 7
- 0
public/static/img/搜索激活.svg View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>符号/基础/搜索</title>
<g id="符号/基础/搜索" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M25.4876656,22.2963331 C25.7638159,22.5692656 25.7650689,23.01481 25.4904581,23.2892914 L23.3684581,25.4102914 C23.0962047,25.6824165 22.6553148,25.6836566 22.3815349,25.4130674 L16.0942898,19.1990952 C14.8095188,19.9522398 13.3134635,20.384 11.7165,20.384 C6.93056889,20.384 3.0495,16.5032676 3.0495,11.717 C3.0495,6.93073243 6.93056889,3.05 11.7165,3.05 C16.5039311,3.05 20.3845,6.93023247 20.3845,11.717 C20.3845,13.310381 19.9545183,14.8033145 19.2042355,16.0861201 L25.4876656,22.2963331 Z M18.9845,11.717 C18.9845,7.70345829 15.7307596,4.45 11.7165,4.45 C7.70374037,4.45 4.4495,7.70395825 4.4495,11.717 C4.4495,15.7300417 7.70374037,18.984 11.7165,18.984 C15.7307596,18.984 18.9845,15.7305417 18.9845,11.717 Z M17.4250201,18.5459212 L22.870824,23.9282585 L24.0026232,22.7969926 L18.5562878,17.4141201 L17.4250201,18.5459212 Z" id="合并形状" fill="#7850FF" fill-rule="nonzero"></path>
</g>
</svg>

+ 4
- 3
src/components/app-header/app-header.vue View File

@@ -15,7 +15,8 @@
<div class="my-max"
@click.stop="judgeIsMaxBrowserWindow"
>
<img src="/static/img/operate-window/放大.svg" alt="" class="to-max-icon vert-hori-center ">
<img v-if="isMaxWindowNow" src="/static/img/operate-window/小窗口化.svg" alt="" class="to-max-icon vert-hori-center ">
<img v-else src="/static/img/operate-window/放大.svg" alt="" class="to-max-icon vert-hori-center ">
</div>
<div class="close"
@mouseenter="isCloseHover = true"
@@ -237,13 +238,13 @@ export default {
/* height: 100%; */
height: 40px;
width: 100%;
padding: 0 46px 0 64px;
padding: 0 44px 0 64px;
font-size: $font-level-7;
&-right {
display: flex;
align-items: center;
> span, > div {
margin-left: 10px;
margin-left: 8px;
}
}
&-left {


+ 4
- 11
src/components/app-header/components/user_center.vue View File

@@ -187,9 +187,9 @@
></i>
<span class="right-list_beizhu">版本V2.1.0.4</span>
</li>
<!-- <li v-if="isClient" @click.stop="checkForUpdates" class="check-for-updates">
<span>检查更新</span><i class="dot"></i>
</li> -->
<li v-if="isClient" @click.stop="checkForUpdates" class="check-for-updates">
<span>检查更新</span>
</li>
</ul>
</div>
</div>
@@ -1969,13 +1969,6 @@ export default {
display: flex;
align-items: center;
}
.dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: gold;
margin: 0 0 0 10px;
}


</style>

+ 49
- 6
src/components/search-bar/search-bar.vue View File

@@ -1,9 +1,19 @@
<template>
<div class="search-bar">
<i class="search-icon" @click.stop="goToSearch"></i>
<input type="text" v-model="searchContent" @keyup.stop="enterSearchContent"
class="search-input" :placeholder="placeholder" maxlength="35"/>
<i class="close-icon" @click.stop="hideSearchBar"></i>
<div
class="search-entry" :class="{'set-high-index': !isShowSearchBar}"
@mouseenter="isSearchHover = true"
@mouseleave="isSearchHover = false"
@click.stop="showSearchBar">
<img v-show="!isSearchHover" src="/static/img/搜索.svg" alt="" class="vert-hori-center">
<img v-show="isSearchHover" src="/static/img/搜索激活.svg" alt="" class="vert-hori-center">
</div>
<div class="search-wrap" :class="{'hide-search-bar': !isShowSearchBar, 'show-search-bar': isShowSearchBar}">
<i class="search-icon" @click.stop="goToSearch"></i>
<input type="text" v-model="searchContent" @keyup.stop="enterSearchContent"
class="search-input" :placeholder="placeholder" maxlength="35"/>
<i class="close-icon" @click.stop="hideSearchBar"></i>
</div>
</div>
</template>

@@ -12,6 +22,8 @@
data() {
return {
searchContent: '',
isSearchHover: false,
isShowSearchBar: false,
}
},
props: {
@@ -42,17 +54,40 @@
this.$emit('goToSearch');
},
hideSearchBar() {
this.isShowSearchBar = false;
this.$emit('hideSearchBar');
},
showSearchBar() {
this.searchContent = "";
this.isShowSearchBar = true;
this.$emit('showSearchBar');
}

}
}
</script>

<style lang="scss" scoped>
.search-wrap {
position: relative;
z-index: 2;
transition: transform .3s linear, opacity .4s linear;
}

.search-entry {
position: absolute;
right: 0;
cursor: pointer;
width: 32px;
height: 32px;
}
.set-high-index {
z-index: 3;
}
.search-bar {
position: relative;
transition: width 2.5s linear;
overflow: hidden;

.search-input {
box-sizing: border-box;
color: #32323c;
@@ -69,7 +104,7 @@
width: 22px;
height: 22px;
cursor: pointer;
}
}
.search-icon {
left: 7px;
background: url('/static/img/搜索.svg') center/100%;
@@ -80,5 +115,13 @@
}
}

.hide-search-bar{
transform: translate(205px, 0);
opacity: 0;
}
.show-search-bar {
transform: translate(0, 0);
opacity: 1;
}

</style>

+ 8
- 8
src/services/system.js View File

@@ -97,14 +97,14 @@ const system = {
updates.send(flag);
})
updates.on('message', (e) => {
if(e.data === '-1') {
Vue.prototype.$notify({
message:`检查更新出现错误, 请稍后重试。`,
type:['error'],
})
errorHandler(e);
return;
}
// if(e.data === '-1') {
// Vue.prototype.$notify({
// message:`检查更新出现错误, 请稍后重试。`,
// type:['error'],
// })
// errorHandler(e);
// return;
// }
})
}),
// 客户端文件打开方式


+ 17
- 9
src/views/main_web/index/index.vue View File

@@ -24,14 +24,19 @@
{{currentPlatform.orgName}}
</template>
<template #right>
<search-bar v-if="isShowSearchBar" class="proj-search-bar"
:class="{'hide-search-bar': !isShowSearchBar, 'show-search-bar': isShowSearchBar}"
placeholder="搜索项目名称"
@changeSearchContent="changeSearchContent"
@hideSearchBar="hideSearchBar"
@goToSearch="searchForProj"
@maxTextLengthArrived="maxTextLengthArrived"/>
<div class="search-entry" @click.stop="isShowSearchBar = true" v-if="!isShowSearchBar"></div>
<search-bar
class="proj-search-bar"
placeholder="搜索项目名称"
@changeSearchContent="changeSearchContent"
@hideSearchBar="hideSearchBar"
@showSearchBar="showSearchBar"
@goToSearch="searchForProj"
@maxTextLengthArrived="maxTextLengthArrived"
/>
<!-- <div class="search-entry" @click.stop="isShowSearchBar = true" v-if="!isShowSearchBar">
<img src="/static/img/搜索.svg" alt="">
<img src="/static/img/搜索激活.svg" alt="">
</div> -->
</template>
<!-- <template #right>
<span v-on:click="toRecycle">
@@ -265,7 +270,7 @@ export default {
},
computed: {
showProjList() {
return this.isShowSearchBar && this.searchContent && this.isSearching ? this.searchProjList : this.projPageList;
return this.isShowSearchBar && this.searchContent && this.isSearching ? this.searchProjList : this.projPageList;
},
showCenterTitle() {
return this.isShowSearchBar && this.searchContent ? `“${this.searchContent}”搜索结果` : '我的项目';
@@ -302,6 +307,9 @@ export default {
hideSearchBar() {
this.isShowSearchBar = false;
this.searchContent = '';
},
showSearchBar() {
this.isShowSearchBar = true;
},
searchForProj: debounce(async function searchForProj() {
// 判断输入内容是否有效


+ 9
- 5
src/views/main_web/workspace/workspace.new.vue View File

@@ -25,13 +25,13 @@
/>
</template>
<template #right>
<search-bar v-if="isShowSearchBar" class="proj-search-bar"
<search-bar class="proj-search-bar"
placeholder="请输入要搜索的文件名"
@changeSearchContent="changeSearchContent"
@hideSearchBar="hideSearchBar"
@goToSearch="searchForFile"
@showSearchBar="showSearchBar"
@maxTextLengthArrived="maxTextLengthArrived"/>
<div class="search-entry" @click.stop="isShowSearchBar = true" v-if="!isShowSearchBar"></div>
</template>
</app-header>
<div v-if="isShowSearchPage" class="search-res-page">
@@ -64,7 +64,7 @@
@dragstart.native="onfileDragStart(file, $event)"
draggable
/>
<div class="no-file-tips" v-if="searchWorkFileList && searchWorkFileList.length == 0">搜索不到与“{{searchContent}}”相关的文件</div>
<div class="no-file-tips" v-if="searchWorkFileList && searchWorkFileList.length == 0">搜索不到与“{{searchContent}}”相关的工作文件</div>
</div>
<div class="list-group" v-else-if="currentBtnIndex == 1">
<!-- 协作文件 -->
@@ -87,7 +87,7 @@
@dragstart.native="onfileDragStart(file, $event)"
draggable
/>
<div class="no-file-tips" v-if="searchCoopFileList && searchCoopFileList.length == 0">搜索不到与“{{searchContent}}”相关的文件</div>
<div class="no-file-tips" v-if="searchCoopFileList && searchCoopFileList.length == 0">搜索不到与“{{searchContent}}”相关的协作文件</div>
</div>
</div>
</div>
@@ -635,7 +635,7 @@ export default {
exchangeNodeListsInCoop: [],//存储与当前节点具有交换关系的节点列表
reverseLocalFileHashMap: {},//键名是 ipfscid 键值是localFileHashMap的键名
currentBtnIndex: -1,//0 是工作文件按钮 1是协作文件按钮
currentBtnIndex: 0,//0 是工作文件按钮 1是协作文件按钮
titleList: ['工作文件', '协作文件'],
isShowSearchBar: false,//控制搜索框显示隐藏
searchContent: '',//搜索的文件名称
@@ -728,6 +728,10 @@ export default {
hideSearchBar() {
this.isShowSearchBar = false;
this.searchContent = '';
this.currentBtnIndex = 0;
},
showSearchBar() {
this.isShowSearchBar = true;
},
searchForFile: debounce(async function() {
const rg = /^\s*$/;


Write Preview
Loading…
Cancel
Save