* [ADD] Closes #91. Added image thumbnail when images are uploaded. Thumbnail is shown in files list if available.

* [MOD] UI Tweaks * [MOD] Updated MDL version.
2026-03-04 23:54:08 +01:00 · 2015-08-05 02:14:25 +02:00
parent b2941a82ab
commit 733ba8ea3a
10 changed files with 144 additions and 70 deletions
--- a/inc/Files.class.php
+++ b/inc/Files.class.php
@@ -48,7 +48,8 @@ class Files
            . "accfile_type = :type,"
            . "accfile_size = :size,"
            . "accfile_content = :blobcontent,"
-            . "accfile_extension = :extension";
+            . "accfile_extension = :extension,"
+            . "accfile_thumb = :thumbnail";

        $data['accountId'] = $accountId;
        $data['name'] = $fileData['name'];
@@ -56,6 +57,7 @@ class Files
        $data['size'] = $fileData['size'];
        $data['blobcontent'] = $fileData['content'];
        $data['extension'] = $fileData['extension'];
+        $data['thumbnail'] = ImageUtil::createThumbnail($fileData['content'], $fileData['type']);

        if (DB::getQuery($query, __FUNCTION__, $data) === true) {
            $log = new Log(_('Subir Archivo'));
@@ -152,7 +154,8 @@ class Files
    {
        $query = "SELECT accfile_id,"
            . "accfile_name,"
-            . "accfile_size "
+            . "accfile_size, "
+            . "accfile_thumb "
            . "FROM accFiles "
            . "WHERE accfile_accountId = :id";

@@ -167,13 +170,14 @@ class Files
        }

        $files = array();
-        $fileNum = 0;

        foreach ($queryRes as $file) {
-            $files[$fileNum]['id'] = $file->accfile_id;
-            $files[$fileNum]['name'] = $file->accfile_name;
-            $files[$fileNum]['size'] = round($file->accfile_size / 1000, 2);
-            $fileNum++;
+            $files[] = array(
+                'id' => $file->accfile_id,
+                'name' => $file->accfile_name,
+                'size' => round($file->accfile_size / 1000, 2),
+                'thumb' => $file->accfile_thumb
+            );
        }

        return $files;
--- a/inc/ImageUtil.class.php
+++ b/inc/ImageUtil.class.php
@@ -64,7 +64,7 @@ class ImageUtil
        // Crear el texto
        imagettftext($im, 12, 0, 10, 20, $fgColor, $font, $text);

-        // Guardar la imagen
+        // Devolver la imagen
        ob_start();
        imagepng($im);
        $image = ob_get_contents();
@@ -74,4 +74,46 @@ class ImageUtil

        return base64_encode($image);
    }
+
+    /**
+     * Crear miniatura de una imagen
+     *
+     * @param $image string La imagen a redimensionar
+     * @return bool|string
+     */
+    public static function createThumbnail(&$image)
+    {
+        if(!function_exists('imagepng')
+            || !function_exists('imagecreatefromjpeg')
+            || !function_exists('imagecreatefrompng')
+        ){
+            return false;
+        }
+
+        $im = imagecreatefromstring($image);
+
+        $width = imagesx($im);
+        $height = imagesy($im);
+
+        // Calcular el tamaño de la miniatura
+        $new_width = 48;
+        $new_height = floor( $height * ( $new_width / $width ) );
+
+        // Crear nueva imagen
+        $imTmp = imagecreatetruecolor($new_width, $new_height );
+
+        // Redimensionar la imagen
+        imagecopyresized( $imTmp, $im, 0, 0, 0, 0, $new_width, $new_height, $width, $height );
+
+        // Devolver la imagen
+        ob_start();
+        imagepng($imTmp);
+        $thumbnail = ob_get_contents();
+        ob_end_clean();
+
+        imagedestroy($imTmp);
+        imagedestroy($im);
+
+        return base64_encode($thumbnail);
+    }
 }
