From 57e231acedd61756e1c1dadf7c19a1a6ff60878e Mon Sep 17 00:00:00 2001 From: nathan <nathangray.bsc+github@gmail.com> Date: Tue, 5 Apr 2022 09:15:08 -0600 Subject: [PATCH] New Et2ButtonImage that shows only image Also doesn't stretch like the others do. --- api/js/etemplate/Et2Button/Et2ButtonImage.ts | 34 ++++++++++++++++++++ api/js/etemplate/etemplate2.ts | 1 + 2 files changed, 35 insertions(+) create mode 100644 api/js/etemplate/Et2Button/Et2ButtonImage.ts diff --git a/api/js/etemplate/Et2Button/Et2ButtonImage.ts b/api/js/etemplate/Et2Button/Et2ButtonImage.ts new file mode 100644 index 0000000000..253746c815 --- /dev/null +++ b/api/js/etemplate/Et2Button/Et2ButtonImage.ts @@ -0,0 +1,34 @@ +/** + * EGroupware eTemplate2 - Image only button widget + * + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @package etemplate + * @subpackage api + * @link https://www.egroupware.org + * @author Nathan Gray + */ + + +import {Et2Button} from "./Et2Button"; +import {css} from "@lion/core"; + +export class Et2ButtonImage extends Et2Button +{ + + public static styles = [ + ...Et2Button.styles, + css` + :host { + /* Important needed to override boxes trying to stretch children */ + flex: 0 0 !important; + } + ::slotted[slot="label"] { + display: none; + } + ` + + ]; +} + +// @ts-ignore TypeScript is not recognizing that Et2Button is a LitElement +customElements.define("et2-button-image", Et2ButtonImage); \ No newline at end of file diff --git a/api/js/etemplate/etemplate2.ts b/api/js/etemplate/etemplate2.ts index 43393e93b8..f57ce40f3a 100644 --- a/api/js/etemplate/etemplate2.ts +++ b/api/js/etemplate/etemplate2.ts @@ -25,6 +25,7 @@ import '../jsapi/egw_json.js'; import {egwIsMobile} from "../egw_action/egw_action_common.js"; import './Et2Box/Et2Box'; import './Et2Button/Et2Button'; +import './Et2Button/Et2ButtonImage'; import './Et2Date/Et2Date'; import './Et2Date/Et2DateDuration'; import './Et2Date/Et2DateDurationReadonly';