Skip to content

iBiz-Vue-Mob-R7
iBiz-Vue-Mob-R7
提交 68031f88 编写于 作者: zhujiamin's avatar zhujiamin
浏览文件
操作

工具栏样式更改

上级 7e91c348
隐藏空白字符变更
内嵌 并排
正在显示 包含 82 行增加 和 62 行删除
@CONTROL/视图布局面板/@MACRO/DEFAULT.less.ftl
浏览文件 @ 68031f88
...@@ -56,53 +56,61 @@ ${css.getCssStyle()} ...@@ -56,53 +56,61 @@ ${css.getCssStyle()}
<#list view.getAllPSControls() as ctrl> <#list view.getAllPSControls() as ctrl>
<#if ctrl.getControlType() == 'MOBMDCTRL' || ctrl.getControlType() == 'DATAVIEW' && ctrl.isNoSort() == false> <#if ctrl.getControlType() == 'MOBMDCTRL' || ctrl.getControlType() == 'DATAVIEW' && ctrl.isNoSort() == false>
//排序样式 //排序样式
.${srffilepath2(view.getCodeName())}-toolbar{ .mdview-tools{
z-index:10; display: flex;
.code-box{ justify-content: flex-start;
overflow-x: auto; align-items: center;
.ibz-item{ .${srffilepath2(view.getCodeName())}-toolbar{
--inner-border-width:0; width: 22%;
min-width: 50%; --padding-end: 0;
} z-index:10;
} .code-box{
.view-tool { overflow-x: auto;
display: flex; .ibz-item{
padding: 0 @padding-sm; --inner-border-width:0;
&-sorts { min-width: 50%;
display: flex; }
flex-grow: 1; }
&-item { .view-tool {
display: flex; display: flex;
padding-right: @margin-sm; padding: 0 0 0 @padding-sm ;
height: 24px; &-sorts {
font-size: @font-size-md; display: flex;
align-items: center; flex-grow: 1;
.text { &-item {
display: flex; display: flex;
flex-grow: 1; padding-right: @margin-sm;
} height: 24px;
.sort-icon { font-size: @font-size-md;
display: flex; align-items: center;
flex-direction: column; .text {
width: 20px; display: flex;
padding-left: @padding-base; flex-grow: 1;
justify-content: center; font-size: 15px;
ion-icon { }
font-size: @font-size-xs - 1; .sort-icon {
} display: flex;
.sort-select{ flex-direction: column;
color: #3880ff;; width: 20px;
} padding-left: @padding-base;
} justify-content: center;
} ion-icon {
} font-size: @font-size-xs - 1;
&-searchform { }
display: flex; .sort-select{
width: 60px; color: #3880ff;;
justify-content: flex-end; }
align-items: center; }
} }
} }
&-searchform {
display: flex;
width: 60px;
justify-content: flex-end;
align-items: center;
}
}
}
} }
</#if> </#if>
</#list> </#list>
......
@CONTROL/视图布局面板/@MACRO/MOB_MD_VIEW.vue.ftl
浏览文件 @ 68031f88
...@@ -19,23 +19,24 @@ ...@@ -19,23 +19,24 @@
</#list> </#list>
<#if state> <#if state>
<#assign view_header_botton> <#assign view_header_botton>
<ion-toolbar class="${srffilepath2(view.getCodeName())}-toolbar default-sort"> <div class="mdview-tools">
<div class="view-tool"> <ion-toolbar class="${srffilepath2(view.getCodeName())}-toolbar default-sort">
<div class="view-tool-sorts"> <div class="view-tool">
<#list mdctrl.getPSListItems() as item> <div class="view-tool-sorts">
<#if item.isEnableSort() && item.getItemType() == 'ACTIONITEM'> <#list mdctrl.getPSListItems() as item>
<div class="view-tool-sorts-item"> <#if item.isEnableSort() && item.getItemType() == 'ACTIONITEM'>
<span class="text" @click="onSort('<#if item.getName()??>${item.getName()}</#if>')"><#if item.getCaption()??>${item.getCaption()}</#if></span> <div class="view-tool-sorts-item">
<span class="sort-icon" @click="onSort('<#if item.getName()??>${item.getName()}</#if>')"> <span :class="{text:true,active:hasColor}" @click="onSort('<#if item.getName()??>${item.getName()}</#if>')"><#if item.getCaption()??>${item.getCaption()}</#if></span>
<ion-icon :class="{'ios' : true ,'hydrated': true ,'sort-select': sort.asc == '<#if item.getName()??>${item.getName()}</#if>'}" name="chevron-up-outline" ></ion-icon> <span class="sort-icon" @click="onSort('<#if item.getName()??>${item.getName()}</#if>')">
<ion-icon :class="{'ios' : true ,'hydrated': true ,'sort-select': sort.desc == '<#if item.getName()??>${item.getName()}</#if>'}" name="chevron-down-outline" ></ion-icon> <ion-icon :class="{'ios' : true ,'hydrated': true ,'sort-select': sort.asc == '<#if item.getName()??>${item.getName()}</#if>'}" name="chevron-up-outline" ></ion-icon>
</span> <ion-icon :class="{'ios' : true ,'hydrated': true ,'sort-select': sort.desc == '<#if item.getName()??>${item.getName()}</#if>'}" name="chevron-down-outline" ></ion-icon>
</span>
</div>
</#if>
</#list>
</div> </div>
</#if>
</#list>
</div> </div>
</div> </ion-toolbar>
</ion-toolbar>
<div style="display:flex;overflow: auto;"> <div style="display:flex;overflow: auto;">
<#list mdctrl.getPSListItems() as item> <#list mdctrl.getPSListItems() as item>
<#if item.isEnableSort() && item.getPSCodeList?? && item.getPSCodeList()??> <#if item.isEnableSort() && item.getPSCodeList?? && item.getPSCodeList()??>
...@@ -46,6 +47,7 @@ ...@@ -46,6 +47,7 @@
</#if> </#if>
</#list> </#list>
</div> </div>
</div>
</#assign> </#assign>
</#if> </#if>
</#if> </#if>
......
@VIEW/@MACRO/MOBMDVIEW.vue.ftl
浏览文件 @ 68031f88
...@@ -132,6 +132,13 @@ ...@@ -132,6 +132,13 @@
*/ */
public sort: any = { asc: "", desc: "" }; public sort: any = { asc: "", desc: "" };
/**
* 点击优先级加主题色
*
* @memberof ${srfclassname('${view.name}')}Base
*/
public hasColor:boolean = false;
/** /**
* 排序 * 排序
* *
...@@ -143,6 +150,7 @@ ...@@ -143,6 +150,7 @@
this.sort.desc = ""; this.sort.desc = "";
this.sortValue = {}; this.sortValue = {};
this.onViewLoad(); this.onViewLoad();
this.hasColor = false;
return return
} }
if (this.sort.asc == field) { if (this.sort.asc == field) {
...@@ -150,11 +158,13 @@ ...@@ -150,11 +158,13 @@
this.sort.desc = field; this.sort.desc = field;
this.sortValue = { sort: field + ",desc" }; this.sortValue = { sort: field + ",desc" };
this.onViewLoad(); this.onViewLoad();
this.hasColor = true;
} else { } else {
this.sort.asc = field; this.sort.asc = field;
this.sort.desc = ""; this.sort.desc = "";
this.sortValue = { sort: field + ",asc" }; this.sortValue = { sort: field + ",asc" };
this.onViewLoad(); this.onViewLoad();
this.hasColor = true;
} }
} }
</#if> </#if>
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或