DEV: mv user location comp to gjs, remove dom manip

assets/javascripts/discourse/components/replace-location.gjs

@@ -2,6 +2,7 @@ import Component from "@glimmer/component";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import bodyClass from "discourse/helpers/body-class";
 import icon from "discourse-common/helpers/d-icon";
 import UserLocation from "./user-location";
 
@@ -25,18 +26,10 @@ export default class ReplaceLocationComponent extends Component {
     );
   }
 
-  @action
-  addClass() {
-    document
-      .querySelectorAll(".user-main .location-and-website")
-      .forEach(function (element) {
-        element.classList.add("map-location-enabled");
-      });
-  }
-
   <template>
+    {{bodyClass "map-location-enabled"}}
     {{#if this.showUserLocation}}
-      <div {{didInsert this.addClass}} class="user-profile-location">
+      <div class="user-profile-location">
         <UserLocation @user={{@model}} @formFactor="profile" />
       </div>
     {{/if}}

assets/javascripts/discourse/components/user-location.js → assets/javascripts/discourse/components/user-location.gjs

@@ -3,15 +3,18 @@ import Component from "@glimmer/component";
 import { inject as service } from "@ember/service";
 import { tracked } from "@glimmer/tracking";
 import I18n from "I18n";
+import DButton from "discourse/components/d-button";
+import icon from "discourse-common/helpers/d-icon";
 import { geoLocationFormat } from "../lib/location-utilities";
+import LocationsMap from "./locations-map";
 
 export default class LocationMapComponent extends Component {
   @service siteSettings;
   @service site;
   @tracked showMap = false;
 
   get mapButtonLabel() {
-    return I18n.t(`location.geo.${this.showMap ? "hide" : "show"}_map`);
+    return `location.geo.${this.showMap ? "hide" : "show"}_map`
   }
 
   get showMapButtonLabel() {
@@ -46,4 +49,28 @@ export default class LocationMapComponent extends Component {
   toggleMap() {
     this.showMap = !this.showMap;
   }
+
+  <template>
+    <div class="user-location-widget">
+      {{icon "map-marker-alt"}}
+      <div class="location-label">
+        {{this.userLocation}}
+      </div>
+      {{#if this.canShowMap}}
+        <div class="map-wrapper">
+          <DButton
+            class="widget-button btn btn-default btn-show-map btn-small btn-icon-text"
+            @action={{this.toggleMap}}
+            @icon="far-map"
+            @label={{if this.showMapButtonLabel this.mapButtonLabel}}
+          />
+          {{#if this.showMap}}
+            <div class="map-container small">
+              <LocationsMap @mapType="user" @user={{@user}} />
+            </div>
+          {{/if}}
+        </div>
+      {{/if}}
+    </div>
+  </template>
 }

assets/stylesheets/common/locations-user.scss

@@ -100,35 +100,56 @@
   }
 }
 
-.user-main
-  .about
-  .primary
-  .primary-textual
-  .location-and-website.map-location-enabled {
-  overflow: initial;
-
-  > span {
-    max-width: 80%;
-  }
+body.map-location-enabled {
+  .user-main .about .primary .primary-textual .location-and-website {
+    overflow: initial;
+    display: flex;
+    flex-direction: row;
 
-  .user-profile-location,
-  .user-profile-website {
-    display: none;
-  }
+    > span {
+      max-width: 80%;
+      flex: 1;
+    }
 
-  .replace-location .user-profile-location,
-  .replace-location .user-profile-website {
-    display: block;
-    margin-right: 0;
-  }
+    .user-profile-location,
+    .user-profile-website {
+      display: none;
+    }
 
-  .location-label {
-    max-width: 100%;
-    white-space: initial;
-  }
+    .replace-location .user-profile-location,
+    .replace-location .user-profile-website {
+      display: block;
+      margin-right: 0;
+    }
 
-  .map-wrapper {
-    min-width: 110px;
-    text-align: right;
+    .replace-location .user-profile-location {
+      .user-location-widget {
+        display: flex;
+        flex-direction: row;
+        .location-label {
+          max-width: 100%;
+          white-space: initial;
+        }
+        svg {
+          padding-top: 5px;
+        }
+        .map-wrapper {
+          min-width: 110px;
+          text-align: right;
+          .map-container.small {
+            z-index: 290;
+            width: 300px;
+            right: initial;
+            top: initial;
+            transform: translate(-190px, 0);
+            .avatar {
+              margin-right: 10px;
+              width: 30px;
+              height: 30px;
+            }
+          }
+        }
+      }
+    }
   }
 }

plugin.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 # name: discourse-locations
 # about: Tools for handling locations in Discourse
-# version: 6.6.12
+# version: 6.6.13
 # authors: Angus McLeod, Robert Barrow
 # contact_emails: development@pavilion.tech
 # url: https://github.com/angusmcleod/discourse-locations