architwin 1.14.5 → 1.14.7

package/lib/atwinui/components/toolbar/screenSharePane.d.ts

@@ -20,3 +20,4 @@ export declare function handleScreenShareEndSessionEvent(): void;
 export declare function handleScreenShareBackUserListPane(): void;
 export declare function handleScreenShareAcceptRequest(payload: ScreenShareRequest): void;
 export declare function removeScreenShareSessionData(): void;
+export declare function handleScreenShareResponsiveChanges(): void;

package/lib/atwinui/components/toolbar/screenSharePane.js

@@ -1,6 +1,7 @@
 import { _currentSpace, _screenSharingHostUser, dispatchSpaceEvent } from '../../../architwin';
 import { SPACE_EVENTS } from '../../../types';
 import i18n from './i18n';
+import { isMobileMode } from '../../helpers';
 let _spaceData = null;
 let _currentUser = { id: 'host_user', name: 'host_user', onlineStatus: 'online' };
 let _screenShareUsers = [];
@@ -18,17 +19,22 @@ export function renderScreenSharePane() {
     element.innerHTML = `
         <div class="at_flex at_flex_column">
             <div id="at-screen-share-pane-content" class="at_form_container">
-                <div class="at_flex at_justify_start">
-                    <span class="at_bolder at_text_base">${i18n.t('Users')}</span>
+                <div id="at-screen-share-pane-sub-content">
+                    <div class="at_flex at_justify_start">
+                        <span class="at_bolder at_text_base">${i18n.t('Users')}</span>
+                    </div>
+                    <div id="at-user-list-container" class="at_disable_hover_users_list at_scrollable_container">
+                        <table id="at-user-list-table">
+                        </table>
+                    </div>
                 </div>
-                <div id="at-user-list-container" class="at_disable_hover_users_list at_scrollable_container">
-                    <table id="at-user-list-table">
-                    </table>
-                </div>
-                <button type="button" id="at-screen-share-end-session-btn" class="at_SCREEN_SHARE_HOST_END_SESSION_btn"
-                style="display:none;">
+               <div id="at-screen-share-end-session-btn-container" class="at_w-full">
+                <button type="button" id="at-screen-share-end-session-btn" class="at_end_session_button"
+                style="display:none;" data-cy="at-host-leave-session-btn">
                     ${i18n.t('EndSession')}
                 </button>
+                </div>
+               
             </div>
         </div>
     `;
@@ -57,6 +63,7 @@ export function renderUsersList(users) {
     });
     handleClickEventUserRow();
     handleClickEventEndSessionBtn();
