Skip to content

Commit

Permalink
refine rich text and other i18n
Browse files Browse the repository at this point in the history
  • Loading branch information
@knoxHuang
knoxHuang committed Nov 4, 2024
1 parent 651f013 commit c89f782
Show file tree
Hide file tree
Showing 12 changed files with 404 additions and 142 deletions.
32 changes: 18 additions & 14 deletions cocos/2d/components/rich-text.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,18 @@
THE SOFTWARE.
*/

import { ccclass, executeInEditMode, executionOrder, help, menu, tooltip, multiline, type, displayOrder, serializable } from 'cc.decorator';
import {
ccclass,
executeInEditMode,
executionOrder,
help,
menu,
multiline,
type,
displayOrder,
serializable,
editable,
} from 'cc.decorator';
import { DEBUG, DEV, EDITOR } from 'internal:constants';
import { Font, SpriteAtlas, TTFFont, SpriteFrame } from '../assets';
import { EventTouch } from '../../input/types';
Expand Down Expand Up @@ -162,7 +173,6 @@ export class RichText extends Component {
* 富文本显示的文本内容。
*/
@multiline
@tooltip('i18n:richtext.string')
get string (): string {
return this._string;
}
Expand All @@ -183,7 +193,6 @@ export class RichText extends Component {
* 文本内容的水平对齐方式。
*/
@type(HorizontalTextAlignment)
@tooltip('i18n:richtext.horizontal_align')
get horizontalAlign (): HorizontalTextAlignment {
return this._horizontalAlign;
}
Expand All @@ -206,7 +215,6 @@ export class RichText extends Component {
* 文本内容的竖直对齐方式。
*/
@type(VerticalTextAlignment)
@tooltip('i18n:richtext.vertical_align')
get verticalAlign (): VerticalTextAlignment {
return this._verticalAlign;
}
Expand All @@ -228,7 +236,7 @@ export class RichText extends Component {
* @zh
* 富文本字体大小。
*/
@tooltip('i18n:richtext.font_size')
@editable
get fontSize (): number {
return this._fontSize;
}
Expand Down Expand Up @@ -270,7 +278,7 @@ export class RichText extends Component {
* @zh
* 富文本定制系统字体。
*/
@tooltip('i18n:richtext.font_family')
@editable
get fontFamily (): string {
return this._fontFamily;
}
Expand All @@ -289,7 +297,6 @@ export class RichText extends Component {
* 富文本定制字体。
*/
@type(Font)
@tooltip('i18n:richtext.font')
get font (): TTFFont | null {
return this._font;
}
Expand All @@ -313,12 +320,11 @@ export class RichText extends Component {

/**
* @en
* Whether use system font name or not.
* Whether to use system font name or not.
*
* @zh
* 是否使用系统字体。
*/
@tooltip('i18n:richtext.use_system_font')
@displayOrder(12)
get useSystemFont (): boolean {
return this._isSystemFontUsed;
Expand Down Expand Up @@ -350,7 +356,6 @@ export class RichText extends Component {
* 文本缓存模式, 该模式只支持系统字体。
*/
@type(CacheMode)
@tooltip('i18n:richtext.cache_mode')
get cacheMode (): CacheMode {
return this._cacheMode;
}
Expand All @@ -369,7 +374,7 @@ export class RichText extends Component {
* @zh
* 富文本的最大宽度。
*/
@tooltip('i18n:richtext.max_width')
@editable
get maxWidth (): number {
return this._maxWidth;
}
Expand All @@ -391,7 +396,7 @@ export class RichText extends Component {
* @zh
* 富文本行高。
*/
@tooltip('i18n:richtext.line_height')
@editable
get lineHeight (): number {
return this._lineHeight;
}
Expand All @@ -414,7 +419,6 @@ export class RichText extends Component {
* 对于 img 标签里面的 src 属性名称，都需要在 imageAtlas 里面找到一个有效的 spriteFrame，否则 img tag 会判定为无效。
*/
@type(SpriteAtlas)
@tooltip('i18n:richtext.image_atlas')
get imageAtlas (): SpriteAtlas | null {
return this._imageAtlas;
}
Expand All @@ -437,7 +441,7 @@ export class RichText extends Component {
* @zh
* 选中此选项后，RichText 将阻止节点边界框中的所有输入事件（鼠标和触摸），从而防止输入事件穿透到底层节点。
*/
@tooltip('i18n:richtext.handleTouchEvent')
@editable
get handleTouchEvent (): boolean {
return this._handleTouchEvent;
}
Expand Down
1 change: 0 additions & 1 deletion cocos/2d/framework/ui-renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,6 @@ export class UIRenderer extends Renderer {
*/
@type(Material)
@displayOrder(0)
@displayName('CustomMaterial')
@disallowAnimation
get customMaterial (): Material | null {
return this._customMaterial;
Expand Down
1 change: 0 additions & 1 deletion cocos/dragon-bones/ArmatureDisplay.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -699,7 +699,6 @@ export class ArmatureDisplay extends UIRenderer {
@override
@type(Material)
@displayOrder(0)
@displayName('CustomMaterial')
get customMaterial (): Material | null {
return this._customMaterial;
}
Expand Down
1 change: 0 additions & 1 deletion cocos/spine/skeleton.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -643,7 +643,6 @@ export class Skeleton extends UIRenderer {
@override
@type(Material)
@displayOrder(0)
@displayName('CustomMaterial')
get customMaterial (): Material | null {
return this._customMaterial;
}
Expand Down
35 changes: 6 additions & 29 deletions editor/i18n/en/localization.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,12 @@ const version = pkg.version.replace(/(^\d+\.\d+)\..*$/, (str, a) => {
const url = 'https://docs.cocos.com/creator';

module.exports = link(mixin({

common: {
'attribute': {
'title': 'Attribute: ',
'description': 'Description: ',
},
},
classes: {
'cc': {
'animation': {
Expand Down Expand Up @@ -315,14 +320,6 @@ module.exports = link(mixin({
csmTransitionRange: 'CSM layers transition range(in NDC space: value range is 0 to 1)',
},
sprite: {
gray_scale: 'Whether turn on grayscale rendering mode',
sprite_frame: 'Sprite Frame image to use',
atlas: 'Atlas that the image belongs to',
type:
'Rendering mode:<br> - Simple: Modifying the size will stretch the image as a whole, which is suitable for sequence frame animation and normal images. <br>' +
'- Sliced: When changing the size, the four corners will not stretch, which is suitable for UI buttons and panel backgrounds. <br>' +
'- Tiled : When changing the size, the original size image will continue to be tiled. <br>' +
'- Filled : set a certain starting position and direction of filling, and the picture can be cropped and displayed at a certain ratio.',
original_size: "Use the Image's original size as the Node size?",
edit_button: 'Edit',
select_button: 'Select In Atlas',
Expand All @@ -334,10 +331,6 @@ module.exports = link(mixin({
fill_range: 'The normalizad value indicates how much of the sprite we want to show',
src_blend_factor: 'The source image blend mode',
dst_blend_factor: 'The destination image blend mode',
size_mode:
'Set the size of the node on which the Sprite component is on. <br>CUSTOM for setting width and height manually;<br>TRIMMED to use image size with transparent pixels trimmed; <br>RAW to use image size without trimming.',
trim:
"Whether to render transparent pixels around image in node's bounding box. <br>If you check this option the bounding box will not include transparent pixels around the image.",
},
UIOpacity: {
opacity: 'The value between 0 to 255 showing the transparency of the object',
Expand Down Expand Up @@ -664,22 +657,6 @@ module.exports = link(mixin({
url: 'A given URL to be loaded by the Webview, <br>it should have a http or https prefix.',
webviewEvents: "The Webview's event callback , <br>it will be triggered when certain Webview event occurs.",
},
richtext: {
string: 'Text of the RichText, you could use BBcode in the string',
horizontal_align: 'Horizontal alignment',
vertical_align: 'Vertical alignment',
font_size: 'Font size, in points',
font: 'Custom TTF font of Rich Text',
font_family: 'Custom System font of Rich Text',
use_system_font: 'Using system font',
cache_mode: 'The cache mode of label. This mode only supports system fonts.',
max_width: 'The maximize width of RichText, pass 0 means not limit the maximize width.',
line_height: 'Line height, in points',
image_atlas:
'The image atlas for the img tag. For each src value in the img tag, <br>there should be a valid sprite frame in the image atlas.',
handleTouchEvent:
'Once checked, the Rich Text will block all input events (mouse and touch) within the bounding box of the node, <br>preventing the input from penetrating into the underlying node.',
},
UICoordinateTracker: {
target: 'Target node',
camera: 'The 3D camera representing the original coordinate system.',
Expand Down
126 changes: 118 additions & 8 deletions editor/i18n/en/modules/ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,16 @@ module.exports = {
'horizontalAlign': {
displayName: 'Horizontal Alignment',
tooltip: 'Horizontal alignment mode.',
tooltip_left: 'Align Left',
tooltip_right: 'Align Right',
tooltip_center: 'Align Center',
tooltip_left: 'Align Left.',
tooltip_right: 'Align Right.',
tooltip_center: 'Align Center.',
},
'verticalAlign': {
displayName: 'Vertical Alignment',
tooltip: 'Vertical alignment mode.',
tooltip_top: 'Align Top',
tooltip_bottom: 'Align Bottom',
tooltip_center: 'Align Center',
tooltip_top: 'Align Top.',
tooltip_bottom: 'Align Bottom.',
tooltip_center: 'Align Center.',
},
'fontSize': {
displayName: 'Font Size',
Expand All @@ -61,7 +61,8 @@ module.exports = {
},
'useSystemFont': {
displayName: 'System Fonts',
tooltip: 'Whether to use system default fonts. The referenced font asset would be dereferenced once this option was checked.',
tooltip: 'Whether to use system default fonts. ' +
'<br>The referenced font asset would be dereferenced once this option was checked.',
},
'fontFamily': {
displayName: 'Font Family',
Expand All @@ -76,7 +77,7 @@ module.exports = {
tooltip: 'Text cache modes：<br> ' +
'1. NONE: No cache，draw once. <br> ' +
'2. BITMAP: Text is added as a static image to the dynamic atlas for batch merging, but its content cannot be dynamically modified frequently. <br> ' +
'3. CHAR: Split the text into characters and cache the character texture into a character atlas for reuse, ' +
'3. CHAR: Split the text into characters and cache the character texture into a character atlas for reuse, <br>' +
'which is suitable for text content with repeated character content and frequently updated.',
},
'isBold': {
Expand Down Expand Up @@ -125,6 +126,115 @@ module.exports = {
},
},
},
'RichText': {
properties: {
'string': {
displayName: 'string',
tooltip: 'Text of the RichText, you could use BBcode in the string.',
},
'horizontalAlign': {
displayName: 'Horizontal Alignment',
tooltip: 'Horizontal alignment mode.',
tooltip_left: 'Align Left.',
tooltip_right: 'Align Right.',
tooltip_center: 'Align Center.',
},
'verticalAlign': {
displayName: 'Vertical Alignment',
tooltip: 'Vertical alignment mode.',
tooltip_top: 'Align Top.',
tooltip_bottom: 'Align Bottom.',
tooltip_center: 'Align Center.',
},
'fontSize': {
displayName: 'Font Size',
tooltip: 'Font size, in points.',
},
'fontColor': {
displayName: 'Color',
tooltip: 'Default text color for rich text. ' +
'<br>It takes effect when the text content does not have a color parameter set. ' +
'<br>Color cascading is not supported yet.',
},
'fontFamily': {
displayName: 'Font Family',
tooltip: 'Font names.',
},
'font': {
displayName: 'Font',
tooltip: 'Custom TTF font of Rich Text.',
},
'useSystemFont': {
displayName: 'System Fonts',
tooltip: 'Whether to use system default fonts. ' +
'<br>The referenced font asset would be dereferenced once this option was checked.',
},
'cacheMode': {
displayName: 'Cache Mode',
tooltip: 'Text cache modes：<br> ' +
'1. NONE: No cache，draw once. <br> ' +
'2. BITMAP: Text is added as a static image to the dynamic atlas for batch merging, but its content cannot be dynamically modified frequently. <br> ' +
'3. CHAR: Split the text into characters and cache the character texture into a character atlas for reuse, <br>' +
'which is suitable for text content with repeated character content and frequently updated.',
},
'maxWidth': {
displayName: 'Max Width',
tooltip: 'The maximize width of RichText, pass 0 means not limit the maximize width.',
},
'lineHeight': {
displayName: 'Line Height',
tooltip: 'Line height, in points.',
},
'imageAtlas': {
displayName: 'Image Atlas',
tooltip: 'The image atlas for the img tag. ' +
'<br>For each src value in the img tag, ' +
'<br>there should be a valid sprite frame in the image atlas.',
},
'handleTouchEvent': {
displayName: 'Block input events',
tooltip: 'Once checked, the Rich Text will block all input events (mouse and touch) within the bounding box of the node, ' +
'<br>preventing the input from penetrating into the underlying node.',
},
},
},
'Sprite': {
properties: {
__extends__: 'classes.cc.UIRenderer.properties',
'grayscale': {
displayName: 'Grayscale',
tooltip: 'Whether turn on grayscale rendering mode.',
},
'spriteAtlas': {
displayName: 'Sprite Atlas',
tooltip: 'Atlas that the image belongs to.',
},
'sprite_frame': {
displayName: 'Sprite Frame',
tooltip: 'Sprite Frame image to use.',
},
'type': {
displayName: 'Type',
tooltip: 'Rendering mode:' +
'<br> - Simple: Modifying the size will stretch the image as a whole, which is suitable for sequence frame animation and normal images. <br>' +
'- Sliced: When changing the size, the four corners will not stretch, which is suitable for UI buttons and panel backgrounds. <br>' +
'- Tiled : When changing the size, the original size image will continue to be tiled. <br>' +
'- Filled : set a certain starting position and direction of filling, and the picture can be cropped and displayed at a certain ratio.',
},
'size_mode': {
displayName: 'Size Mode',
tooltip: 'Set the size of the node on which the Sprite component is on. ' +
'<br>CUSTOM for setting width and height manually;' +
'<br>TRIMMED to use image size with transparent pixels trimmed; ' +
'<br>RAW to use image size without trimming.',
},
'trim': {
displayName: 'Trim',
tooltip: "Whether to render transparent pixels around image in node's bounding box. " +
"<br>If you check this option the bounding box will not include transparent pixels around the image.",
},
},
},
},
},
};
1 change: 1 addition & 0 deletions editor/i18n/zh/assets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,7 @@ module.exports = {
isRGBE: '作为 RGBE 格式',
isRGBETip: '作为 RGBE 格式',
flipGreenChannel: '翻转绿色通道',
flipGreenChannelTip: '是否翻转绿通道',
},
spriteFrame: {
packable: 'Packable',
Expand Down
Loading

0 comments on commit c89f782

Please sign in to comment.