elink-star
/
luckysheet
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

style(right menu): right menu 

1.remove right menu comfirm button 2.fix iconfont disappear
master
Dushusir 5 years ago
parent
373dc4f464
commit
83cb048a96
14 changed files with 117 additions and 49 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 20
      docs/guide/api.md
  2. 21
      docs/zh/guide/api.md
  3. 30
      src/controllers/constant.js
  4. 18
      src/controllers/matrixOperation.js
  5. 6
      src/controllers/menuButton.js
  6. 8
      src/controllers/resize.js
  7. 2
      src/controllers/selection.js
  8. 6
      src/controllers/sheetmanage.js
  9. 2
      src/css/iconCustom.css
  10. 41
      src/css/luckysheet-core.css
  11. 4
      src/global/createdom.js
  12. 2
      src/index.html
  13. 4
      src/locale/en.js
  14. 2
      src/locale/zh.js

20
docs/guide/api.md
View File

@ -2026,6 +2026,26 @@ Use note:
------------
### scroll([setting])
[todo]
- **参数**：
- {PlainObject} [setting]: optional parameters
+ {Number} [scrollWidth]: horizontal scroll value. The default is the current horizontal scroll position.
+ {Number} [scrollHeight]: Vertical scroll value. The default is the current vertical scroll position.
+ {Number} [targetRow]: Scroll vertically to the specified row number. The default is the current vertical scroll position.
+ {Number} [targetColumn]: scroll horizontally to the specified column number. The default is the current horizontal scroll position.
+ {Function} [success]: The callback function after the table is refreshed successfully
- **说明**：
Scroll current worksheet position
------------
### resize([setting])
- **Parameter**：

21
docs/zh/guide/api.md
View File