--- a/inc/Upgrade.class.php
+++ b/inc/Upgrade.class.php
@@ -110,7 +110,9 @@ class Upgrade
                $queries[] = 'ALTER TABLE `accHistory` CHANGE COLUMN `accHistory_otherGroupEdit` `accHistory_otherGroupEdit` BIT NULL DEFAULT b\'0\';';
                $queries[] = 'ALTER TABLE `usrProfiles` ADD COLUMN `userProfile_profile` BLOB NOT NULL;';
                $queries[] = 'ALTER TABLE `usrData` ADD `user_preferences` BLOB NULL;';
-                $queries[] = 'CREATE TABLE `usrToGroups` (`usertogroup_id` int(10) unsigned NOT NULL AUTO_INCREMENT,`usertogroup_userId` int(10) unsigned NOT NULL,`usertogroup_groupId` int(10) unsigned NOT NULL,PRIMARY KEY (`usertogroup_id`), KEY `IDX_usertogroup_userId` (`usertogroup_userId`)) DEFAULT CHARACTER SET = utf8 COLLATE = utf8_general_ci;';
+                $queries[] = 'CREATE TABLE usrToGroups (usertogroup_id INT UNSIGNED PRIMARY KEY NOT NULL AUTO_INCREMENT,usertogroup_userId INT UNSIGNED NOT NULL,usertogroup_groupId INT UNSIGNED NOT NULL)';
+                $queries[] = 'CREATE INDEX IDX_accountId ON usrToGroups (usertogroup_userId)';
+                $queries[] = 'ALTER TABLE `accFiles` ADD `accFile_thumb` BLOB NULL;';
                break;
            default :
                $log->addDescription(_('No es necesario actualizar la Base de Datos.'));
--- a/inc/themes/classic/css/styles.css
+++ b/inc/themes/classic/css/styles.css
@@ -476,7 +476,7 @@ a:focus {

 #content .data #files-wrap {
    max-height: 100px;
-    width: 400px;
+    width: 95%;
    overflow-y: auto;
    border: 1px solid #DFDFDF;
    padding: 0.5em;
@@ -500,11 +500,21 @@ a:focus {
    color: #000;
 }

-#content .data #files-list li img {
-    float: right;
-    position: relative;
-    top: -5px;
-    vertical-align: middle;
+#content .data #files-list li div {
+    display: inline-block;
+}
+
+#content .data #files-list li div.files-item-info {
+    width: 55%;
+}
+
+#content .data #files-list li div.files-item-info img{
+    margin: 0 .5em;
+}
+
+#content .data #files-list li div.files-item-actions {
+    width: 40%;
+    text-align: right;
 }

 #content .data #dropzone {
--- a/inc/themes/classic/files.inc
+++ b/inc/themes/classic/files.inc
@@ -1,22 +1,28 @@
 <div id="files-wrap" class="round">
    <ul id="files-list">
-        <?php use SP\Html;
-
-        foreach ($files as $file): ?>
+        <?php foreach ($files as $file): ?>
            <li class="files-item round">
