From 05fa313e59b30dadde8cbcf87ae9ea39cb4f61ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Mon, 7 Mar 2022 09:37:18 +0100 Subject: [PATCH] notice: allow for optional icon setting #212 --- .../content/shortcodes/attachments.en.md | 3 +- exampleSite/content/shortcodes/notice.en.md | 9 +++-- layouts/shortcodes/attachments.html | 7 +++- layouts/shortcodes/notice.html | 10 ++++- static/css/theme.css | 38 +------------------ 5 files changed, 23 insertions(+), 44 deletions(-) diff --git a/exampleSite/content/shortcodes/attachments.en.md b/exampleSite/content/shortcodes/attachments.en.md index 9cb0ac0a5f..82e544add7 100644 --- a/exampleSite/content/shortcodes/attachments.en.md +++ b/exampleSite/content/shortcodes/attachments.en.md @@ -37,7 +37,8 @@ That's all! | Parameter | Default | Description | |:--|:--|:--| -| title | "Attachments" | List's title | +| title | "Attachments" | List's title | +| icon | "paperclip" | Sets the icon near the title; if you want no icon at all, you have to set this parameter to `" "` (a non empty string filled with spaces) | | sort | "asc" | Sorting the output in `asc`ending or `desc`ending order | | style | "" | Choose between `orange`, `grey`, `blue` and `green` for nice style | | pattern | ".*" | A regular expressions, used to filter the attachments by file name.

The **pattern** parameter value must be [regular expressions](https://en.wikipedia.org/wiki/Regular_expression). diff --git a/exampleSite/content/shortcodes/notice.en.md b/exampleSite/content/shortcodes/notice.en.md index 9d15859f4d..c69d424598 100644 --- a/exampleSite/content/shortcodes/notice.en.md +++ b/exampleSite/content/shortcodes/notice.en.md @@ -8,7 +8,7 @@ The notice shortcode shows four types of disclaimers to help you structure your ## Usage ````go -{{%/* notice ( note | info | tip | warning ) [ ] */%}} +{{%/* notice ( note | info | tip | warning ) [ [ ] ] */%}} Some markup {{%/* /notice */%}} ```` @@ -17,6 +17,7 @@ The first parameter is required and indicates the type of notice. The second parameter is optional. If provided, it will be used as the title of the notice. If not provided, then the type of notice will be used as the title. For example, the title of a warning notice will be "Warning". +The third parameter is optional. If provided, it will set the icon of near the title. For the standard types of notices, this is automatically determined but can be overridden with this parameter. If you want no icon at all, you have to set this parameter to `" "` (a non empty string filled with spaces). ## Examples ### Note @@ -195,17 +196,17 @@ You can add: ```` {{% /expand %}} -### Notice with custom title and default color +### Notice with default color, custom title and icon You can customize the title of the notice by passing it as a second parameter. -{{% notice default "Pay Attention to this Note!" %}} +{{% notice default "Pay Attention to this Note!" "skull-crossbones" %}} The title is now the parameter that was provided. {{% /notice %}} {{% expand "Show markup" %}} ````go -{{%/* notice default "Pay Attention to this Note!" */%}} +{{%/* notice default "Pay Attention to this Note!" "skull-crossbones" */%}} The title is now the parameter that was provided. {{%/* /notice */%}} ```` diff --git a/layouts/shortcodes/attachments.html b/layouts/shortcodes/attachments.html index 471bc78170..3aea87f682 100644 --- a/layouts/shortcodes/attachments.html +++ b/layouts/shortcodes/attachments.html @@ -2,8 +2,13 @@ {{- $style := .Get "style" | default "transparent" }} {{- $title := .Get "title" | default ("Attachments-label" | T) }} {{- $sort := .Get "sort" | default "asc" }} +{{- $icon := .Get "icon" | default "" }} +{{- if and (not $icon) (eq (len $icon) 0) }} + {{- $icon = "paperclip" }} +{{- end }} +{{- $icon = trim $icon " " }}
-
{{ $title }}
+
{{ if $icon }} {{ end }}{{ $title }}
    {{- $filesName := "files" }} {{- if ne .Page.File.BaseFileName "index" }} diff --git a/layouts/shortcodes/notice.html b/layouts/shortcodes/notice.html index 48c7ef6ce5..b268acc9c4 100644 --- a/layouts/shortcodes/notice.html +++ b/layouts/shortcodes/notice.html @@ -1,8 +1,16 @@ {{- $_hugo_config := `{ "version": 1 }` }} {{- $style := .Get 0 }} {{- $title := .Get 1 | default ($style | T) }} +{{- $icon := .Get 2 }} +{{- if and (not $icon) (eq (len $icon) 0) }} + {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }} + {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }} + {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }} + {{- if eq $style "tip" }}{{ $icon = default "lightbulb " }}{{ end }} +{{- end }} +{{- $icon = trim $icon " " }}
    -
    {{ $title }}
    +
    {{ if $icon }} {{ end }}{{ $title }}
    {{ .Inner }}
    diff --git a/static/css/theme.css b/static/css/theme.css index ed66f23f10..338052dc60 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -486,13 +486,7 @@ div.box { div.box > .box-label { color: rgba( 255, 255, 255, 1 ); /* var(--BOX-CAPTION-color) */ font-weight: 500; - padding: .2rem 1rem; -} - -div.box > .box-label:first-child:before { - content: ""; - font-family: "Font Awesome 5 Free"; - font-weight: 900; + padding: .2rem .6rem; } div.box > .box-content { @@ -518,12 +512,6 @@ div.box.info { background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-INFO-color) */ } -div.box.info > .box-label:first-child:before { - content: "\f05a"; - margin-left: -.15rem; - margin-right: .35rem; -} - div.box.info > .box-content { color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-INFO-TEXT-color) */ } @@ -534,12 +522,6 @@ div.box.warning { background-color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-WARNING-color) */ } -div.box.warning > .box-label:first-child:before { - content: "\f071"; - margin-left: -.15rem; - margin-right: .35rem; -} - div.box.warning > .box-content { color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-WARNING-TEXT-color) */ } @@ -550,12 +532,6 @@ div.box.note { background-color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-NOTE-color) */ } -div.box.note > .box-label:first-child:before { - content: "\f06a"; - margin-left: -.15rem; - margin-right: .35rem; -} - div.box.note > .box-content { color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-NOTE-TEXT-color) */ } @@ -566,12 +542,6 @@ div.box.tip { background-color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-TIP-color) */ } -div.box.tip > .box-label:first-child:before { - content: "\f0eb"; - margin-left: -.15rem; - margin-right: .35rem; -} - div.box.tip > .box-content { color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-TIP-TEXT-color) */ } @@ -644,12 +614,6 @@ div.box.transparent > .box-content { /* attachments shortcode */ -div.attachments > .box-label:first-child:before { - content: "\f0c6"; - margin-left: -.35rem; - margin-right: .35rem; -} - div.attachments .box-content { display: block; margin: 0;