Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[SSE] Added tooltips to pivot listview.

Browse source
This commit is contained in:
Julia Radzhabova 2017-07-12 15:15:11 +03:00
parent b4abfccce0
commit 2c89aa3adb
3 changed files with 64 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
apps/spreadsheeteditor/main/app/template/PivotSettings.template
View file

@ -6,7 +6,7 @@
</tr> </tr>
<tr> <tr>
<td colspan=2 class="padding-large"> <td colspan=2 class="padding-large">
<div class="" id="pivot-list-fields" style="width: 100%; height: 250px; background-color: #fff;"></div> <div id="pivot-list-fields" class="pivot-check-listview"></div>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -19,10 +19,10 @@
</tr> </tr>
<tr> <tr>
<td class="padding-small"> <td class="padding-small">
<div id="pivot-list-filters" style="width: 95px; height: 130px; background-color: #fff;"></div> <div id="pivot-list-filters" class="pivot-listview"></div>
</td> </td>
<td class="padding-small"> <td class="padding-small">
<div id="pivot-list-columns" style="width: 95px; height: 130px; margin-left: 3px; background-color: #fff;"></div> <div id="pivot-list-columns" class="pivot-listview" style="margin-left: 3px;"></div>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -35,10 +35,10 @@
</tr> </tr>
<tr> <tr>
<td class="padding-large"> <td class="padding-large">
<div id="pivot-list-rows" style="width: 95px; height: 130px; background-color: #fff;"></div> <div id="pivot-list-rows" class="pivot-listview"></div>
</td> </td>
<td class="padding-large"> <td class="padding-large">
<div id="pivot-list-values" style="width: 95px; height: 130px; margin-left: 3px; background-color: #fff;"></div> <div id="pivot-list-values" class="pivot-listview" style="margin-left: 3px;"></div>
</td> </td>
</tr> </tr>
<tr> <tr>

37
apps/spreadsheeteditor/main/app/view/PivotSettings.js
View file

