fix tools personalize - refs #2681

assets/css/scss/_base.scss

@@ -447,13 +447,13 @@ footer {
         background-color: #def5ff;
         img{
           transition: transform .2s ease-in;
+          padding-top: 10px;
           &:hover{
             transform: scale(1.15);
           }
         }
         a{
           display: block;
-          padding-top: 10px;
           overflow: hidden;
         }
       }
@@ -463,6 +463,10 @@ footer {
         left: 0;
         width: 100%;
         z-index: 999;
+        .name{
+          padding-top: 5px;
+          padding-bottom: 5px;
+        }
       }
     }
     @include landscape($breakpoint-sm) {

main/course_info/tools.php

@@ -22,6 +22,7 @@ $action = isset($_GET['action']) ? $_GET['action'] : '';
 $id = isset($_GET['id']) ? intval($_GET['id']) : '';
 
 $toolName = get_lang('CustomizeIcons');
+$tpl = new Template($toolName);
 
 switch ($action) {
     case 'delete_icon':
@@ -117,49 +118,51 @@ switch ($action) {
             api_get_course_int_id(),
             api_get_session_id()
         );
-        $iconsTools = '<div id="custom-icons">';
-        $iconsTools .= Display::page_header(get_lang('CustomizeIcons'), null, 'h4');
-        $iconsTools .= '<div class="row">';
-        foreach ($toolList as $tool) {
-            $tool['name'] = Security::remove_XSS(stripslashes($tool['name']));
+        $list = [];
+        $tmp = [];
+        foreach ($toolList as $tool){
+            $tmp['id'] = $tool['id'];
+
+            $tmp['name'] = Security::remove_XSS(stripslashes($tool['name']));
             $toolIconName = 'Tool'.api_underscore_to_camel_case($tool['name']);
             $toolIconName = isset($$toolIconName) ? get_lang($toolIconName) : $tool['name'];
 
-            $iconsTools .= '<div class="col-md-2">';
-            $iconsTools .= '<div class="items-tools">';
+            $tmp['name'] = $toolIconName;
+            $tmp['link'] = $tool['link'];
 
             if (!empty($tool['custom_icon'])) {
                 $image = CourseHome::getCustomWebIconPath().$tool['custom_icon'];
-                $icon = Display::img($image, $toolIconName);
+                $icon = Display::img($image, $tool['name']);
             } else {
-                $image = (substr($tool['image'], 0, strpos($tool['image'], '.'))).'.png';
+                $image = 'tool_'.(substr($tool['image'], 0, strpos($tool['image'], '.'))).'.png';
                 $icon = Display::return_icon(
                     $image,
-                    $toolIconName,
+                    null,
                     ['id' => 'tool_'.$tool['id']],
                     ICON_SIZE_BIG,
-                    false
+                    false,
+                    true
                 );
             }
+            $tmp['image'] = $icon;
+            $tmp['visibility'] = $tool['visibility'];
 
             $delete = (!empty($tool['custom_icon'])) ? "<a class=\"btn btn-default\" onclick=\"javascript:
                 if(!confirm('".addslashes(api_htmlentities(get_lang('ConfirmYourChoice'), ENT_QUOTES, $charset)).
                 "')) return false;\" href=\"".api_get_self().'?action=delete_icon&id='.$tool['iid'].'&'.api_get_cidreq()."\">
-            <em class=\"fa fa-trash-o\"></em></a>" : "";
-            $edit = '<a class="btn btn-default" href="'.api_get_self().'?action=edit_icon&id='.$tool['iid'].'&'.api_get_cidreq().'"><em class="fa fa-pencil"></em></a>';
-
-            $iconsTools .= '<div class="icon-tools">'.$icon.'</div>';
-            $iconsTools .= '<div class="name-tools">'.$toolIconName.'</div>';
-            $iconsTools .= '<div class="toolbar">'.$edit.$delete.'</div>';
-            $iconsTools .= '</div>';
-            $iconsTools .= '</div>';
+            <i class=\"fas fa-trash-alt\"></i></a>" : "";
+            $edit = '<a class="btn btn-outline-secondary btn-sm" href="'.api_get_self().'?action=edit_icon&id='.$tool['iid'].'&'.api_get_cidreq().'"><i class="fas fa-pencil-alt"></i></a>';
+
+            $tmp['action'] = $edit.$delete;
+
+            $list[] = $tmp;
         }
-        $iconsTools .= '</div>';
-        $iconsTools .= '</div>';
-        $content = $iconsTools;
+        $tpl->assign('tools', $list);
+        $layout = $tpl->get_template("course_info/tools.html.twig");
+        $content = $tpl->fetch($layout);
+
         break;
 }
 
-$tpl = new Template($toolName);
 $tpl->assign('content', $content);
 $tpl->display_one_col_template();

main/template/default/course_info/tools.html.twig

@@ -0,0 +1,26 @@
+{% autoescape false %}
+<div class="card">
+    <div class="card-body">
+        <h2>{{ "CustomizeIcons" | get_lang }}</h2>
+        <div class="row">
+            {% for tool in tools %}
+            <div class="col-6 col-md-2">
+                <div class="tools mt-3 mb-3 p-2">
+                    <div class="big_icon">
+                        <img src="{{ tool.image }}" alt="{{ tool.name }}" title="{{ tool.name }}"/>
+                    </div>
+                    <div class="content">
+                        <div class="name">
+                            {{ tool.name }}
+                        </div>
+                        <div class="tool-btn">
+                            {{ tool.action }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+</div>
+{% endautoescape %}