feat(module_link): ModuleLinkItem with a popover for disabled cue

frappe/public/js/frappe/views/components/Desktop.vue

@@ -16,8 +16,8 @@
 					<div class="flush-top">
 						<div class="module-box-content">
 							<h4 class="h4">
+								<span v-if="module.count" class="indicator orange"></span>
 								{{ module.label }}
-								<span v-if="module.count" class="open-notification global">{{ module.count }}</span>
 							</h4>
 							<p class="small text-muted"> {{ module.description }} </p>
 						</div>

frappe/public/js/frappe/views/components/ModuleDetail.vue

@@ -6,40 +6,12 @@
 				class="border section-box"
 			>
 				<h4 class="h4"> {{ section.label }} </h4>
-				<div v-for="item in section.items" class="link-item small"
+				<module-link-item v-for="item in section.items" class=" small"
 					:key="section.label + item.label"
 					:data-youtube-id="item.type==='help' ? item.youtube_id : false"
+					v-bind="item"
 				>
-					<div v-if="item.dependencies && item.incomplete_dependencies"
-						@mouseover="item.hover = true" @mouseleave="item.hover = false"
-						class="text-muted indicator grey"
-					>
-						{{ item.label || __(item.name) }}
-
-						<div v-show="item.hover"
-							class="popover fade top in" role="tooltip" id="popover515340" style="top: 221.562px; left: 581.914px; display: block;"
-						>
-
-							<div class="arrow" style="left: 50%;"></div>
-							<h3 class="popover-title" style="display: none;"></h3>
-							<div class="popover-content">{{ __("You need to create these first: " + item.incomplete_dependencies.join(", ")) }}</div>
-						</div>
-
-					</div>
-
-					<div v-else>
-						<a class="indicator"
-							:class="item.onboard && !item.count ? 'orange' : 'grey'"
-							:href="item.route"
-						>
-							{{ item.label || __(item.name) }}
-						</a>
-						<span class="open-notification global hide"
-							@click="item.doctype || item.name ? frappe.ui.notifications.show_open_count_list(item.doctype || item.name) : false"
-							:data-doctype="item.doctype || item.name"></span>
-					</div>
-
-				</div>
+				</module-link-item>
 			</div>
 		</div>
 
@@ -50,7 +22,12 @@
 </template>
 
 <script>
+import ModuleLinkItem from "./ModuleLinkItem.vue";
+
 export default {
+	components: {
+		ModuleLinkItem
+	},
 	props: ['module_name', 'sections'],
 	updated() {
 		frappe.app.update_notification_count_in_modules();
@@ -68,11 +45,6 @@ export default {
 .section-box {
 	padding: 5px 20px;
 	border-radius: 4px;
-
-	.link-item {
-		position: relative;
-		margin: 10px 0px;
-	}
 }
 
 .skeleton-section-box {
@@ -85,18 +57,4 @@ export default {
 	margin-bottom: 15px;
 }
 
-a:hover, a:focus {
-	text-decoration: underline;
-}
-
-// Overriding indicator styles
-.indicator {
-	font-weight: inherit;
-    color: inherit;
-}
-
-.disabled {
-	color: blue;
-}
-
 </style>

frappe/public/js/frappe/views/components/ModuleLinkItem.vue

@@ -0,0 +1,78 @@
+<template>
+    <div class="link-item">
+        <div v-if="dependencies && incomplete_dependencies"
+            @mouseover="hover = true" @mouseleave="hover = false"
+            class="disabled-link indicator grey"
+        >
+            <span class="text-muted">{{ label || __(name) }}</span>
+
+            <div v-show="hover"
+                class="popover fade top in" role="tooltip"
+            >
+
+                <div class="arrow"></div>
+                <h3 class="popover-title" style="display: none;"></h3>
+                <div class="popover-content">
+                    <div class="small text-muted">{{ __("You need to create these first: ") }}</div>
+                    <div>{{ __(incomplete_dependencies.join(", ")) }}</div>
+                </div>
+            </div>
+
+        </div>
+
+        <div v-else>
+            <a class="indicator"
+                :class="onboard && !count ? 'orange' : 'grey'"
+                :href="route"
+            >
+                {{ label || __(name) }}
+            </a>
+            <span class="open-notification global hide"
+                @click="doctype || name ? frappe.ui.notifications.show_open_count_list(doctype || name) : false"
+                :data-doctype="doctype || name"></span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: ['label', 'name', 'dependencies', 'incomplete_dependencies', 'onboard', 'count', 'route', 'doctype'],
+    data() {
+        return {
+            hover: false
+        }
+    },
+}
+</script>
+
+
+<style lang="less" scoped>
+.link-item {
+		position: relative;
+		margin: 10px 0px;
+	}
+
+a:hover, a:focus {
+	text-decoration: underline;
+}
+
+// Overriding indicator styles
+.indicator {
+	font-weight: inherit;
+    color: inherit;
+}
+
+.disabled-link > span {
+    margin-left: 4px;
+}
+
+.popover {
+    display: block;
+    top: -60px;
+    max-width: 220px;
+}
+
+.popover.top > .arrow {
+    left: 20%;
+}
+</style>