@ -191,7 +191,7 @@ define([
'<input type="button" class="img-commonctrl"/>', '<input type="button" class="img-commonctrl"/>',
'<% } %>', '<% } %>',
'</label>', '</label>',
'<div id="<%= id %>" class="list-item" style="pointer-events:none;margin-left:20px;display:inline-block;width: 160px;"><%= Common.Utils.String.htmlEncode(value) %></div>', '<div id="<%= id %>" class="list-item" style="pointer-events:none;"><%= Common.Utils.String.htmlEncode(value) %></div>',
'</div>' '</div>'
].join('')) ].join(''))
}); });
@ -208,7 +208,7 @@ define([
template: _.template(['<div class="listview inner" style=""></div>'].join('')), template: _.template(['<div class="listview inner" style=""></div>'].join('')),
itemTemplate: _.template([ itemTemplate: _.template([
'<div id="<%= id %>" class="list-item" style="display:inline-block;">', '<div id="<%= id %>" class="list-item" style="display:inline-block;">',
'<div style="width:70px;padding-right: 5px;"><%= Common.Utils.String.htmlEncode(value) %></div>', '<div style=""><%= Common.Utils.String.htmlEncode(value) %></div>',
'<div class="listitem-icon"></div>', '<div class="listitem-icon"></div>',
'</div>' '</div>'
].join('')) ].join(''))
@ -224,7 +224,7 @@ define([
template: _.template(['<div class="listview inner" style=""></div>'].join('')), template: _.template(['<div class="listview inner" style=""></div>'].join('')),
itemTemplate: _.template([ itemTemplate: _.template([
'<div id="<%= id %>" class="list-item" style="display:inline-block;">', '<div id="<%= id %>" class="list-item" style="display:inline-block;">',
'<div style="width:70px;padding-right: 5px;"><%= Common.Utils.String.htmlEncode(value) %></div>', '<div style=""><%= Common.Utils.String.htmlEncode(value) %></div>',
'<div class="listitem-icon"></div>', '<div class="listitem-icon"></div>',
'</div>' '</div>'
].join('')) ].join(''))
@ -240,7 +240,7 @@ define([
template: _.template(['<div class="listview inner" style=""></div>'].join('')), template: _.template(['<div class="listview inner" style=""></div>'].join('')),
itemTemplate: _.template([ itemTemplate: _.template([
'<div id="<%= id %>" class="list-item" style="display:inline-block;">', '<div id="<%= id %>" class="list-item" style="display:inline-block;">',
'<div style="width:70px;padding-right: 5px;"><%= Common.Utils.String.htmlEncode(value) %></div>', '<div style=""><%= Common.Utils.String.htmlEncode(value) %></div>',
'<div class="listitem-icon"></div>', '<div class="listitem-icon"></div>',
'</div>' '</div>'
].join('')) ].join(''))
@ -256,7 +256,7 @@ define([
template: _.template(['<div class="listview inner" style=""></div>'].join('')), template: _.template(['<div class="listview inner" style=""></div>'].join('')),
itemTemplate: _.template([ itemTemplate: _.template([
'<div id="<%= id %>" class="list-item" style="display:inline-block;">', '<div id="<%= id %>" class="list-item" style="display:inline-block;">',
'<div style="width:70px;padding-right: 5px;"><%= Common.Utils.String.htmlEncode(value) %></div>', '<div style=""><%= Common.Utils.String.htmlEncode(value) %></div>',
'<div class="listitem-icon"></div>', '<div class="listitem-icon"></div>',
'</div>' '</div>'
].join('')) ].join(''))
@ -303,7 +303,8 @@ define([
this._state.TableName=props.asc_getName(); this._state.TableName=props.asc_getName();
var cache_names = props.asc_getCacheFields(), var me = this,
cache_names = props.asc_getCacheFields(),
pivot_names = props.asc_getPivotFields(), pivot_names = props.asc_getPivotFields(),
names = []; names = [];
pivot_names.forEach(function (item, index) { pivot_names.forEach(function (item, index) {
@ -314,13 +315,14 @@ define([
value = props.asc_getColumnFields(); value = props.asc_getColumnFields();
value && value.forEach(function (item) { value && value.forEach(function (item) {
var index = item.asc_getIndex(); var index = item.asc_getIndex();
if (index>-1) { if (index>-1 || index == -2) {
var name = names[index]; var name = (index>-1) ? names[index] : me.textValues;
arr.push(new Common.UI.DataViewModel({ arr.push(new Common.UI.DataViewModel({
selected : false, selected : false,
allowSelected : true, allowSelected : true,
index : index, index : index,
value : name value : name,
tip : (name.length>10) ? name : ''
})); }));
isChecked[name] = true; isChecked[name] = true;
} }
@ -332,13 +334,14 @@ define([
value = props.asc_getRowFields(); value = props.asc_getRowFields();
value && value.forEach(function (item) { value && value.forEach(function (item) {
var index = item.asc_getIndex(); var index = item.asc_getIndex();
if (index>-1) { if (index>-1 || index == -2) {
var name = names[index]; var name = (index>-1) ? names[index] : me.textValues;
arr.push(new Common.UI.DataViewModel({ arr.push(new Common.UI.DataViewModel({
selected : false, selected : false,
allowSelected : true, allowSelected : true,
index : index, index : index,
value : name value : name,
tip : (name.length>10) ? name : ''
})); }));
isChecked[name] = true; isChecked[name] = true;
} }
@ -351,13 +354,13 @@ define([
value && value.forEach(function (item) { value && value.forEach(function (item) {
var index = item.asc_getIndex(); var index = item.asc_getIndex();
if (index>-1) { if (index>-1) {
var name = names[index]; var name = item.asc_getName();
arr.push(new Common.UI.DataViewModel({ arr.push(new Common.UI.DataViewModel({
selected : false, selected : false,
allowSelected : true, allowSelected : true,
index : index, index : index,
// value : name value : name,
value : item.asc_getName() tip : (name.length>10) ? name : ''
})); }));
isChecked[name] = true; isChecked[name] = true;
} }
@ -375,7 +378,8 @@ define([
selected : false, selected : false,
allowSelected : true, allowSelected : true,
index : index, index : index,
value : name value : name,
tip : (name.length>10) ? name : ''
})); }));
isChecked[name] = true; isChecked[name] = true;
} }
@ -389,6 +393,7 @@ define([
selected : false, selected : false,
allowSelected : true, allowSelected : true,
value : item, value : item,
tip : (name.length>25) ? name : '',
check : isChecked[item] check : isChecked[item]
})); }));
}); });

37
apps/spreadsheeteditor/main/resources/less/rightmenu.less
View file

@ -332,3 +332,40 @@ button:active:not(.disabled) .btn-change-shape {background-position: -56px -
#table-combo-template .combo-dataview{ #table-combo-template .combo-dataview{
.combo-template(60px); .combo-template(60px);
} }
.pivot-check-listview {
background-color: #fff;
width: 100%;
height: 250px;
.list-item {
width: 160px;
margin-left:20px;
display: inline-block;
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
}
.pivot-listview {
background-color: #fff;
width: 95px;
height: 130px;
.list-item > div:nth-child(1) {
width:70px;
padding-right: 5px;
display: inline-block;
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
.listitem-icon {
display: inline;
vertical-align: middle;
}
}