add advance custom style

GeotrekCE · Feb 14, 2024 · 70e85ad · 70e85ad
1 parent 7ea9324
commit 70e85ad
Show file tree

Hide file tree

Showing 40 changed files with 1,052 additions and 956 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "docs:preview": "vitepress preview docs"
   },
   "dependencies": {
-    "@raruto/leaflet-elevation": "^2.4.0",
+    "@raruto/leaflet-elevation": "^1.9.0",
     "@stencil/core": "^3.4.1",
     "choices.js": "^10.2.0",
     "leaflet": "^1.9.4",

diff --git a/src/components/grw-app/grw-app.tsx b/src/components/grw-app/grw-app.tsx
@@ -336,7 +336,7 @@ export class GrwApp {
           !state.currentTouristicContents &&
           !state.currentTouristicEvents && (
             <div class="grw-init-loader-container">
-              <grw-loader color-primary-container={this.colorPrimaryContainer} color-on-primary-container={this.colorOnPrimaryContainer}></grw-loader>
+              <grw-loader exportparts="loader" color-primary-container={this.colorPrimaryContainer} color-on-primary-container={this.colorOnPrimaryContainer}></grw-loader>
             </div>
           )}
         {this.treks && state.mode === 'treks' && !this.showTrek && !this.showTouristicContent && !this.showTouristicEvent && !state.currentTreks && (
@@ -430,8 +430,9 @@ export class GrwApp {
                   <div class="grw-handle-search-container">
                     <grw-search fontFamily={this.fontFamily}></grw-search>
                   </div>
-                  <div class="hgrw-andle-filters-container">
+                  <div class="grw-handle-filters-container">
                     <grw-common-button
+                      exportparts="common-button,common-button-icon,common-button-label"
                       fontFamily={this.fontFamily}
                       action={() => this.handleFilters()}
                       icon={'filter_list'}
@@ -455,7 +456,12 @@ export class GrwApp {
               {state.networkError && (
                 <div class="grw-error-container">
                   Une erreur est survenue.
-                  <grw-common-button icon="refresh" name="Recharger la page" action={() => this.reload()}></grw-common-button>
+                  <grw-common-button
+                    exportparts="common-button,common-button-icon,common-button-label"
+                    icon="refresh"
+                    name="Recharger la page"
+                    action={() => this.reload()}
+                  ></grw-common-button>
                 </div>
               )}
               <div
@@ -502,11 +508,11 @@ export class GrwApp {
               {((this.showTrek && !state.currentTrek) ||
                 (this.showTouristicContent && !state.currentTouristicContent) ||
                 (this.showTouristicEvent && !state.currentTouristicEvent) ||
-                (!state.treks && state.mode === 'treks') ||
+                (!state.treks && state.mode === 'treks' && !this.showTrek) ||
                 (!state.touristicContents && state.mode === 'touristicContents') ||
                 (!state.touristicEvents && state.mode === 'touristicEvents')) && (
                 <div class={this.isLargeView ? 'grw-large-view-loader-container' : 'grw-loader-container'}>
-                  <grw-loader color-primary-container={this.colorSecondaryContainer} color-on-primary-container={this.colorOnSecondaryContainer}></grw-loader>
+                  <grw-loader exportparts="loader" color-primary-container={this.colorSecondaryContainer} color-on-primary-container={this.colorOnSecondaryContainer}></grw-loader>
                 </div>
               )}
               {this.showTrek && (
@@ -574,6 +580,7 @@ export class GrwApp {
               )}
               {!state.networkError && (
                 <grw-map
+                  exportparts="map,elevation,map-bottom-space,map-loader-container,loader"
                   reset-store-on-disconnected={'false'}
                   class={this.isLargeView ? 'grw-large-view-app-map-container' : 'grw-app-map-container'}
                   style={{
@@ -612,6 +619,7 @@ export class GrwApp {
               (this.showTouristicEvent && state.currentTouristicEvent)) && (
               <div class="grw-map-visibility-button-container">
                 <grw-extended-fab
+                  exportparts="map-visibility-button,map-visibility-button-icon,map-visibility-button-label"
                   fontFamily={this.fontFamily}
                   action={() => this.handleShowMap()}
                   icon={() => this.getMapVisibilityIconButton()}

diff --git a/src/components/grw-common-button/grw-common-button.scss b/src/components/grw-common-button/grw-common-button.scss
@@ -30,7 +30,7 @@
   font-weight: 500;
   box-shadow: var(--elevation-1);
   transition: box-shadow 0.2s ease-in-out 0s;
-  span {
+  .common-button-icon {
     font-size: 18px;
   }
 }
diff --git a/src/components/grw-common-button/grw-common-button.tsx b/src/components/grw-common-button/grw-common-button.tsx
@@ -19,12 +19,14 @@ export class GrwCommonButton {
           '--font-family': this.fontFamily,
         }}
       >
-        <button onClick={() => this.action()} class="common-button">
+        <button part="common-button" class="common-button" onClick={() => this.action()}>
           {/* @ts-ignore */}
-          <span translate={false} class="material-symbols material-symbols-outlined margin-right-icon">
+          <span part="common-button-icon" class="material-symbols material-symbols-outlined icon" translate={false}>
             {this.icon}
           </span>
-          {this.name}
+          <span part="common-button-label" class="label">
+            {this.name}
+          </span>
         </button>
       </Host>
     );

diff --git a/src/components/grw-extended-fab/grw-extended-fab.scss b/src/components/grw-extended-fab/grw-extended-fab.scss
@@ -27,7 +27,8 @@
   &:hover {
     box-shadow: var(--elevation-4);
   }
-  span {
+  .icon,
+  .label {
     font-size: 24px;
     margin-right: 8px;
     color: var(--fab-color);

diff --git a/src/components/grw-extended-fab/grw-extended-fab.tsx b/src/components/grw-extended-fab/grw-extended-fab.tsx
@@ -20,12 +20,14 @@ export class GrwExtendedFab {
           '--font-family': this.fontFamily,
         }}
       >
-        <button onClick={() => this.action()} class="map-visibility-button" style={{ display: this.display }}>
+        <button part="map-visibility-button" class="map-visibility-button" onClick={() => this.action()} style={{ display: this.display }}>
           {/* @ts-ignore */}
-          <span translate={false} class="material-symbols material-symbols-outlined">
+          <span part="map-visibility-button-icon" class="material-symbols material-symbols-outlined icon" translate={false}>
             {this.icon()}
           </span>
-          {this.name()}
+          <span part="map-visibility-button-label" class="label">
+            {this.name()}
+          </span>
         </button>
       </Host>
     );

diff --git a/src/components/grw-filter/grw-filter.scss b/src/components/grw-filter/grw-filter.scss
@@ -75,8 +75,7 @@
       font-family: var(--font-family);
     }
   }
-  .filter-button,
-  .selected-filter-button {
+  .filter-button {
     cursor: pointer;
     user-select: none;
     font-size: 14px;
@@ -107,7 +106,7 @@
   .selected-filter-button {
     color: var(--color-on-secondary-container);
     background-color: var(--color-secondary-container);
-    span {
+    .icon {
       font-size: 24px;
       margin-right: 8px;
       color: var(--color-on-secondary-container);

diff --git a/src/components/grw-filter/grw-filter.tsx b/src/components/grw-filter/grw-filter.tsx
@@ -128,21 +128,23 @@ export class GrwFilter {
           '--font-family': this.fontFamily,
         }}
       >
-        <div class="filter-name display-large">{this.filterName}</div>
-        <div class="filter-button-container">
+        <div part="filter-name" class="filter-name display-large">{this.filterName}</div>
+        <div part="filter-button-container" class="filter-button-container">
           {state[this.filterType].length > 9 ? (
-            <select multiple ref={el => (this.choicesRef = el)}></select>
+            <select part="filter-select" multiple ref={el => (this.choicesRef = el)}></select>
           ) : (
             state[this.filterType]
               .filter(currentFilter => !currentFilter.hasOwnProperty('filter') || (currentFilter.hasOwnProperty('filter') && currentFilter.filter))
               .map(currentFilter => (
-                <button onClick={event => this.handleFilter(event, currentFilter)} class={currentFilter.selected ? 'selected-filter-button' : 'filter-button'}>
+                <button part="filter-button" class={currentFilter.selected ? 'filter-button selected-filter-button' : 'filter-button'} onClick={event => this.handleFilter(event, currentFilter)}>
                   {/* @ts-ignore */}
-                  {currentFilter.selected && (<span translate={false} class="material-symbols material-symbols-outlined">
+                  {currentFilter.selected && (<span  part="selected-filter-icon"  class="material-symbols material-symbols-outlined icon" translate={false}>
                       check
                     </span>
                   )}
-                  {currentFilter[this.filterNameProperty]}
+                  <span part="filter-label" class="filter-label">
+                    {currentFilter[this.filterNameProperty]}
+                  </span>
                 </button>
               ))
           )}