+    handleScreenShareResponsiveChanges();
 }
 export function renderOnlineUserRow(user) {
     const element = document.createElement("tr");
@@ -194,9 +201,11 @@ export function renderSharingSpaceDetail(user) {
                     <span class="mdi mdi-arrow-left"></span>
                     <p> ${i18n.t('BackToUserList')}</p>
                 </div>
-                <button type="button" id="at-screen-share-end-session-btn" class="at_SCREEN_SHARE_HOST_END_SESSION_btn">
+                 <div id="at-screen-share-end-session-btn-container" class="at_w-full">
+                <button type="button" id="at-screen-share-end-session-btn" class="at_end_session_button">
                     ${i18n.t('EndSession')}
                 </button>
+                </div>
             </div>
         </div>
     `;
@@ -221,17 +230,21 @@ function recreateUserListContainer() {
     usersPaneContent.classList.add('at_form_container');
     const endSessionBtnVisibility = _screenShareSession ? 'block' : 'none';
     usersPaneContent.innerHTML = `
-        <div class="at_flex at_justify_start">
+        <div id="at-screen-share-pane-sub-content">
+        <div id="at-user-list-title" class="at_flex at_justify_start">
             <span class="at_bolder at_text_base">${i18n.t('Users')}</span>
         </div>
         <div id="at-user-list-container" class="at_disable_hover_users_list at_scrollable_container">
             <table id="at-user-list-table">
             </table>
         </div>
+        </div>
+        
         <button type="button" id="at-screen-share-end-session-btn" class="at_button at_ghost at_w-full" 
         style="display:${endSessionBtnVisibility};">
             ${i18n.t('EndSession')}
         </button>
+ 
     `;
 }
 export function renderScreenShareLeaveConfirmationModal(isUserHost) {
@@ -433,3 +446,27 @@ const updateScreenSharePointer = (isOn) => {
     }
     select.selectedIndex = isOn ? 0 : 1;
 };
+export function handleScreenShareResponsiveChanges() {
+    const element = document.getElementById("at-screen-share-pane");
+    if (!element)
+        return;
+    const isMobile = isMobileMode();
+    element.classList.toggle("at_w-13", !isMobile);
+    element.classList.toggle("at_w-responsive-61", isMobile);
+    const button = element.querySelector("#at-screen-share-end-session-btn");
+    if (button) {
+        button.className = isMobile ? "at_end_session_button-mobile" : "at_end_session_button";
+        button.innerHTML = isMobile ? `<span class="mdi mdi-power"></span>` : i18n.t("EndSession");
+        const content = element.querySelector("#at-screen-share-pane-sub-content");
+        if (content) {
+            const isButtonVisible = window.getComputedStyle(button).display === "block";
+            const shouldHideContent = isMobile && isButtonVisible;
+            content.classList.toggle("at_hidden", shouldHideContent);
+            element.classList.toggle("at_bg_transparent", shouldHideContent);
+        }
+        const container = element.querySelector("#at-screen-share-end-session-btn-container");
+        if (container) {
+            container.classList.toggle("at_display_flex_end", isMobile);
+        }
+    }
+}

package/lib/atwinui/components/toolbar/tagListPane.js

@@ -38,23 +38,23 @@ export function renderTagListPane() {
             <span>${i18n.t('Tags')}</span>
         </div>
         <div class="at_form_container at_h-min-65 at_tag_list_pane">
-            <div class="at_sort_btn_container">
-                <div id="at-tag-sort-icon" class="mdi mdi-filter mdi-24px at_icon_hover">
-                    <span id="at-tag-sort-options-tooltip" class="at_custom_tooltip">
-                        <p class="at_tag_sort_option at_sort_option_selected" data-sort="Ascending">${i18n.t('Ascending')}</p>
-                        <p class="at_tag_sort_option" data-sort="Descending">${i18n.t('Descending')}</p>
-                        <p class="at_tag_sort_option" data-sort="Newest">${i18n.t('Newest')}</p>
-                        <p class="at_tag_sort_option" data-sort="Oldest">${i18n.t('Oldest')}</p>
-                    </span>
-                </div>
-            </div>
-            <div class="at_flex_row">
-                <input class="at_field_search_input" type="text" name="search_name" id="at-tag-name-search" data-cy="at-tag-name-search" placeholder=${i18n.t('Search...')}>
-                <span class="mdi mdi-close at_button_search_tag" id="at-clear-search-tag-name" style="display:none"></span>
-                <button class="at_search_button" id="at-search-tag-button">
-                    <span class="mdi mdi-magnify"></span>
-                </button>
-            </div>
+<div class="at_tags_filter_section">
+    <input class="at_field_search_input" type="text" name="search_name" id="at-tag-name-search" data-cy="at-tag-name-search" placeholder=${i18n.t('Search...')}>
+    <span class="mdi mdi-close at_button_search_tag" id="at-clear-search-tag-name" style="display:none"></span>
+    <button class="at_search_button" id="at-search-tag-button">
+        <span class="mdi mdi-magnify"></span>
+    </button>
+    <div class="at_sort_btn_container">
+        <div id="at-tag-sort-icon" class="mdi mdi-filter mdi-24px at_icon_hover">
+            <span id="at-tag-sort-options-tooltip" class="at_custom_tooltip">
+                <p class="at_tag_sort_option at_sort_option_selected" data-sort="Ascending">${i18n.t('Ascending')}</p>
+                <p class="at_tag_sort_option" data-sort="Descending">${i18n.t('Descending')}</p>
+                <p class="at_tag_sort_option" data-sort="Newest">${i18n.t('Newest')}</p>
+                <p class="at_tag_sort_option" data-sort="Oldest">${i18n.t('Oldest')}</p>
+            </span>
+        </div>
+    </div>
+</div>
             <div class="at_field at_flex_column" style="${_tagCategories ? '' : 'display: none;'}">
                 <label for="">${i18n.t('Category')}</label>
                 <div id="at-custom-category-filter-dropdown" data-cy="at-custom-category-filter-dropdown">

package/lib/atwinui/components/toolbar/viewingRemoteSpace.d.ts

@@ -5,3 +5,4 @@ export declare function renderViewingRemoteSpace(): HTMLElement;
  * @param user The user who is currently sharing their screen
  */
 export declare function renderRemoteSpaceViewing(user: ScreenShareUser): void;
+export declare function handleRemoteViewResponsiveChanges(): void;

package/lib/atwinui/components/toolbar/viewingRemoteSpace.js

@@ -1,5 +1,6 @@
 import { _currentSpace } from "../../../architwin";
 import i18n from './i18n';
+import { isMobileMode } from "../../helpers";
 export function renderViewingRemoteSpace() {
     const element = document.createElement('div');
     element.classList.add('at_container', 'at_w-14', 'at_h-full', 'at_p-5');
@@ -12,14 +13,10 @@ export function renderViewingRemoteSpace() {
 
         <div id="at-sharing-user-container" >
         </div>
-
-        <div class="at_button_row at_justify_center">
-            <div 
-                class="at_button at_ghost at_w-full" 
-                id="at-user-leave-session-btn" 
-                data-cy="at-user-leave-session-btn">
-                ${i18n.t('LeaveSession')}
-            </div>
+        <div id="at-user-leave-session-btn-container" class="at_w-full">
+            <button id="at-user-leave-session-btn"  type="button" class="at_end_session_button at_text-xxl  at_p-2  at_w-full" data-cy="at-user-leave-session-btn">
+                    ${i18n.t('LeaveSession')}
+            </button>
         </div>
     `;
     return element;
@@ -79,4 +76,27 @@ export function renderRemoteSpaceViewing(user) {
     instruction.className = 'at_text_xs at_text_center at_text_white at_opacity_80 at_mb_6';
     instruction.textContent = i18n.t('ViewingInstructions');
     container.appendChild(instruction);
+    handleRemoteViewResponsiveChanges();
+}
+export function handleRemoteViewResponsiveChanges() {
+    const element = document.getElementById("at-viewing-remote-space-pane");
+    if (!element)
+        return;
+    const isMobile = isMobileMode();
+    const content = element.querySelector("#at-sharing-user-container");
+    element.classList.toggle("at_w-14", !isMobile);
+    element.classList.toggle("at_w-screen", isMobile);
+    element.classList.toggle("at_bg_transparent", isMobile);
+    if (content) {
+        content.classList.toggle("at_hidden", isMobile);
+    }
+    const button = element.querySelector("#at-user-leave-session-btn");
+    if (button) {
+        button.className = isMobile ? "at_end_session_button-mobile" : "at_end_session_button";
+        button.innerHTML = isMobile ? `<span class="mdi mdi-power"></span>` : i18n.t("EndSession");
+    }
+    const container = element.querySelector("#at-user-leave-session-btn-container");
+    if (container) {
+        container.classList.toggle("at_display_flex_end", isMobile);
+    }
 }

package/lib/atwinui/events.js

@@ -30,11 +30,11 @@ import { getBasepointCalibrateBpCoordinateValues, getBasepointCalibrateMpCoordin
 import { toggleGeneralMapOptions, initGeneralSelectedMap, getSelectedMapOption } from './components/toolbar/generalSettingsMenuPane';
 import { searchTagList, setSearchTagTerm, searchClearfield, getSearchTagTerm, sortTags, updateSelectedTagSortOption, resetSelectedTagSortOption } from './components/toolbar/tagListPane';
 import { renderUserRows } from "./components/toolbar/spaceUserListPane";
-import { renderRemoteSpaceViewing } from "./components/toolbar/viewingRemoteSpace";
+import { handleRemoteViewResponsiveChanges, renderRemoteSpaceViewing } from "./components/toolbar/viewingRemoteSpace";
 import { PipeList } from "./components/toolbar/pipeListPane";
 import { PipeForm } from "./components/toolbar/pipeFormPane";
 import { unsendComment, timedoutComment, getTheseTagMessages } from './components/toolbar/tagMessagingPane';
-import { handleScreenShareAcceptRequest, handleScreenShareBackUserListPane, handleScreenShareEndSessionEvent, handleScreenShareUsersUpdated, renderScreenShareLeaveConfirmationModal } from "./components/toolbar/screenSharePane";
+import { handleScreenShareResponsiveChanges, handleScreenShareAcceptRequest, handleScreenShareBackUserListPane, handleScreenShareEndSessionEvent, handleScreenShareUsersUpdated, renderScreenShareLeaveConfirmationModal } from "./components/toolbar/screenSharePane";
 const pipeList = new PipeList();
 const pipeForm = new PipeForm();
 let activeToolbarItem, activeActionItem, activePane, activeActionPane, cancelTagPlacementPrompt, cancelModelPlacementPrompt;
@@ -452,8 +452,15 @@ function setupIndividualEventListeners() {
     handleClickEventInObjectSortOption();
     handlePipeForm();
     handlePipeList();
+    handleResponsiveChanges();
 }
 //================ OBJECT EVENT HANDLERS ===============//s
+function handleResponsiveChanges() {
+    window.addEventListener("resize", () => {
+        handleScreenShareResponsiveChanges();
+        handleRemoteViewResponsiveChanges();
+    });
+}
 function handlePipeCategory(payload) {
     return __awaiter(this, void 0, void 0, function* () {
         console.log("HANDLE CATEGORY =>", payload);

package/lib/atwinui/helpers.d.ts

@@ -13,3 +13,4 @@ export declare function waitForChange<T1, T2>(getter1: () => T1, getter2: () =>
  * @param key The key of the target object to update
  */
 export declare function observeInputToUpdate(input: HTMLInputElement, getTarget: () => Record<string, any> | undefined, key: string): void;
+export declare function isMobileMode(): boolean;

package/lib/atwinui/helpers.js

@@ -47,3 +47,11 @@ export function observeInputToUpdate(input, getTarget, key) {
     input.addEventListener('input', update);
     console.log("observer ==>", input);
 }
+export function isMobileMode() {
+    // Detect by screen size
+    const isSmallScreen = window.innerWidth <= 768; // typical mobile breakpoint
+    // Detect by user agent
+    const ua = navigator.userAgent.toLowerCase();
+    const isMobileDevice = /iphone|ipad|android|mobile/.test(ua);
+    return isSmallScreen || isMobileDevice;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "architwin",
-  "version": "1.14.5",
+  "version": "1.14.7",
   "description": "ArchiTwin Library for Matterport",
   "main": "./lib/architwin.js",
   "types": "./lib/architwin.d.ts",

package/static/atwinui.css

@@ -707,6 +707,9 @@
     justify-content: space-between;
 }
 
+.at_flex_end {
+    justify-content:flex-end;
+}
 .at_field label {
     color: var(--text-color-light);
     font-size: 1em;
@@ -734,8 +737,11 @@
     color: var(--text-color-light);
     font: 3em;
     padding: 10px 8px;
-    margin-top: 4px;
-    width: 11.75rem
+    margin-top: 1px;
+    margin-left: 4px;
+    height: 2.45rem;
+    width: 9rem;
+    /* width: 11.75rem */
 }
 
 .at_field_search_input:focus {
@@ -2195,6 +2201,42 @@
     cursor: pointer;
 }
 
+.at_end_session_button {
+    border: 2px solid white;
+    border-radius: 5px;
+    background-color: #d51a4c;
+    color: white;
+    margin-top: 0.5rem;
+    padding-block: 5px;
+    /* align-self: stretch; */
+    text-align: center;
+    outline: none;
+    font-size: 14px;
+    cursor: pointer;
+    width: 100%;
+}
+.at_end_session_button-mobile {
+    background-color: #d51a4c;
+    border-radius: 8px;
+    border: 2px solid white;
+    border-radius: 5px;
+    color: white;
+    /* padding-block: 5px; */
+    /* align-self: stretch; */
+    text-align: center;
+    outline: none;
+    cursor: pointer;
+    width: 45px !important;
+    height: 45px !important;
+    font-size: 25px;
+}
+
+.at_bg_transparent{
+    /* border:  1px solid black; */
+    background-color: transparent !important;
+    /* width: 18rem;     */
+}
+
 .at_screen_share_request_modal {
     width: 600px;
     height: 300px;
@@ -2284,7 +2326,7 @@ dialog#at-screen-share-request-modal::backdrop {
 }
 
 #at-user-leave-session-btn {
-    background-color: #d51a4c;
+    /* background-color: #d51a4c; */
     border-radius: 8px;
 }
 
@@ -2292,9 +2334,16 @@ dialog#at-screen-share-request-modal::backdrop {
     background-color: #d51a4c;
     border-radius: 8px;
     color: white;
-    padding-top: 8.75px !important;
-    padding-bottom: 8.75px !important;
+    /* padding-top: 8.75px !important;
+    padding-bottom: 8.75px !important; */
     max-height: 3rem !important;
+    width: 100%;
+}
+
+.at_display_flex_end{
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
 }
 
 .at_gap_2rem {
@@ -2317,6 +2366,7 @@ dialog#at-screen-share-request-modal::backdrop {
     display: flex;
     flex-direction: column;
     align-items: end;
+    margin-top: 1px;
 }
 
 #at-tag-sort-icon {
@@ -2332,3 +2382,11 @@ dialog#at-screen-share-request-modal::backdrop {
 .at_sort_option_selected {
     background-color: var(--bg-accent) !important;
 }
+
+.at_tags_filter_section {
+    display: flex;
+    flex-direction: row;
+    gap: 2px !important;
+    height: max-content;
+    height: 3rem;
+}

package/static/utility.css

@@ -38,6 +38,9 @@ height: calc(100vh - 304px)
    height: calc(100vh - 650px);
 }
 
+.at_w-responsive-61{
+   width: calc(100vw - 61px);
+}
 .at_p-2{
   padding: 0.5rem;
 }