-                <span title="<?php echo $file['name'] ?>"> <?php echo Html::truncate($file['name'], 25); ?>
-                    (<?php echo $file['size']; ?> KB)</span>
-                <?php if ($deleteEnabled === 1): ?>
-                    <img src="imgs/delete.png" title="<?php echo _('Eliminar Archivo'); ?>" id="btnDelete"
-                         class="inputImg" alt="Delete"
-                         OnClick="delFile(<?php echo $file['id']; ?>, '<?php echo $sk; ?>', <?php echo $accountId; ?>);"/>
-                <?php endif; ?>
-                <img src="imgs/download.png" title="<?php echo _('Descargar Archivo'); ?>" id="btnDownload"
-                     class="inputImg" alt="download"
-                     OnClick="downFile(<?php echo $file['id']; ?>, '<?php echo $sk; ?>', 'download');"/>
-                <img src="imgs/view.png" title="<?php echo _('Ver Archivo'); ?>" id="btnView" class="inputImg"
-                     alt="View"
-                     OnClick="downFile(<?php echo $file['id']; ?>, '<?php echo $sk; ?>', 'view');"/>
+                <div class="files-item-info" title="<?php echo $file['name'] ?>">
+                    <?php echo SP\Html::truncate($file['name'], 35); ?> (<?php echo $file['size']; ?> KB)
+                    <?php if ($file['thumb']): ?>
+                        <img src="data:image/png;base64,<?php echo $file['thumb']; ?>"
+                             title="<?php echo $file['name']; ?>" alt="thumbnail"
+                             OnClick="downFile(<?php echo $file['id']; ?>, '<?php echo $sk; ?>', 'view');" />
+                    <?php endif; ?>
+                </div>
+                <div class="files-item-actions">
+                    <?php if ($deleteEnabled === 1): ?>
+                        <img src="imgs/delete.png" title="<?php echo _('Eliminar Archivo'); ?>" id="btnDelete"
+                             class="inputImg" alt="Delete"
+                             OnClick="delFile(<?php echo $file['id']; ?>, '<?php echo $sk; ?>', <?php echo $accountId; ?>);"/>
+                    <?php endif; ?>
+                    <img src="imgs/download.png" title="<?php echo _('Descargar Archivo'); ?>" id="btnDownload"
+                         class="inputImg" alt="download"
+                         OnClick="downFile(<?php echo $file['id']; ?>, '<?php echo $sk; ?>', 'download');"/>
+                    <img src="imgs/view.png" title="<?php echo _('Ver Archivo'); ?>" id="btnView" class="inputImg"
+                         alt="View"
+                         OnClick="downFile(<?php echo $file['id']; ?>, '<?php echo $sk; ?>', 'view');"/>
+                </div>
            </li>
        <?php endforeach; ?>
    </ul>
--- a/inc/themes/material-blue/account.inc
+++ b/inc/themes/material-blue/account.inc
@@ -154,11 +154,9 @@
                                    ?>
                                </select>
                                <br><br>
-                                <span><?php echo _('Hablitar edición'); ?></span>
-
                                <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="ueditenabled">
                                  <input type="checkbox" id="ueditenabled" class="mdl-switch__input" <?php echo $chkUserEdit; ?>/>
-                                  <span class="mdl-switch__label"></span>
+                                  <span class="mdl-switch__label"><?php echo _('Hablitar edición'); ?></span>
                                </label>

                            </fieldset>
@@ -188,11 +186,9 @@
                                    ?>
                                </select>
                                <br><br>
-                                <span><?php echo _('Hablitar edición'); ?></span>
-
                                <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="geditenabled">
                                  <input type="checkbox" id="geditenabled" class="mdl-switch__input" <?php echo $chkGroupEdit; ?>/>
-                                  <span class="mdl-switch__label"></span>
+                                  <span class="mdl-switch__label"><?php echo _('Hablitar edición'); ?></span>
                                </label

                            </fieldset>
@@ -243,9 +239,9 @@
                        <input type="file" id="inFile" name="inFile"/>
                    </form>
                    <div id="dropzone" class="round"
-                         data-files-ext="<?php echo $filesAllowedExts; ?>"
-                         title="<?php echo _('Soltar archivos aquí (max. 5) o click para seleccionar') . '<br><br>' . _('Tamaño máximo de archivo') . ' ' . $maxFileSize . ' MB'; ?>">
-                        <img src="imgs/upload.png" alt="upload" class="opacity50"/>
+                        data-files-ext="<?php echo $filesAllowedExts; ?>"
+                        title="<?php echo _('Soltar archivos aquí (max. 5) o click para seleccionar') . '<br><br>' . _('Tamaño máximo de archivo') . ' ' . $maxFileSize . ' MB'; ?>">
+                        <i class="material-icons md-60 fg-green80">cloud_upload</i>
                    </div>
                    <script> dropFile(<?php echo $accountId; ?>, '<?php echo $sk; ?>', <?php echo $maxFileSize; ?>); </script>
                <?php endif; ?>
--- a/inc/themes/material-blue/css/material.min.css
+++ b/inc/themes/material-blue/css/material.min.css
--- a/inc/themes/material-blue/css/styles.css
+++ b/inc/themes/material-blue/css/styles.css
@@ -418,10 +418,11 @@ a:hover, a:active, a:focus {

 #content .data #files-wrap {
    max-height: 100px;
-    width: 400px;
+    width: 95%;
    overflow-y: auto;
    border: 1px solid #DFDFDF;
    padding: 0.5em;
+    margin: 1em 0;
 }

 #content .data #files-list {
