diff --git a/features/detail/src/main/ets/view/CommentBarView.ets b/features/detail/src/main/ets/view/CommentBarView.ets index 381538bd895f74bded13d49ed228696b1c68481f..8e336717f7a377df599d6100a87c03b22a83ee2f 100644 --- a/features/detail/src/main/ets/view/CommentBarView.ets +++ b/features/detail/src/main/ets/view/CommentBarView.ets @@ -18,37 +18,41 @@ import { CommonConstants as Common } from '../constants/CommonConstants'; const KEY_TEXTAREA: string = 'textarea_input'; +// [Start comment_bar_view] @Component export struct CommentBarView { + // [StartExclude comment_bar_view] @StorageProp('currentBreakpoint') currentBreakpoint: string = Breakpoint.BREAKPOINT_LG; @State isMouseClick: boolean = false; @State content: string = ''; isShowInput?: boolean = true; isDarkMode: boolean = false; - jumpDetail: () => void = () => { - }; + jumpDetail: () => void = () => {}; + // [EndExclude comment_bar_view] build() { Column() { Row() { if (!this.isMouseClick) { Row() { - Text($r('app.string.detail_write_comment')) + Text('写评论') + // [StartExclude comment_bar_view] .fontSize($r('app.float.comment_context_fs')) .fontWeight(FontWeight.Normal) .fontColor(this.isDarkMode ? Color.White : Color.Black) .opacity($r('app.float.comment_context_opacity')) + // [EndExclude comment_bar_view] } - .borderRadius($r('app.float.comment_context_br')) - .backgroundColor(this.isDarkMode ? $r('app.color.dark_mode_gbc') : $r('app.color.comment_context_bgc')) - .padding({ - left: $r('app.float.window_padding_left_sm') - }) + .borderRadius('20vp') + .backgroundColor(this.isDarkMode ? '#26282A' : '#0D000000') + .padding({ left: '16vp' }) + // [StartExclude comment_bar_view] .justifyContent(FlexAlign.Start) .height($r('app.float.comment_input_height')) .width(Common.COMMENT_BAR_INPUT_WIDTH) .margin({ left: Common.COMMENT_BAR_INPUT_ML }) .visibility(this.isShowInput ? Visibility.Visible : Visibility.None) + // [EndExclude comment_bar_view] .onMouse((event: MouseEvent) => { if (event.button === MouseButton.Left && event.action === MouseAction.Press) { this.isMouseClick = true; @@ -59,7 +63,7 @@ export struct CommentBarView { AppStorage.setOrCreate('isShowInput', true); } }) - + // [StartExclude comment_bar_view] Row() { Image(this.isDarkMode ? $r('app.media.ic_toolbar_comment_light') : $r('app.media.ic_toolbar_comment')) .width($r('app.float.toolbar_comment_image_width')) @@ -79,10 +83,11 @@ export struct CommentBarView { } .layoutWeight(1) .justifyContent(FlexAlign.SpaceAround) - } - else { + // [EndExclude comment_bar_view] + } else { Row() { - TextArea({ placeholder: $r('app.string.detail_write_comment'), text: this.content }) + TextArea({ placeholder: '写评论', text: this.content }) + // [StartExclude comment_bar_view] .fontColor(this.isDarkMode ? $r('app.color.font_color_dark') : $r('app.color.font_color_normal')) .backgroundColor(this.isDarkMode ? $r('app.color.comment_context_bgc_dark') : $r('app.color.comment_context_bgc')) @@ -101,18 +106,22 @@ export struct CommentBarView { .onAppear(() => { focusControl.requestFocus(KEY_TEXTAREA) }) + // [EndExclude comment_bar_view] Image(this.isDarkMode ? $r('app.media.ic_toolbar_send_white') : $r('app.media.ic_toolbar_sent')) + // [StartExclude comment_bar_view] .width($r('app.float.toolbar_sent_width')) .aspectRatio(1) .margin({ left: $r('app.float.toolbar_sent_ml'), bottom: $r('app.float.toolbar_sent_mb') }) + // [EndExclude comment_bar_view] .onClick(() => { this.isMouseClick = false; }) } + // [StartExclude comment_bar_view] .width(BaseCommon.FULL_PERCENT) .padding({ left: $r('app.float.dialog_pl'), @@ -123,21 +132,28 @@ export struct CommentBarView { .justifyContent(FlexAlign.SpaceBetween) .alignItems(VerticalAlign.Bottom) .backgroundColor(this.isDarkMode ? Color.Transparent : $r('app.color.white')) + // [EndExclude comment_bar_view] } } + // [StartExclude comment_bar_view] .width(BaseCommon.FULL_PERCENT) .height($r('app.float.toolbar_comment_height')) .borderWidth({ top: $r('app.float.comment_bar_border_with') }) .borderColor(this.isDarkMode ? $r('app.color.title_board_color') : $r('app.color.comment_bar_border_color')) + // [EndExclude comment_bar_view] } + // [StartExclude comment_bar_view] .width(BaseCommon.FULL_PERCENT) .height(this.getColumnHeight()) + // [EndExclude comment_bar_view] } - + // [StartExclude comment_bar_view] getColumnHeight(): Resource { if (this.currentBreakpoint === Breakpoint.BREAKPOINT_LG) { return $r('app.float.toolbar_comment_height'); } return this.isShowInput ? $r('app.float.toolbar_comment_input_height') : $r('app.float.toolbar_comment_height'); } -} \ No newline at end of file + // [EndExclude comment_bar_view] +} +// [End comment_bar_view] \ No newline at end of file diff --git a/features/detail/src/main/ets/view/DetailPage.ets b/features/detail/src/main/ets/view/DetailPage.ets index 5cdcbd92545285056822ff4541035a569b7aaf2f..1b06e5770a02a0895de83527e8cc6790663145c6 100644 --- a/features/detail/src/main/ets/view/DetailPage.ets +++ b/features/detail/src/main/ets/view/DetailPage.ets @@ -25,9 +25,11 @@ import CardArrayViewModel from '../viewmodel/CardArrayViewModel'; const KEY_BACKGROUND: string = 'background'; +// [Start detail_page] @Component export struct DetailPage { - @StorageLink('currentBreakpoint') currentBreakpoint: string = Breakpoint.BREAKPOINT_SM; + // [StartExclude detail_page] + @StorageLink('currentBreakpoint') currentBreakpoint: string = 'sm'; @StorageLink('isFoldHorizontal') isFoldHorizontal: boolean = true; @StorageLink('cardArrayViewModel') cardArrayViewModel: CardArray = CardArrayViewModel.getInstance(); @StorageLink('selectCardIndex') selectCardIndex: number = 0; @@ -39,49 +41,42 @@ export struct DetailPage { aboutToAppear() { this.isDetailPage = true; } - + // [EndExclude detail_page] build() { Stack() { Column() { DetailTitleView({ isShowedButton: this.isShowedButton }) Scroll() { - GridRow({ - columns: { - sm: Breakpoint.GRID_ROW_COLUMNS[2], - md: Breakpoint.GRID_ROW_COLUMNS[3], - lg: Breakpoint.GRID_ROW_COLUMNS[0] - } - }) { - GridCol({ - span: { - sm: Breakpoint.GRID_COLUMN_SPANS[5], - md: this.isFoldHorizontal ? Breakpoint.GRID_COLUMN_SPANS[4] : Breakpoint.GRID_COLUMN_SPANS[3], - lg: Breakpoint.GRID_COLUMN_SPANS[0] - } - }) { - if ((this.isFoldHorizontal && this.currentBreakpoint === Breakpoint.BREAKPOINT_MD)) { + GridRow({ columns: { sm: 4, md: 5, lg: 12 } }) { + GridCol({ span: { sm: 4, md: this.isFoldHorizontal ? 3 : 5, lg: 12 } }) { + if ((this.isFoldHorizontal && this.currentBreakpoint === 'md')) { Scroll() { MircoBlogView({ cardItem: this.cardItem, index: this.selectCardIndex }) - .margin({ - top: $r('app.float.mirco_blog_mt') - }) + // [StartExclude detail_page] + .margin({ top: '16vp' }) + // [EndExclude detail_page] } + // [StartExclude detail_page] .scrollBar(BarState.Off) .align(Alignment.Top) .layoutWeight(1) + // [EndExclude detail_page] } else { MircoBlogView({ cardItem: this.cardItem, index: this.selectCardIndex }) + // [StartExclude detail_page] .margin({ top: $r('app.float.mirco_blog_mt') }) + // [EndExclude detail_page] } } + // [StartExclude detail_page] .width(Common.FULL_PERCENT) .padding({ left: new BreakpointType($r('app.float.window_padding_left_sm'), $r('app.float.window_padding_left_md'), @@ -89,33 +84,34 @@ export struct DetailPage { right: new BreakpointType($r('app.float.window_padding_left_sm'), $r('app.float.window_padding_left_md'), $r('app.float.window_padding_left_lg')).getValue(this.currentBreakpoint) }) + // [EndExclude detail_page] - GridCol({ - span: { - sm: Breakpoint.GRID_COLUMN_SPANS[5], - md: this.isFoldHorizontal ? Breakpoint.GRID_COLUMN_SPANS[6] : Breakpoint.GRID_COLUMN_SPANS[3], - lg: Breakpoint.GRID_COLUMN_SPANS[0] - } - }) { + GridCol({ span: { sm: 4, md: this.isFoldHorizontal ? 2 : 5, lg: 12 } }) { CommentListView() } + // [StartExclude detail_page] .height(Common.FULL_PERCENT) .width(Common.FULL_PERCENT) + // [EndExclude detail_page] } } + .visibility(this.currentBreakpoint === 'lg' ? Visibility.None : Visibility.Visible) + // [StartExclude detail_page] .layoutWeight(1) - .visibility(this.currentBreakpoint === Breakpoint.BREAKPOINT_LG ? Visibility.None : Visibility.Visible) .scrollBar(BarState.Off) CommentBarView() .visibility(this.isShow() ? Visibility.Visible : Visibility.None) + // [EndExclude detail_page] Column() { SideBarContainer() { Column() { CommentListView() } + // [StartExclude detail_page] .backgroundColor($r('app.color.acetate')) + // [EndExclude detail_page] Column() { Scroll() { @@ -123,19 +119,23 @@ export struct DetailPage { cardItem: this.cardItem, index: this.selectCardIndex }) + // [StartExclude detail_page] .margin({ top: $r('app.float.mirco_blog_mt') }) + // [EndExclude detail_page] } + // [StartExclude detail_page] .padding({ left: $r('app.float.window_padding_left_lg'), right: $r('app.float.window_padding_left_lg') }) .scrollBar(BarState.Off) + // [EndExclude detail_page] } .justifyContent(FlexAlign.Start) - } + // [StartExclude detail_page] .sideBarPosition(SideBarPosition.End) .showControlButton(false) .sideBarWidth($r('app.float.side_bar_with')) @@ -143,11 +143,15 @@ export struct DetailPage { .maxSideBarWidth($r('app.float.max_side_bar_width')) .autoHide(false) .divider(null) + // [EndExclude detail_page] } + .visibility(this.currentBreakpoint !== 'lg' ? Visibility.None : Visibility.Visible) + // [StartExclude detail_page] .width(Common.FULL_PERCENT) - .visibility(this.currentBreakpoint !== Breakpoint.BREAKPOINT_LG ? Visibility.None : Visibility.Visible) .layoutWeight(1) + // [EndExclude detail_page] } + // [StartExclude detail_page] .height(Common.FULL_PERCENT) .justifyContent(FlexAlign.End) .expandSafeArea([SafeAreaType.KEYBOARD, SafeAreaType.SYSTEM]) @@ -170,14 +174,17 @@ export struct DetailPage { } .alignContent(Alignment.Bottom) } + // [EndExclude detail_page] } } - + // [StartExclude detail_page] isShow(): boolean { - if ((this.currentBreakpoint === Breakpoint.BREAKPOINT_MD && !this.isFoldHorizontal) || - (this.currentBreakpoint === Breakpoint.BREAKPOINT_SM)) { + if ((this.currentBreakpoint === 'md' && !this.isFoldHorizontal) || + (this.currentBreakpoint === 'sm')) { return true; } return false; } -} \ No newline at end of file + // [EndExclude detail_page] +} +// [End detail_page] \ No newline at end of file diff --git a/features/detail/src/main/ets/view/MircoBlogView.ets b/features/detail/src/main/ets/view/MircoBlogView.ets index 45dbd011623b95c7cdbeb7f0ca0361ff8008e8fe..2cdc3ea1b6f22bc1fe5e65373cf1ac80b557dfd3 100644 --- a/features/detail/src/main/ets/view/MircoBlogView.ets +++ b/features/detail/src/main/ets/view/MircoBlogView.ets @@ -29,8 +29,10 @@ interface ImageInfo { contentOffsetY: number; } +// [Start mirco_blog_view] @Component export struct MircoBlogView { + // [StartExclude mirco_blog_view] @StorageProp('currentBreakpoint') currentBreakpoint: string = Breakpoint.BREAKPOINT_LG; @StorageLink('isDetailPage') isDetailPage: boolean = false; @StorageLink('isPictureDetail') isPictureDetail: boolean = false; @@ -52,10 +54,11 @@ export struct MircoBlogView { AppStorage.setOrCreate('selectCardIndex', this.index); this.pageInfos.pushPath({ name: 'pictureDetail', param: index }); } - + // [EndExclude mirco_blog_view] build() { Column() { if (this.cardItem !== undefined) { + // [StartExclude mirco_blog_view] Row() { Row() { Image(this.cardItem.icon) @@ -107,40 +110,43 @@ export struct MircoBlogView { top: $r('app.float.card_title_padding'), bottom: $r('app.float.card_title_padding') }) + // [EndExclude mirco_blog_view] Row() { Text(this.cardItem.content) - .fontSize(`${this.contentFontSize}${Common.SUFFIX_FP}`) - .lineHeight(`${this.contentFontHeight}${Common.SUFFIX_VP}`) + .fontSize(`${this.contentFontSize}fp`) + .lineHeight(`${this.contentFontHeight}vp`) + // [StartExclude mirco_blog_view] .width(BaseCommon.FULL_PERCENT) .onClick(() => { this.jumpDetail(); }) .fontColor(this.isDarkMode ? $r('app.color.card_item_content_fc_dark') : Color.Black) .copyOption(CopyOptions.LocalDevice) + // [EndExclude mirco_blog_view] } .gesture( - PinchGesture({ fingers: Common.PINCH_GESTURE_FINGERS }) + PinchGesture({ fingers: 2 }) .onActionUpdate((event?: GestureEvent) => { if (event && (this.isDetailPage || this.isPictureDetail)) { let tmp = this.pinchValue * event.scale; - if (tmp > Common.MAX_SCALE) { - tmp = Common.MAX_SCALE; + if (tmp > 1.45) { + tmp = 1.45; } - if (tmp < Common.MIN_SCALE) { - tmp = Common.MIN_SCALE; + if (tmp < 0.75) { + tmp = 0.75; } this.scaleValue = tmp; - this.contentFontSize = Common.CONTENT_FONT_SIZE * this.scaleValue; - this.contentFontHeight = Common.CONTENT_FONT_HEIGHT * this.scaleValue; - this.pictureMarginTop = Common.PICTURE_MARGIN_TOP * (this.scaleValue > 1 ? this.scaleValue : 1); + this.contentFontSize = 16 * this.scaleValue; + this.contentFontHeight = 25.6 * this.scaleValue; + this.pictureMarginTop = 8 * (this.scaleValue > 1 ? this.scaleValue : 1); } }) .onActionEnd(() => { this.pinchValue = this.scaleValue; }) ) - + // [StartExclude mirco_blog_view] if (this.showPicture) { if (this.cardItem.pictureArray.length === 1) { Image(this.cardItem.pictureArray[0]) @@ -176,16 +182,21 @@ export struct MircoBlogView { .margin({ top: `${this.pictureMarginTop}${Common.SUFFIX_VP}` }) } } + // [EndExclude mirco_blog_view] } } + // [StartExclude mirco_blog_view] .alignItems(HorizontalAlign.Start) .flexShrink(1) .width(BaseCommon.FULL_PERCENT) + // [EndExclude mirco_blog_view] } - + // [StartExclude mirco_blog_view] getAspectRatio(length: number): number { let rowNumber: number = (length % Common.MAX_GRID_COLUMN === 0) ? length / Common.MAX_GRID_COLUMN : (Math.floor(length / Common.MAX_GRID_COLUMN) + 1); return Common.MAX_GRID_COLUMN / rowNumber; } -} \ No newline at end of file + // [EndExclude mirco_blog_view] +} +// [End mirco_blog_view] \ No newline at end of file diff --git a/features/hot/src/main/ets/view/FoundView.ets b/features/hot/src/main/ets/view/FoundView.ets index b69991cc7c637d6e9bbd8e70167f85b5cfd608dd..a4e8b200d51c20109570ba1860c2d49e93c5dfa6 100644 --- a/features/hot/src/main/ets/view/FoundView.ets +++ b/features/hot/src/main/ets/view/FoundView.ets @@ -97,22 +97,24 @@ export struct FoundView { Blank() .width(BaseCommon.FULL_PERCENT) .height($r('app.float.blank_height')) - .visibility(this.currentBreakpoint === Breakpoint.BREAKPOINT_LG ? Visibility.Hidden : Visibility.Visible) + .visibility(this.currentBreakpoint === 'lg' ? Visibility.Hidden : Visibility.Visible) // [Start foundView] WaterFlow() { - // [StartExclude foundView] ForEach(this.cardArrayViewModel.cardArray, (item: CardItem, index: number) => { FlowItem() { Column() { MircoBlogView({ cardItem: item, + // [StartExclude foundView] index: index, jumpDetail: () => { AppStorage.setOrCreate('selectCardIndex', index); this.jumpDetail(); } + // [EndExclude foundView] }) + // [StartExclude foundView] .padding({ left: new BreakpointType($r('app.float.window_padding_left_sm'), $r('app.float.window_padding_left_md'), $r('app.float.window_padding_left_sm')) @@ -123,28 +125,29 @@ export struct FoundView { top: new BreakpointType($r('app.float.zero'), $r('app.float.zero'), $r('app.float.card_margin_top_lg')).getValue(this.currentBreakpoint) }) + // [EndExclude foundView] CommentBarView({ isShowInput: false, + // [StartExclude foundView] jumpDetail: () => { AppStorage.setOrCreate('selectCardIndex', index); this.jumpDetail(); } + // [EndExclude foundView] }) } - .borderRadius(this.currentBreakpoint === Breakpoint.BREAKPOINT_LG ? - $r('app.float.water_flow_br') : $r('app.float.zero')) - .backgroundColor($r('app.color.white')) - .margin(this.currentBreakpoint === Breakpoint.BREAKPOINT_LG ? - $r('app.float.water_flow_margin') : $r('app.float.zero')) + // [StartExclude foundView] + .borderRadius(this.currentBreakpoint === 'lg' ? '8vp' : '0vp') + .backgroundColor('#FFFFFF') + .margin(this.currentBreakpoint === 'lg' ? '6vp' : '0vp') + // [EndExclude foundView] } }, (item: CardItem, index: number) => index + JSON.stringify(item)) - // [EndExclude foundView] } - .columnsTemplate(this.currentBreakpoint !== Breakpoint.BREAKPOINT_LG ? - Common.WATER_FLOW_COLUMNS_TEMPLATE_NORMAL : Common.WATER_FLOW_COLUMNS_TEMPLATE_LG) + .columnsTemplate(this.currentBreakpoint !== 'lg' ? '1fr' : '1fr 1fr') // [End foundView] - .backgroundColor(this.currentBreakpoint === Breakpoint.BREAKPOINT_LG ? + .backgroundColor(this.currentBreakpoint === 'lg' ? $r('app.color.water_flow_bgc_lg') : $r('app.color.water_flow_bgc')) .linearGradient({ angle: Common.LINEAR_GRADIENT_ANGEL, @@ -153,18 +156,18 @@ export struct FoundView { [Common.LINEAR_GRADIENT_TO_COLOR, Common.LINEAR_GRADIENT_TO_AREA] ] }) - .rowsGap(this.currentBreakpoint === Breakpoint.BREAKPOINT_LG ? + .rowsGap(this.currentBreakpoint === 'lg' ? $r('app.float.zero') : $r('app.float.water_flow_rows_gap')) .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST }) .padding({ - left: this.currentBreakpoint === Breakpoint.BREAKPOINT_LG ? $r('app.float.water_flow_padding_lg') : + left: this.currentBreakpoint === 'lg' ? $r('app.float.water_flow_padding_lg') : $r('app.float.zero'), - right: this.currentBreakpoint === Breakpoint.BREAKPOINT_LG ? $r('app.float.water_flow_padding_lg') : + right: this.currentBreakpoint === 'lg' ? $r('app.float.water_flow_padding_lg') : $r('app.float.zero'), - top: this.currentBreakpoint === Breakpoint.BREAKPOINT_LG ? $r('app.float.water_flow_padding_top_lg') : + top: this.currentBreakpoint === 'lg' ? $r('app.float.water_flow_padding_top_lg') : $r('app.float.zero') }) } diff --git a/features/hot/src/main/ets/view/HotColumnView.ets b/features/hot/src/main/ets/view/HotColumnView.ets index 082a319578128d9638773898253f1442852a68bd..fd7e96814ed4e0029f945d45fa8699d836e4e936 100644 --- a/features/hot/src/main/ets/view/HotColumnView.ets +++ b/features/hot/src/main/ets/view/HotColumnView.ets @@ -21,24 +21,27 @@ import { ToRankView } from './ToRankView'; const SWIPER_LIST: number[] = [0, 1, 2]; +// [Start hot_column_view] @Component export struct HotColumnView { - @StorageLink('currentBreakpoint') currentBreakpoint: string = Breakpoint.BREAKPOINT_SM; + @StorageLink('currentBreakpoint') currentBreakpoint: string = 'sm'; + // [StartExclude hot_column_view] @State tab_index: number = 0; + // [EndExclude hot_column_view] @Builder HotListBuilder(index: number) { List() { ForEach(HOST_LIST_ARRAY[this.tab_index], (item: HotItemInterface) => { - if (item.index > index * Common.HOT_COLUMN_MAX_COUNT && - item.index <= (index + 1) * Common.HOT_COLUMN_MAX_COUNT) { + if (item.index > index * 5 && item.index <= (index + 1) * 5) { ListItem() { HotListItemView({ item: item, showDetail: true, - indexWidth: item.index <= Common.HOT_COLUMN_MAX_COUNT ? $r('app.float.index_width_normal') : - $r('app.float.index_width_more'), - indexIconGap: $r('app.float.index_icon_gap') + // [StartExclude hot_column_view] + indexWidth: item.index <= 5 ? '9vp' : '19vp', + indexIconGap: '8vp' + // [EndExclude hot_column_view] }) } } @@ -49,24 +52,24 @@ export struct HotColumnView { build() { Column() { Swiper() { - ForEach(SWIPER_LIST, (item: number) => { + ForEach([0, 1, 2], (item: number) => { this.HotListBuilder(item) }, (item: number) => JSON.stringify(item)) } + // [StartExclude hot_column_view] .autoPlay(false) .indicator(false) .disableSwipe(true) - .displayCount(new BreakpointType( - Common.SWIPER_DISPLAY_COUNT_ONE, - Common.SWIPER_DISPLAY_COUNT_TWO, - Common.SWIPER_DISPLAY_COUNT_THREE - ).getValue(this.currentBreakpoint)) - .itemSpace((new BreakpointType(Common.HOT_COLUMN_IS_SM, Common.HOT_COLUMN_IS_MD, Common.HOT_COLUMN_IS_LG)) - .getValue(this.currentBreakpoint)) + .displayCount(new BreakpointType(1, 2, 3).getValue(this.currentBreakpoint)) + .itemSpace((new BreakpointType('0vp', '49vp', '81vp')).getValue(this.currentBreakpoint)) ToRankView() + // [EndExclude hot_column_view] } - .width(BaseCommon.FULL_PERCENT) + // [StartExclude hot_column_view] + .width('100%') .alignItems(HorizontalAlign.Start) + // [EndExclude hot_column_view] } -} \ No newline at end of file +} +// [End hot_column_view] \ No newline at end of file