@ -1973,6 +1973,26 @@ Luckysheet针对常用的数据操作需求，开放了主要功能的API，开
------------
### scroll([setting])
[todo]
- **参数**：
- {PlainObject} [setting]: 可选参数
+ {Number} [scrollWidth]：横向滚动值。默认为当前横向滚动位置。
+ {Number} [scrollHeight]：纵向滚动值。默认为当前纵向滚动位置。
+ {Number} [targetRow]：纵向滚动到指定的行号。默认为当前纵向滚动位置。
+ {Number} [targetColumn]：横向滚动到指定的列号。默认为当前横向滚动位置。
+ {Function} [success]: 表格刷新成功后的回调函数
- **说明**：
滚动当前工作表位置
------------
### resize([setting])
- **参数**：
@ -2278,6 +2298,7 @@ Luckysheet针对常用的数据操作需求，开放了主要功能的API，开
按照scrollWidth, scrollHeight刷新canvas展示数据。
> 推荐使用新API： [scroll](#scroll([setting]))
------------
### setcellvalue(r, c, d, v)

30
src/controllers/constant.js
View File

@ -315,7 +315,7 @@ function rightclickHTML(){
<div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
<span class="luckysheet-cols-rows-shift-word luckysheet-mousedown-cancel">${rightclick.column}</span>
<span class="luckysheet-cols-rows-shift-size luckysheet-mousedown-cancel">${rightclick.width}</span>
<input type="number" class="luckysheet-mousedown-cancel rcsize" min="0" max="255" placeholder="${rightclick.number}" value="" style="width:40px;height:20px;box-sizing:border-box;text-align: center;;margin-left:5px;">
<input type="number" class="luckysheet-mousedown-cancel rcsize" min="0" max="255" placeholder="${rightclick.number}" value="" style="width:50px;height:20px;box-sizing:border-box;text-align: center;;margin-left:5px;">
px
</div>
</div>
@ -357,12 +357,11 @@ function rightclickHTML(){
</div>
</div>
<div id="luckysheetcopyfor_sub" class="luckysheet-cols-menu luckysheet-rightgclick-menu luckysheet-rightgclick-menu-sub luckysheet-mousedown-cancel">
<div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
<div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
Json
<button id="luckysheet-copy-json-head" data-clipboard-action="copy" data-clipboard-target="#luckysheet-copy-content" class="btn btn-primary luckysheet-copy-btn luckysheet-mousedown-cancel" style="margin-left:5px;padding:2px 3px;line-height:12px;font-size:12px;">${rightclick.firstLineTitle}</button>
<button id="luckysheet-copy-json-nohead" class="btn btn-primary luckysheet-copy-btn luckysheet-mousedown-cancel" data-clipboard-action="copy" data-clipboard-target="#luckysheet-copy-content" style="margin-left:5px;padding:2px 3px;line-height:12px;font-size:12px;">${rightclick.untitled}</button>
</div>
<div id="luckysheet-copy-json-head" data-clipboard-action="copy" data-clipboard-target="#luckysheet-copy-content" class="luckysheet-cols-menuitem luckysheet-copy-btn luckysheet-mousedown-cancel">
<div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">Json ${rightclick.firstLineTitle}</div>
</div>
<div id="luckysheet-copy-json-nohead" data-clipboard-action="copy" data-clipboard-target="#luckysheet-copy-content" class="luckysheet-cols-menuitem luckysheet-copy-btn luckysheet-mousedown-cancel">
<div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">Json ${rightclick.untitled}</div>
</div>
<div id="luckysheet-copy-array1" data-clipboard-action="copy" data-clipboard-target="#luckysheet-copy-content" class="luckysheet-cols-menuitem luckysheet-copy-btn luckysheet-mousedown-cancel">
<div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${rightclick.array1}</div>
@ -370,15 +369,12 @@ function rightclickHTML(){
<div id="luckysheet-copy-array2" data-clipboard-action="copy" data-clipboard-target="#luckysheet-copy-content" class="luckysheet-cols-menuitem luckysheet-copy-btn luckysheet-mousedown-cancel">
<div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${rightclick.array2}</div>
</div>
<div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
<div id="luckysheet-copy-arraymore-confirm" data-clipboard-action="copy" data-clipboard-target="#luckysheet-copy-content" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
<div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
<div class="luckysheet-mousedown-cancel">${rightclick.array3}</div>
<div>
<input type="number" id="luckysheet-copy-arraymore-row" min="1" class="luckysheet-mousedown-cancel" placeholder="${rightclick.row}" style="width:40px;height:20px;box-sizing:border-box;text-align: center;;"/>
<span class="luckysheet-mousedown-cancel">${rightclick.array3}</span>
<input type="number" id="luckysheet-copy-arraymore-row" min="1" class="luckysheet-mousedown-cancel" placeholder="${rightclick.row}" style="width:40px;height:20px;box-sizing:border-box;text-align: center;;"/>
×
<input type="number" id="luckysheet-copy-arraymore-col" min="1" class="luckysheet-mousedown-cancel" placeholder="${rightclick.column}" style="width:40px;height:20px;box-sizing:border-box;text-align: center;;"/>
<button id="luckysheet-copy-arraymore-confirm" data-clipboard-action="copy" data-clipboard-target="#luckysheet-copy-content" class="btn btn-primary luckysheet-copy-btn luckysheet-mousedown-cancel" style="margin-left:5px;padding:2px 3px;line-height:12px;font-size:12px;">${rightclick.confirm}</button>
</div>
</div>
</div>
<div class="luckysheet-menuseparator luckysheet-mousedown-cancel" role="separator"></div>
@ -388,12 +384,11 @@ function rightclickHTML(){
<div id="luckysheet-copy-antidiagonal" data-clipboard-action="copy" data-clipboard-target="#luckysheet-copy-content" class="luckysheet-cols-menuitem luckysheet-copy-btn luckysheet-mousedown-cancel">
<div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${rightclick.antiDiagonal}</div>
</div>
<div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
<div id="luckysheet-copy-diagonaloffset" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
<div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
${rightclick.diagonalOffset}
<input type="number" id="luckysheet-copy-diagonaloffset-value" class="luckysheet-mousedown-cancel" placeholder="${rightclick.offset}" value="1" style="width:40px;height:20px;box-sizing:border-box;text-align: center;;margin-left:5px;"/>
${rightclick.column}
<button id="luckysheet-copy-diagonaloffset" class="btn btn-primary luckysheet-copy-btn luckysheet-mousedown-cancel" data-clipboard-action="copy" data-clipboard-target="#luckysheet-copy-content" style="margin-left:5px;padding:2px 3px;line-height:12px;font-size:12px;">${rightclick.confirm}</button>
</div>
</div>
<div id="luckysheet-copy-boolvalue" data-clipboard-action="copy" data-clipboard-target="#luckysheet-copy-content" class="luckysheet-cols-menuitem luckysheet-copy-btn luckysheet-mousedown-cancel">
@ -495,11 +490,11 @@ function rightclickHTML(){
<div id="luckysheet-matrix-turn-trans" class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${rightclick.transpose}</div>
</div>
<div class="luckysheet-menuseparator luckysheet-mousedown-cancel" role="separator"></div>
<div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
<div id="luckysheet-matrix-cal-confirm" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
<div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
<div class="luckysheet-mousedown-cancel">${rightclick.matrixCalculation}</div>
<div class="luckysheet-mousedown-cancel">
<select id="luckysheet-matrix-cal-type" class="luckysheet-mousedown-cancel" style="height:24px;">
<select id="luckysheet-matrix-cal-type" class="luckysheet-mousedown-cancel" style="height:20px;">
<option value="plus">${rightclick.plus}</option>
<option value="minus">${rightclick.minus}</option>
<option value="multiply">${rightclick.multiply}</option>
@ -509,7 +504,6 @@ function rightclickHTML(){
<option value="log">${rightclick.log}</option>
</select>
<input type="number" id="luckysheet-matrix-cal-value" class="luckysheet-mousedown-cancel" placeholder="${rightclick.number}" value="2" style="width:40px;height:20px;box-sizing:border-box;text-align: center;;margin-left:5px;"/>
<button id="luckysheet-matrix-cal-confirm" class="btn btn-primary luckysheet-mousedown-cancel" style="margin-left:5px;padding:2px 3px;line-height:12px;font-size:12px;">${rightclick.confirm}</button>
</div>
</div>
</div>

18
src/controllers/matrixOperation.js
View File

@ -269,6 +269,12 @@ export function initialMatrixOperation(){
//复制为多维数组
$("#luckysheet-copy-arraymore-confirm").click(function (event) {
// Click input element, don't comfirm
if(event.target.nodeName === 'INPUT'){
return;
}
$("body .luckysheet-cols-menu").hide();
if(Store.luckysheet_select_save.length > 1){
@ -509,6 +515,12 @@ export function initialMatrixOperation(){
//复制为对角偏移n列
$("#luckysheet-copy-diagonaloffset").click(function (event) {
// Click input element, don't comfirm
if(event.target.nodeName === 'INPUT'){
return;
}
$("body .luckysheet-cols-menu").hide();
luckysheetContainerFocus();
@ -870,6 +882,12 @@ export function initialMatrixOperation(){
//矩阵操作选区 矩阵计算
$("#luckysheet-matrix-cal-confirm").click(function (event) {
// Click input element, don't comfirm
if(event.target.nodeName === 'INPUT' || event.target.nodeName === 'SELECT'){
return;
}
$("body .luckysheet-cols-menu").hide();
luckysheetContainerFocus();

6
src/controllers/menuButton.js
View File

@ -39,7 +39,7 @@ import locale from '../locale/locale';
const menuButton = {
"menu": '<div class="luckysheet-cols-menu luckysheet-rightgclick-menu luckysheet-menuButton ${subclass} luckysheet-mousedown-cancel" id="luckysheet-icon-${id}-menuButton">${item}</div>',
// "item": '<div itemvalue="${value}" itemname="${name}" class="luckysheet-cols-menuitem ${sub} luckysheet-mousedown-cancel"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel" style="padding: 3px 0px 3px 1px;"><span style="margin-right:3px;width:13px;display:inline-block;" class="icon luckysheet-mousedown-cancel"></span> ${name} <span class="luckysheet-submenu-arrow luckysheet-mousedown-cancel" style="user-select: none;">${example}</span></div></div>',
"item": '<div itemvalue="${value}" itemname="${name}" class="luckysheet-cols-menuitem ${sub} luckysheet-mousedown-cancel"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel" style="padding: 3px 0px 3px 1px;"><span style="margin-right:3px;width:13px;display:inline-block;" class="icon luckysheet-mousedown-cancel"></span> ${name} <span class="luckysheet-submenu-arrow luckysheet-mousedown-cancel ${iconClass}" style="user-select: none;"></span></div></div>',
"item": '<div itemvalue="${value}" itemname="${name}" class="luckysheet-cols-menuitem ${sub} luckysheet-mousedown-cancel"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel" style="padding: 3px 0px 3px 1px;"><span style="margin-right:3px;width:13px;display:inline-block;" class="icon luckysheet-mousedown-cancel"></span> ${name} <span class="luckysheet-submenu-arrow luckysheet-mousedown-cancel ${iconClass}" style="user-select: none;">${example}</span></div></div>',
"split": '<div class="luckysheet-menuseparator luckysheet-mousedown-cancel" role="separator"></div>',
"color": '<div class="luckysheet-cols-menu luckysheet-rightgclick-menu luckysheet-rightgclick-menu-sub luckysheet-mousedown-cancel luckysheet-menuButton ${sub}" id="${id}"><div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel luckysheet-color-reset"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${resetColor}</div></div> <div class="luckysheet-mousedown-cancel"> <div class="luckysheet-mousedown-cancel"> <input type="text" class="luckysheet-color-selected" /> </div> </div> <div class="luckysheet-menuseparator luckysheet-mousedown-cancel" role="separator"></div> ${coloritem}</div>',
"coloritem": '<div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel ${class}"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${name}</div></div>',
@ -68,11 +68,11 @@ const menuButton = {
else{
if(item.example=="more"){
// itemset += replaceHtml(_this.item, {"value": item.value, "name": item.text, "example": "►", "sub": "luckysheet-cols-submenu"});
itemset += replaceHtml(_this.item, {"value": item.value, "name": item.text, "sub": "luckysheet-cols-submenu", "iconClass": "iconfont icon-youjiantou"});
itemset += replaceHtml(_this.item, {"value": item.value, "name": item.text, "example": "", "sub": "luckysheet-cols-submenu", "iconClass": "iconfont icon-youjiantou"});
}
else{
itemset += replaceHtml(_this.item, {"value": item.value, "name": item.text, "example": item.example, "sub": ""});
itemset += replaceHtml(_this.item, {"value": item.value, "name": item.text, "example": item.example, "sub": "", "iconClass": ""});
}
}
}

8
src/controllers/resize.js
View File

@ -136,13 +136,17 @@ export default function luckysheetsizeauto(isRefreshCanvas=true) {
// 找到应该隐藏的起始元素位置
for (let index = toobarWidths.length - 1; index >= 0; index--) {
// #luckysheet-icon-morebtn button width plus right is 83px
if(toobarWidths[index] < gridW - 90){
moreButtonIndex = index;
ismore = true;
if(moreButtonIndex !== 33){
ismore = true;
}
break;
}
}
// 从起始位置开始，后面的元素统一挪到下方隐藏DIV中
for (let index = moreButtonIndex; index < toobarElements.length; index++) {
const element = toobarElements[index];

2
src/controllers/selection.js
View File

@ -531,7 +531,7 @@ const selection = {
copybyformat: function (e, txt) {//copy事件
let clipboardData = window.clipboardData; //for IE
if (!clipboardData) { // for chrome
clipboardData = e.originalEvent.clipboardData;
clipboardData = e.originalEvent && e.originalEvent.clipboardData;
}
Store.luckysheet_selection_range = [{ "row": Store.luckysheet_select_save[0].row, "column": Store.luckysheet_select_save[0].column }];

6
src/controllers/sheetmanage.js
View File

@ -25,7 +25,7 @@ import { selectHightlightShow, selectionCopyShow } from './select';
import Store from '../store';
import locale from '../locale/locale';
import { renderChartShow } from '../expendPlugins/chart/plugin';
import {changeSheetContainerSize} from './resize';
import {changeSheetContainerSize, menuToolBarWidth} from './resize';
import {zoomNumberDomBind} from './zoom';
const sheetmanage = {
@ -749,6 +749,10 @@ const sheetmanage = {
else {
Store.luckysheetcurrentisPivotTable = false;
$("#luckysheet-modal-dialog-slider-pivot").hide();
// Store toolbar button width value
menuToolBarWidth();
luckysheetsizeauto();
//等待滚动条dom宽高加载完成后 初始化滚动位置

2
src/css/iconCustom.css
View File

@ -41,7 +41,7 @@
}
#luckysheet-icon-morebtn{
padding: 0 13px 0 5px;
padding: 2px 13px 0 5px;
}
#luckysheet-icon-morebtn .iconfont{
top:-9px;

41
src/css/luckysheet-core.css
View File

@ -774,10 +774,10 @@
margin-right: 0px;
}
.luckysheet-icon-autofilter {
/* .luckysheet-icon-autofilter {
left: -36px;
top: -406px;
}
} */
#luckysheet-icon-pivotTable .luckysheet-toolbar-menu-button-caption {
color: #0188fb;
@ -2614,7 +2614,7 @@ body:not(.ewa-ipad) .luckysheet-rows-h-cell-sel:hover {
padding: 4px 8px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
border-radius: 2px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
@ -2730,29 +2730,35 @@ fieldset[disabled] .btn-default.focus {
.btn-primary {
color: #ffffff;
background-color: #337ab7;
border-color: #2e6da4;
/* background-color: #337ab7; */
background-color: #2D7FF9;
/* border-color: #2e6da4; */
border-color:transparent;
}
.btn-primary:focus,
.btn-primary.focus {
color: #ffffff;
background-color: #286090;
border-color: #122b40;
/* border-color: #122b40; */
border-color:transparent;
}
.btn-primary:hover {
color: #ffffff;
background-color: #286090;
border-color: #204d74;
/* background-color: #286090; */
background-color: #5391ff;
/* border-color: #204d74; */
border-color:transparent;
}
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
color: #ffffff;
background-color: #286090;
border-color: #204d74;
/* background-color: #286090; */
background-color: #5391ff;
/* border-color: #204d74; */
}
.btn-primary:active:hover,
@ -2766,7 +2772,8 @@ fieldset[disabled] .btn-default.focus {
.open>.dropdown-toggle.btn-primary.focus {
color: #ffffff;
background-color: #204d74;
border-color: #122b40;
/* border-color: #122b40; */
border-color:transparent;
}
.btn-primary:active,
@ -2794,7 +2801,8 @@ fieldset[disabled] .btn-primary:active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
background-color: #337ab7;
border-color: #2e6da4;
/* border-color: #2e6da4; */
border-color:transparent;
}
.btn-primary .badge {
@ -2808,13 +2816,16 @@ fieldset[disabled] .btn-primary.active {
.list-group-item.active:hover,
.list-group-item.active:focus {
background: #0188FB;
border-color: #726EFE;
/* border-color: #726EFE; */
border-color:transparent;
}
.btn-primary:hover,
.btn-primary:focus {
background: #388cf5;
border-color: #6864FE;
/* background: #388cf5; */
background: #5391ff;
/* border-color: #6864FE; */
border-color:transparent;
}

4
src/global/createdom.js
View File

@ -19,7 +19,6 @@ import rhchInit from './rhchInit';
import { replaceHtml } from '../utils/util';
import Store from '../store';
import locale from '../locale/locale';
import {menuToolBarWidth} from '../controllers/resize'
export default function luckysheetcreatedom(colwidth, rowheight, data, menu, title) {
// //最少30行
@ -99,9 +98,6 @@ export default function luckysheetcreatedom(colwidth, rowheight, data, menu, tit
$("#" + Store.container).append(gh);
//统计工具栏按钮宽度值
menuToolBarWidth();
$("#luckysheet-scrollbar-x div").width(Store.ch_width);
$("#luckysheet-scrollbar-y div").height(Store.rh_height + Store.columeHeaderHeight - Store.cellMainSrollBarSize - 3);

2
src/index.html
View File

@ -76,7 +76,7 @@
luckysheet.create({
container: 'luckysheet',
lang: 'en',
lang: 'zh',
allowEdit:true,
forceCalculation:false,
plugins: ['chart'],

4
src/locale/en.js
View File

@ -521,8 +521,8 @@ export default {
sortSelection: 'Sort',
filterSelection: 'Filter',
chartGeneration: 'Create chart',
firstLineTitle: 'First line title',
untitled: 'Untitled',
firstLineTitle: 'first line title',
untitled: 'untitled',
array1: 'One-dimensional array',
array2: 'Two-dimensional array',
array3: 'Multidimensional Arrays',

2
src/locale/zh.js
View File

@ -408,7 +408,7 @@ export default {
"clip":"截断",
},
rotation:{
"none":"无选装",
"none":"无旋转",
"angleup":"向上倾斜",
"angledown":"向下倾斜",
"vertical":"竖排文字",

Write Preview
Loading…
Cancel
Save