chutier icon display promotion message if not loged in

sites/all/modules/figli/edlp_studio/edlp_studio.module

@@ -61,42 +61,48 @@ function edlp_studio_node_view(array &$build, \Drupal\Core\Entity\EntityInterfac
     // dpm($entity->id());
     $user = \Drupal::currentUser();
     // dpm($user);
+    // check if user loged in ? no -> popup message : yes -> links
     if($user->id() == 0){
-    //   // TODO: check if user loged in ? yes -> links : no : popup message
-    //   $action = 'add';
-    }
-    // else{
-    //   // TODO: check if node already in chutier ? no -> add link : yes -> remove link
-    //   // use getUserChutiersContents() from \Drupal\edlp_studio\ChutierInterface
-    //   $contents = Chutier::getUserChutiersContents($user->id());
-    //   dpm($contents);
-    //   if(array_search($entity->id(), $contents) === false){
-    //     $action = 'add';
-    //   }else{
-    //     $action = 'remove';
-    //   }
-    // }
-    // $args = array(
-    //   'action'=>$action,
-    //   'id'=>$entity->id()
-    // );
-    // $url = Url::fromRoute('edlp_studio.chutier_controller_ajax_add_content', $args, array(
-    //   'attributes' => array(
-    //     'class' => ['chutier-link','chutier-ajax-link'],
-    //     'action' => $action,
-    //     'target_id' => $entity->id(),
-    //   )
-    // ));
-    $url = Chutier::getActionsUrl($entity->id(), $user->id());
-    $build['chutier_actions'] = array(
-      '#title' => t("Chutier."),
-      '#type' => 'link',
-      '#url' => $url,
-      '#options'=>array(
-        'attributes' => array(
-          'data-drupal-link-system-path' => $url->getInternalPath()
+      $build['chutier_actions'] = array(
+        '#type' => 'container',
+        '#attributes' => array(
+          'class' => array('chutier-icon', 'not-logedin')
+        ),
+        "popup"=>array(
+          '#type'=>'container',
+          '#attributes' => array(
+            'class' => array('popup')
+          ),
+          "content"=>array(
+            '#type'=>'container',
+            '#attributes' => array(
+              'class' => array('inner')
+            ),
+            'text'=>array(
+              '#prefix'=>'<p>',
+              '#markup'=>t('Le Studio rassemble vos documents favoris.Il permet de les sauvgarder et de les agencer en compositions.'),
+              '#suffix'=>'</p>'
+            ),
+            'links'=>array(
+              '#prefix'=>'<p>',
+              '#markup'=>'todo: login link',
+              '#suffix'=>'</p>'
+            )
+          )
+        )
+      );
+    }else{
+      // TODO: check if user has permission 'use chutier'
+      $url = Chutier::getActionsUrl($entity->id(), $user->id());
+      $build['chutier_actions'] = array(
+        '#type' => 'link',
+        '#url' => $url,
+        '#options'=>array(
+          'attributes' => array(
+            'data-drupal-link-system-path' => $url->getInternalPath()
+          )
         )
-      )
-    );
+      );
+    }
   }
 }

sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css

@@ -1459,6 +1459,7 @@ body.ajax-loading main[role="main"]:before {
 
 .chutier-icon {
   display: block;
+  position: relative;
   width: 1em;
   height: 1em;
   overflow: hidden;
@@ -1473,6 +1474,27 @@ body.ajax-loading main[role="main"]:before {
     background-image: url(../img/favori-on.svg); }
   .chutier-icon.ajax-loading {
     opacity: 0.2; }
+  .chutier-icon.not-logedin {
+    overflow: visible; }
+  .chutier-icon .popup {
+    z-index: 10;
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 300px;
+    height: auto;
+    min-height: 100px; }
+    .chutier-icon .popup .inner {
+      background-color: rgba(255, 255, 255, 0.9);
+      border: 1px solid red;
+      text-indent: 0;
+      padding: 0.5em;
+      margin: 1.2em 0 0 1.2em; }
+      .chutier-icon .popup .inner p {
+        margin: 0; }
+  .chutier-icon:hover .popup {
+    display: block; }
 
 body.path-agenda main .col > .wrapper {
   height: 100%; }

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -387,8 +387,10 @@ main[role="main"]{
  // \__ \  _| || / _` | / _ \
  // |___/\__|\_,_\__,_|_\___/
 .chutier-icon{
+  $s:1em;
   display: block;
-  width:1em;height:1em;
+  position: relative;
+  width:$s;height:$s;
   overflow: hidden;
   text-indent: 50em;
   // background-color: red;
@@ -403,6 +405,29 @@ main[role="main"]{
   &.ajax-loading{
     opacity: 0.2;
   }
+  &.not-logedin{
+    overflow: visible;
+  }
+  .popup{
+    z-index: 10;
+    display:none;
+    position: absolute;
+    top:0; left:0;
+    width:300px; height:auto; min-height: 100px;
+    .inner{
+      background-color: rgba(255,255,255,0.9);
+      border: 1px solid red;
+      text-indent: 0;
+      padding: 0.5em;
+      margin:$s*1.2 0 0 $s*1.2;
+      p{margin: 0;}
+    }
+  }
+  &:hover{
+    .popup{
+      display: block;
+    }
+  }
 }