diff --git a/resources/assets/js/App.vue b/resources/assets/js/App.vue index 8fbe870f5..ddba29555 100755 --- a/resources/assets/js/App.vue +++ b/resources/assets/js/App.vue @@ -13,12 +13,12 @@ - - - + + + @@ -73,7 +73,7 @@ export default { }, computed: { - ...mapState(['ws', 'themeMode', 'supportTouch']), + ...mapState(['ws', 'themeMode', 'windowOrientation']), isSoftware() { return this.$Electron || this.$isEEUiApp; @@ -139,17 +139,25 @@ export default { immediate: true }, - supportTouch: { + windowTouch: { handler(support) { if (support) { - $A("body").addClass("support-touch") + $A("body").addClass("window-touch") } else { - $A("body").removeClass("support-touch") + $A("body").removeClass("window-touch") } }, immediate: true }, + windowOrientation: { + handler(direction) { + $A("body").removeClass(["window-landscape", "window-portrait"]) + $A("body").addClass("window-" + direction) + }, + immediate: true + }, + windowActive(active) { if (active) { this.__windowTimer && clearTimeout(this.__windowTimer) @@ -223,12 +231,21 @@ export default { }, windowSizeListener() { - this.$store.state.windowWidth = $A(window).width() - this.$store.state.windowHeight = $A(window).height() - this.$store.state.windowLarge = this.$store.state.windowWidth > 834 - this.$store.state.windowSmall = this.$store.state.windowWidth <= 834 - this.$store.state.formLabelPosition = this.$store.state.windowWidth > 576 ? 'right' : 'top' - this.$store.state.formLabelWidth = this.$store.state.windowWidth > 576 ? 'auto' : '' + const windowWidth = $A(window).width(), + windowHeight = $A(window).height(), + windowOrientation = $A.strExists(window.screen.orientation.type, 'portrait') ? 'portrait' : 'landscape' + + this.$store.state.windowTouch = "ontouchend" in document + + this.$store.state.windowWidth = windowWidth + this.$store.state.windowHeight = windowHeight + + this.$store.state.windowOrientation = windowOrientation + this.$store.state.windowLandscape = windowOrientation === 'landscape' + this.$store.state.windowPortrait = windowOrientation === 'portrait' + + this.$store.state.formLabelPosition = windowWidth > 576 ? 'right' : 'top' + this.$store.state.formLabelWidth = windowWidth > 576 ? 'auto' : '' }, windowScrollListener() { diff --git a/resources/assets/js/components/AutoTip.vue b/resources/assets/js/components/AutoTip.vue index 04466b33a..4bdf8c5e1 100644 --- a/resources/assets/js/components/AutoTip.vue +++ b/resources/assets/js/components/AutoTip.vue @@ -4,7 +4,7 @@ :placement="placement" :effect="tooltipTheme" :delay="delay" - :disabled="windowSmall || $isEEUiApp || !showTooltip || disabled" + :disabled="$isEEUiApp || windowTouch || !showTooltip || disabled" :max-width="tooltipMaxWidth" transfer> diff --git a/resources/assets/js/components/Loading.vue b/resources/assets/js/components/Loading.vue index 4447ebe31..bd2d5a8c1 100644 --- a/resources/assets/js/components/Loading.vue +++ b/resources/assets/js/components/Loading.vue @@ -1,5 +1,5 @@