fix: App center - Application help icon is mis-placed - EXO-71815 - M…

…eeds-io/meeds#2035 (#322) Before this change, when,add a hlep url on any app & save and display app center and check? icon displayed, the icon ? location is wrong. After this change, the ? icon is on the bottom of the card next to the bookmark icon on the left.
Meeds-io · May 24, 2024 · 799ec23 · 799ec23
1 parent 605f4cb
commit 799ec23
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 44 deletions.
diff --git a/app-center-webapps/src/main/webapp/skin/less/app-center.less b/app-center-webapps/src/main/webapp/skin/less/app-center.less
@@ -504,26 +504,19 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
                 color: @textColorDefault;
               }
             }
-            .appHelp {
-              position: relative;
-              left: 5%;
-              bottom: 41%;
-              margin: 0;
-
-              .v-icon {
-                color: @greyColorLighten1Default;
-              }
-            }
           }
           .applicationActions {
             height: 22px;
-            justify-content: space-between;
             padding: 0 0 0 8px ~'; /** orientation=lt */ ';
             padding: 0 8px 0 0 ~'; /** orientation=rt */ ';
+            justify-content: space-between;
             a {
               font-weight: 600;
               text-transform: uppercase;
             }
+            .actionsBtn {
+              display: inline-flex;
+            } 
             button {
               padding: 0;
               .v-icon {
@@ -533,6 +526,14 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
             .mandatory .v-icon {
               color: @greyColorLighten1Default!important;
             }
+            .appHelp {
+              position: relative;
+              margin: 0;
+              .v-icon {
+                color: @greyColorLighten1!important;
+                bottom: -1px;
+              }
+            }
           }
         }
       }

diff --git a/...nter-webapps/src/main/webapp/vue-apps/userSetup/components/UserAuthorizedApplications.vue b/...nter-webapps/src/main/webapp/vue-apps/userSetup/components/UserAuthorizedApplications.vue
@@ -110,19 +110,6 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
                         </h5>
                       </a>
                     </div>
-                    <template v-if="authorizedApp.helpPageURL">
-                      <v-list-item-action class="appHelp">
-                        <v-btn
-                          small
-                          icon
-                          @click="navigateTo(authorizedApp.helpPageURL)">
-                          <v-icon
-                            x-small>
-                            mdi-help
-                          </v-icon>
-                        </v-btn>
-                      </v-list-item-action>
-                    </template>
                   </div>
                   <v-card-text class="userAppDescription">
                     <div
@@ -138,31 +125,45 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
                     :target="authorizedApp.target"
                     :href="authorizedApp.computedUrl"
                     @click="logOpenApplication(authorizedApp.id)">{{ $t("appCenter.userSetup.authorized.open") }}</a>
-                  <div
-                    :title="getTooltip(authorizedApp)">
+                  <div class="actionsBtn">
                     <v-btn
-                      v-if="authorizedApp.mandatory"
+                      v-if="authorizedApp.helpPageURL"
+                      class="appHelp"
+                      x-small
                       icon
-                      disabled
-                      class="mandatory">
+                      @click="navigateTo(authorizedApp.helpPageURL)">
                       <v-icon
-                        small
-                        color="red">
-                        mdi-star
-                      </v-icon>
-                    </v-btn>
-                    <v-btn
-                      v-else
-                      icon
-                      :disabled="authorizedApp.mandatory || (!authorizedApp.favorite && !canAddFavorite)"
-                      :class="authorizedApp.mandatory || authorizedApp.favorite ? 'favorite' : ''"
-                      @click.stop="addOrDeleteFavoriteApplication(authorizedApp)">
-                      <v-icon
-                        small
-                        color="red">
-                        {{ authorizedApp.mandatory || authorizedApp.favorite ? 'mdi-star' : 'mdi-star-outline' }}
+                        x-small>
+                        mdi-help
                       </v-icon>
                     </v-btn>
+                    <div :title="getTooltip(authorizedApp)">
+                      <v-btn
+                        v-if="authorizedApp.mandatory"
+                        x-small
+                        icon
+                        disabled
+                        class="mandatory">
+                        <v-icon
+                          small
+                          color="red">
+                          mdi-star
+                        </v-icon>
+                      </v-btn>
+                      <v-btn
+                        v-else
+                        x-small
+                        icon
+                        :disabled="authorizedApp.mandatory || (!authorizedApp.favorite && !canAddFavorite)"
+                        :class="authorizedApp.mandatory || authorizedApp.favorite ? 'favorite' : ''"
+                        @click.stop="addOrDeleteFavoriteApplication(authorizedApp)">
+                        <v-icon
+                          small
+                          color="red">
+                          {{ authorizedApp.mandatory || authorizedApp.favorite ? 'mdi-star' : 'mdi-star-outline' }}
+                        </v-icon>
+                      </v-btn>
+                    </div>
                   </div>
                 </v-card-actions>
               </div>