@@ -432,7 +433,7 @@ a:hover, a:active, a:focus {

 #content .data #files-list li {
    background: #f2f2f2;
-    padding: 1em;
+    padding: .5em;
    font-size: 1em;
    margin-bottom: 5px;
 }
@@ -442,11 +443,21 @@ a:hover, a:active, a:focus {
    color: #000;
 }

-#content .data #files-list li img {
-    float: right;
-    position: relative;
-    top: -5px;
-    vertical-align: middle;
+#content .data #files-list li div {
+    display: inline-block;
+}
+
+#content .data #files-list li div.files-item-info {
+    width: 55%;
+}
+
+#content .data #files-list li div.files-item-info img{
+    margin: 0 .5em;
+}
+
+#content .data #files-list li div.files-item-actions {
+    width: 40%;
+    text-align: right;
 }

 #content .data #dropzone {
--- a/inc/themes/material-blue/files.inc
+++ b/inc/themes/material-blue/files.inc
@@ -1,22 +1,26 @@
 <div id="files-wrap" class="round">
    <ul id="files-list">
-        <?php use SP\Html;
-
-        foreach ($files as $file): ?>
+        <?php foreach ($files as $file): ?>
            <li class="files-item round">
-                <span title="<?php echo $file['name'] ?>"> <?php echo Html::truncate($file['name'], 25); ?>
-                    (<?php echo $file['size']; ?> KB)</span>
-                <?php if ($deleteEnabled === 1): ?>
-                    <img src="imgs/delete.png" title="<?php echo _('Eliminar Archivo'); ?>" id="btnDelete"
-                         class="inputImg" alt="Delete"
-                         OnClick="delFile(<?php echo $file['id']; ?>, '<?php echo $sk; ?>', <?php echo $accountId; ?>);"/>
-                <?php endif; ?>
-                <img src="imgs/download.png" title="<?php echo _('Descargar Archivo'); ?>" id="btnDownload"
-                     class="inputImg" alt="download"
-                     OnClick="downFile(<?php echo $file['id']; ?>, '<?php echo $sk; ?>', 'download');"/>
-                <img src="imgs/view.png" title="<?php echo _('Ver Archivo'); ?>" id="btnView" class="inputImg"
-                     alt="View"
-                     OnClick="downFile(<?php echo $file['id']; ?>, '<?php echo $sk; ?>', 'view');"/>
+                <div class="files-item-info" title="<?php echo $file['name'] ?>">
+                    <?php echo SP\Html::truncate($file['name'], 35); ?> (<?php echo $file['size']; ?> KB)
+                    <?php if ($file['thumb']): ?>
+                        <img src="data:image/png;base64,<?php echo $file['thumb']; ?>"
+                             title="<?php echo $file['name']; ?>" alt="thumbnail"
+                             OnClick="downFile(<?php echo $file['id']; ?>, '<?php echo $sk; ?>', 'view');" />
+                    <?php endif; ?>
+                </div>
+                <div class="files-item-actions">
+                    <?php if ($deleteEnabled === 1): ?>
+                        <i class="material-icons fg-red80"
+                           title="<?php echo _('Eliminar Archivo'); ?>"
+                           OnClick="delFile(<?php echo $file['id']; ?>, '<?php echo $sk; ?>', <?php echo $accountId; ?>);">delete</i>
+                    <?php endif; ?>
+                    <i class="material-icons fg-blue80" title="<?php echo _('Descargar Archivo'); ?>"
+                       OnClick="downFile(<?php echo $file['id']; ?>, '<?php echo $sk; ?>', 'download');">file_download</i>
+                    <i class="material-icons fg-blue80" title="<?php echo _('Ver Archivo'); ?>"
+                       OnClick="downFile(<?php echo $file['id']; ?>, '<?php echo $sk; ?>', 'view');">visibility</i>
+                </div>
            </li>
        <?php endforeach; ?>
    </ul>
--- a/inc/themes/material-blue/js/material.min.js
+++ b/inc/themes/material-blue/js/material.min.js