* Etemplate: Add link icon overlay to link list

EGroupware · Dec 6, 2021 · 5b7706c · 5b7706c
1 parent de2c406
commit 5b7706c
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 62 deletions.
diff --git a/api/js/etemplate/et2_widget_link.js b/api/js/etemplate/et2_widget_link.js
diff --git a/api/js/etemplate/et2_widget_link.ts b/api/js/etemplate/et2_widget_link.ts
@@ -2074,7 +2074,8 @@ export class et2_link_list extends et2_link_string
 					download_url:_link_data.download_url,
 					name:_link_data.title,
 					mime:_link_data.type,
-					path:_link_data.icon
+					path:_link_data.icon,
+					mode: _link_data.mode
 				});
 				icon.append(vfs_widget.getDOMNode());
 			}

diff --git a/api/src/Etemplate/Widget/Link.php b/api/src/Etemplate/Widget/Link.php
@@ -198,12 +198,18 @@ public static function ajax_link_list($value)
 				$link['help'] = lang('Delete this file');
 				$link['title'] = Api\Vfs::decodePath($link['title']);
 				$link['icon'] = Api\Link::vfs_path($link['app2'],$link['id2'],$link['id'],true);
+
 				$link['download_url'] = Api\Vfs::download_url($link['icon']);
 				// Make links to directories load in filemanager
 				if($link['type'] == Api\Vfs::DIR_MIME_TYPE)
 				{
 					$link['target'] = 'filemanager';
 				}
+				else
+				{
+					$stat = Api\Vfs::lstat($link['icon']);
+					$link['mode'] = $stat['mode'];
+				}
 			}
 			else
 			{

diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
@@ -1034,6 +1034,7 @@ ul.et2_link_string {
   -ms-user-select: none;
   user-select: none;
   white-space: normal;
+    margin-bottom:2px;
 }
 .et2_link_list tr {
   cursor: pointer;
@@ -2713,25 +2714,36 @@ span.et2_checkbox_slideSwitch.switchOn > span.slideSwitch_container a {
 	float: left;
 }
 .et2_toolbar_more span.et2_checkbox_slideSwitch > input {
-	display: none;
+    display: none;
 }
 
 .et2_radiobox {
-	margin-right: 10px;
+    margin-right: 10px;
 }
+
 .et2_radiobox[disabled] {
     opacity: 0.5;
 }
+
+.overlayContainer {
+    position: absolute;
+    right: -2px;
+    bottom: -2px;
+    vertical-align: bottom;
+    text-align: right;
+}
+
 /**
  * Do not wrap content of a single widget incl. a label or children of a hbox.
  * Taking into eg. select-account widget rendered as ul and prefixed with a label
  * and maintaining some space between widgets.
  */
-.et2_nowrap{
-	white-space: nowrap;
+.et2_nowrap {
+    white-space: nowrap;
 }
-ul.et2_nowrap, div.et2_nowrap{
-	display: inline-block;
+
+ul.et2_nowrap, div.et2_nowrap {
+    display: inline-block;
 }
 .et2_nowrap > *{
 	padding-left: 5px;

diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
@@ -4173,36 +4173,45 @@ td.message span.message {
  * @version $Id: layout_table.less 3089 2014-06-11 14:02:57Z pixelegg $
  */
 /*z.b. Dateimanager overlay*/
-.egwGridView_grid span.iconOverlayContainer {
-  margin: 2px 5px 2px 2px;
-  position: relative;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  user-select: none;
-  overflow: visible;
-  display: inline-block;
+span.iconOverlayContainer {
+    margin: 2px 5px 2px 2px;
+    position: relative;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    user-select: none;
+    overflow: visible;
+    display: inline-block;
 }
-.egwGridView_grid span.overlayContainer {
-  position: absolute;
-  right: -2px;
-  bottom: -2px;
-  vertical-align: bottom;
-  text-align: right;
+
+span.overlayContainer {
+    position: absolute;
+    right: -2px;
+    bottom: -2px;
+    vertical-align: bottom;
+    text-align: right;
 }
-.egwGridView_grid span.iconContainer {
-  display: inline-block;
-  padding: 0;
-  margin: 0;
-  text-align: center;
+
+span.iconContainer {
+    display: inline-block;
+    padding: 0;
+    margin: 0;
+    text-align: center;
 }
-.egwGridView_grid span.overlayContainer img.overlay {
-  position: relative;
-  top: 1px;
-  margin: 0;
-  padding: 0;
-  height: 9px;
-  width: 11px;
+
+span.overlayContainer img.overlay {
+    position: relative;
+    top: 1px;
+    margin: 0;
+    padding: 0;
+    height: 9px;
+    width: 11px;
+}
+
+.et2_link_list span.overlayContainer img.overlay {
+    height: 9px !important;
+    width: 9px !important;
 }
+
 /**
  * EGroupware: Stylite Pixelegg template
  *

diff --git a/pixelegg/less/layout_overlay.less b/pixelegg/less/layout_overlay.less
@@ -15,39 +15,43 @@
 //##############################################################################################################
 
 
- /*z.b. Dateimanager overlay*/
+/*z.b. Dateimanager overlay*/
 
-.egwGridView_grid span.iconOverlayContainer {
-	margin: 2px 5px 2px 2px;
-	position: relative;
-	-moz-user-select: none;
-	-khtml-user-select: none;
-	user-select: none;
-	overflow: visible;
-	display: inline-block;
+span.iconOverlayContainer {
+  margin: 2px 5px 2px 2px;
+  position: relative;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  user-select: none;
+  overflow: visible;
+  display: inline-block;
 }
 
-.egwGridView_grid span.overlayContainer {
-	position: absolute;
-	right: -2px;
-	bottom: -2px;
-	vertical-align: bottom;
-	text-align: right;
+span.overlayContainer {
+  position: absolute;
+  right: -2px;
+  bottom: -2px;
+  vertical-align: bottom;
+  text-align: right;
 }
 
-.egwGridView_grid span.iconContainer {
-	display: inline-block;
-	padding: 0;
-	margin: 0;
-	text-align: center;
+span.iconContainer {
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+  text-align: center;
 }
 
-.egwGridView_grid span.overlayContainer img.overlay {
-	position: relative;
-	top: 1px;
-	margin: 0;
-	padding: 0;
-        height: 9px;
-        width: 11px;
-
+span.overlayContainer img.overlay {
+  position: relative;
+  top: 1px;
+  margin: 0;
+  padding: 0;
+  height: 9px;
+  width: 11px;
 }
+
+.et2_link_list span.overlayContainer img.overlay {
+  height: 9px !important;
+  width: 9px !important;
+}