@@ -5,6 +5,7 @@ import { isEqual } from "../helpers/index";
5
5
import { setFormatter , setStyle , topbarComponentRegistry } from "../registries/index" ;
6
6
import { topbarMenuRegistry } from "../registries/menus/topbar_menu_registry" ;
7
7
import { FullMenuItem } from "../registries/menu_items_registry" ;
8
+ import { _lt } from "../translation" ;
8
9
import { Align , BorderCommand , SpreadsheetEnv , Style } from "../types/index" ;
9
10
import { ColorPicker } from "./color_picker" ;
10
11
import { Composer } from "./composer/composer" ;
@@ -30,14 +31,34 @@ interface State {
30
31
activeTool : Tool ;
31
32
}
32
33
34
+ const Terms = {
35
+ Undo : _lt ( "Undo" ) ,
36
+ Redo : _lt ( "Redo" ) ,
37
+ PaintFormat : _lt ( "Paint Format" ) ,
38
+ ClearFormat : _lt ( "Clear Format" ) ,
39
+ FormatAsPercent : _lt ( "Format as percent" ) ,
40
+ DecreaseDecimalPlaces : _lt ( "Decrease decimal places" ) ,
41
+ IncreaseDecimalPlaces : _lt ( "Increase decimal places" ) ,
42
+ MoreFormats : _lt ( "More formats" ) ,
43
+ FontSize : _lt ( "Font Size" ) ,
44
+ Bold : _lt ( "Bold" ) ,
45
+ Italic : _lt ( "Italic" ) ,
46
+ Strikethrough : _lt ( "Strikethrough" ) ,
47
+ TextColor : _lt ( "Text Color" ) ,
48
+ FillColor : _lt ( "Fill Color" ) ,
49
+ Borders : _lt ( "Borders" ) ,
50
+ MergeCells : _lt ( "Merge Cells" ) ,
51
+ HorizontalAlign : _lt ( "Horizontal align" ) ,
52
+ } ;
53
+
33
54
const FORMATS = [
34
- { name : "general" , text : "General (no specific format)" } ,
35
- { name : "number" , text : "Number (1,000.12)" , value : "#,##0.00" } ,
36
- { name : "percent" , text : "Percent (10.12%)" , value : "0.00%" } ,
37
- { name : "date" , text : "Date (9/26/2008)" , value : "m/d/yyyy" } ,
38
- { name : "time" , text : "Time (10:43:00 PM)" , value : "hh:mm:ss a" } ,
39
- { name : "datetime" , text : "Date time (9/26/2008 22:43:00)" , value : "m/d/yyyy hh:mm:ss" } ,
40
- { name : "duration" , text : "Duration (27:51:38)" , value : "hhhh:mm:ss" } ,
55
+ { name : "general" , text : _lt ( "General (no specific format)" ) } ,
56
+ { name : "number" , text : _lt ( "Number (1,000.12)" ) , value : "#,##0.00" } ,
57
+ { name : "percent" , text : _lt ( "Percent (10.12%)" ) , value : "0.00%" } ,
58
+ { name : "date" , text : _lt ( "Date (9/26/2008)" ) , value : "m/d/yyyy" } ,
59
+ { name : "time" , text : _lt ( "Time (10:43:00 PM)" ) , value : "hh:mm:ss a" } ,
60
+ { name : "datetime" , text : _lt ( "Date time (9/26/2008 22:43:00)" ) , value : "m/d/yyyy hh:mm:ss" } ,
61
+ { name : "duration" , text : _lt ( "Duration (27:51:38)" ) , value : "hhhh:mm:ss" } ,
41
62
] ;
42
63
43
64
// -----------------------------------------------------------------------------
@@ -78,15 +99,15 @@ export class TopBar extends Component<any, SpreadsheetEnv> {
78
99
</ span>
79
100
</ div>
80
101
<div t- else= "" class = "o-toolbar-tools" >
81
- <div class= "o-tool" title = "Undo" t-att-class = "{'o-disabled': !undoTool}" t-on-click = "undo" > ${ icons . UNDO_ICON } </ div>
82
- <div class= "o-tool" t-att-class = "{'o-disabled': !redoTool}" title = "Redo" t-on-click = "redo" > ${ icons . REDO_ICON } </ div>
83
- <div class= "o-tool" title = "Paint Format " t-att-class = "{active:paintFormatTool}" t-on-click = "paintFormat" > ${ icons . PAINT_FORMAT_ICON } </ div>
84
- <div class= "o-tool" title = "Clear Format " t-on-click = "clearFormatting()" > ${ icons . CLEAR_FORMAT_ICON } </ div>
102
+ <div class= "o-tool" title = "${ Terms . Undo } " t-att-class = "{'o-disabled': !undoTool}" t-on-click = "undo" > ${ icons . UNDO_ICON } </ div>
103
+ <div class= "o-tool" title = " ${ Terms . Redo } " t-att-class = "{'o-disabled': !redoTool}" t-on-click = "redo" > ${ icons . REDO_ICON } </ div>
104
+ <div class= "o-tool" title = "${ Terms . PaintFormat } " t-att-class = "{active:paintFormatTool}" t-on-click = "paintFormat" > ${ icons . PAINT_FORMAT_ICON } </ div>
105
+ <div class= "o-tool" title = "${ Terms . ClearFormat } " t-on-click = "clearFormatting()" > ${ icons . CLEAR_FORMAT_ICON } </ div>
85
106
<div class= "o-divider" / >
86
- <div class= "o-tool" title = "Format as percent " t-on-click = "toogleFormat('percent')" > %</ div>
87
- <div class= "o-tool" title = "Decrease decimal places " t-on-click = "setDecimal(-1)" > .0</ div>
88
- <div class= "o-tool" title = "Increase decimal places " t-on-click = "setDecimal(+1)" > .00</ div>
89
- <div class= "o-tool o-dropdown" title = "More formats " t-on-click = "toggleDropdownTool('formatTool')" >
107
+ <div class= "o-tool" title = "${ Terms . FormatAsPercent } " t-on-click = "toogleFormat('percent')" > %</ div>
108
+ <div class= "o-tool" title = "${ Terms . DecreaseDecimalPlaces } " t-on-click = "setDecimal(-1)" > .0</ div>
109
+ <div class= "o-tool" title = "${ Terms . IncreaseDecimalPlaces } " t-on-click = "setDecimal(+1)" > .00</ div>
110
+ <div class= "o-tool o-dropdown" title = "${ Terms . MoreFormats } " t-on-click = "toggleDropdownTool('formatTool')" >
90
111
<div class= "o-text-icon" > 123${ icons . TRIANGLE_DOWN_ICON } </ div>
91
112
<div class= "o-dropdown-content o-text-options o-format-tool " t-if = "state.activeTool === 'formatTool'" t-on-click = "setFormat" >
92
113
<t t- for each= "formats" t-as = "format" t-key = "format.name" >
@@ -96,7 +117,7 @@ export class TopBar extends Component<any, SpreadsheetEnv> {
96
117
</ div>
97
118
<div class= "o-divider" / >
98
119
<!- - <div class= "o-tool" title = "Font" > <span> Roboto </ span> ${ icons . TRIANGLE_DOWN_ICON } </ div> -- >
99
- <div class= "o-tool o-dropdown" title = "Font Size " t-on-click = "toggleDropdownTool('fontSizeTool')" >
120
+ <div class= "o-tool o-dropdown" title = "${ Terms . FontSize } " t-on-click = "toggleDropdownTool('fontSizeTool')" >
100
121
<div class= "o-text-icon" > <t t- esc= "style.fontSize || ${ DEFAULT_FONT_SIZE } " / > ${ icons . TRIANGLE_DOWN_ICON } </ div>
101
122
<div class= "o-dropdown-content o-text-options " t-if = "state.activeTool === 'fontSizeTool'" t-on-click = "setSize" >
102
123
<t t- for each= "fontSizes" t-as = "font" t-key = "font_index" >
@@ -105,20 +126,20 @@ export class TopBar extends Component<any, SpreadsheetEnv> {
105
126
</ div>
106
127
</ div>
107
128
<div class= "o-divider" / >
108
- <div class= "o-tool" title = "Bold" t-att-class = "{active:style.bold}" t-on-click = "toogleStyle('bold')" > ${ icons . BOLD_ICON } </ div>
109
- <div class= "o-tool" title = "Italic" t-att-class = "{active:style.italic}" t-on-click = "toogleStyle('italic')" > ${ icons . ITALIC_ICON } </ div>
110
- <div class= "o-tool" title = "Strikethrough" t-att-class = "{active:style.strikethrough}" t-on-click = "toogleStyle('strikethrough')" > ${ icons . STRIKE_ICON } </ div>
129
+ <div class= "o-tool" title = "${ Terms . Bold } " t-att-class = "{active:style.bold}" t-on-click = "toogleStyle('bold')" > ${ icons . BOLD_ICON } </ div>
130
+ <div class= "o-tool" title = "${ Terms . Italic } " t-att-class = "{active:style.italic}" t-on-click = "toogleStyle('italic')" > ${ icons . ITALIC_ICON } </ div>
131
+ <div class= "o-tool" title = "${ Terms . Strikethrough } " t-att-class = "{active:style.strikethrough}" t-on-click = "toogleStyle('strikethrough')" > ${ icons . STRIKE_ICON } </ div>
111
132
<div class= "o-tool o-dropdown o-with-color" >
112
- <span t- attf- style= "border-color:{{textColor}}" title = "Text Color " t-on-click = "toggleDropdownTool('textColorTool')" > ${ icons . TEXT_COLOR_ICON } </ span>
133
+ <span t- attf- style= "border-color:{{textColor}}" title = "${ Terms . TextColor } " t-on-click = "toggleDropdownTool('textColorTool')" > ${ icons . TEXT_COLOR_ICON } </ span>
113
134
<Color Picker t- if= "state.activeTool === 'textColorTool'" t-on-color-picked = "setColor('textColor')" t-key = "textColor" / >
114
135
</ div>
115
136
<div class= "o-divider" / >
116
137
<div class= "o-tool o-dropdown o-with-color" >
117
- <span t- attf- style= "border-color:{{fillColor}}" title = "Fill Color " t-on-click = "toggleDropdownTool('fillColorTool')" > ${ icons . FILL_COLOR_ICON } </ span>
138
+ <span t- attf- style= "border-color:{{fillColor}}" title = "${ Terms . FillColor } " t-on-click = "toggleDropdownTool('fillColorTool')" > ${ icons . FILL_COLOR_ICON } </ span>
118
139
<Color Picker t- if= "state.activeTool === 'fillColorTool'" t-on-color-picked = "setColor('fillColor')" t-key = "fillColor" / >
119
140
</ div>
120
141
<div class= "o-tool o-dropdown" >
121
- <span title= "Borders" t-on-click = "toggleDropdownTool('borderTool')" > ${ icons . BORDERS_ICON } </ span>
142
+ <span title= "${ Terms . Borders } " t-on-click = "toggleDropdownTool('borderTool')" > ${ icons . BORDERS_ICON } </ span>
122
143
<div class= "o-dropdown-content o-border" t-if = "state.activeTool === 'borderTool'" >
123
144
<div class= "o-dropdown-line" >
124
145
<span class= "o-line-item" t-on-click = "setBorder('all')" > ${ icons . BORDERS_ICON } </ span>
@@ -136,9 +157,9 @@ export class TopBar extends Component<any, SpreadsheetEnv> {
136
157
</ div>
137
158
</ div>
138
159
</ div>
139
- <div class= "o-tool" title = "Merge Cells " t-att-class = "{active:inMerge, 'o-disabled': cannotMerge}" t-on-click = "toggleMerge" > ${ icons . MERGE_CELL_ICON } </ div>
160
+ <div class= "o-tool" title = "${ Terms . MergeCells } " t-att-class = "{active:inMerge, 'o-disabled': cannotMerge}" t-on-click = "toggleMerge" > ${ icons . MERGE_CELL_ICON } </ div>
140
161
<div class= "o-divider" / >
141
- <div class= "o-tool o-dropdown" title = "Horizontal align " t-on-click = "toggleDropdownTool('alignTool')" >
162
+ <div class= "o-tool o-dropdown" title = "${ Terms . HorizontalAlign } " t-on-click = "toggleDropdownTool('alignTool')" >
142
163
<span>
143
164
<t t- if= "style.align === 'right'" > ${ icons . ALIGN_RIGHT_ICON } </ t>
144
165
<t t- elif= "style.align === 'center'" > ${ icons . ALIGN_CENTER_ICON } </ t>
0 commit comments