Nicer "no subscriptions" view

This commit is contained in:
Philipp Heckel 2021-11-01 10:49:52 -04:00
parent fd1cfafdbf
commit 77ad3bd6ad
7 changed files with 379 additions and 19 deletions

View file

@ -16,7 +16,7 @@ data class Subscription(
@Entity @Entity
data class Notification( data class Notification(
@PrimaryKey val id: Long, // Internal ID, only used in Repository and activities @PrimaryKey val id: String,
@ColumnInfo(name = "subscriptionId") val subscriptionId: Long, @ColumnInfo(name = "subscriptionId") val subscriptionId: Long,
@ColumnInfo(name = "timestamp") val timestamp: Long, // Unix timestamp @ColumnInfo(name = "timestamp") val timestamp: Long, // Unix timestamp
@ColumnInfo(name = "message") val message: String @ColumnInfo(name = "message") val message: String

View file

@ -36,10 +36,11 @@ class MessagingService : FirebaseMessagingService() {
// Check if valid data, and send notification // Check if valid data, and send notification
val data = remoteMessage.data val data = remoteMessage.data
val id = data["id"]
val timestamp = data["time"]?.toLongOrNull() val timestamp = data["time"]?.toLongOrNull()
val topic = data["topic"] val topic = data["topic"]
val message = data["message"] val message = data["message"]
if (topic == null || message == null || timestamp == null) { if (id == null || topic == null || message == null || timestamp == null) {
Log.d(TAG, "Discarding unexpected message: from=${remoteMessage.from}, data=${data}") Log.d(TAG, "Discarding unexpected message: from=${remoteMessage.from}, data=${data}")
return return
} }
@ -53,7 +54,7 @@ class MessagingService : FirebaseMessagingService() {
repository.updateSubscription(newSubscription) repository.updateSubscription(newSubscription)
// Add notification // Add notification
val notification = Notification(id = Random.nextLong(), subscriptionId = subscription.id, timestamp = timestamp, message = message) val notification = Notification(id = id, subscriptionId = subscription.id, timestamp = timestamp, message = message)
repository.addNotification(notification) repository.addNotification(notification)
// Send notification // Send notification

View file

@ -39,7 +39,7 @@ class MainActivity : AppCompatActivity() {
} }
// Update main list based on viewModel (& its datasource/livedata) // Update main list based on viewModel (& its datasource/livedata)
val noEntriesText: View = findViewById(R.id.main_no_subscriptions_text) val noEntries: View = findViewById(R.id.main_no_subscriptions)
val adapter = SubscriptionsAdapter { subscription -> onSubscriptionItemClick(subscription) } val adapter = SubscriptionsAdapter { subscription -> onSubscriptionItemClick(subscription) }
val mainList: RecyclerView = findViewById(R.id.main_subscriptions_list) val mainList: RecyclerView = findViewById(R.id.main_subscriptions_list)
mainList.adapter = adapter mainList.adapter = adapter
@ -49,10 +49,10 @@ class MainActivity : AppCompatActivity() {
adapter.submitList(it as MutableList<Subscription>) adapter.submitList(it as MutableList<Subscription>)
if (it.isEmpty()) { if (it.isEmpty()) {
mainList.visibility = View.GONE mainList.visibility = View.GONE
noEntriesText.visibility = View.VISIBLE noEntries.visibility = View.VISIBLE
} else { } else {
mainList.visibility = View.VISIBLE mainList.visibility = View.VISIBLE
noEntriesText.visibility = View.GONE noEntries.visibility = View.GONE
} }
} }
} }
@ -118,6 +118,6 @@ class MainActivity : AppCompatActivity() {
const val EXTRA_SUBSCRIPTION_ID = "subscriptionId" const val EXTRA_SUBSCRIPTION_ID = "subscriptionId"
const val EXTRA_SUBSCRIPTION_BASE_URL = "subscriptionBaseUrl" const val EXTRA_SUBSCRIPTION_BASE_URL = "subscriptionBaseUrl"
const val EXTRA_SUBSCRIPTION_TOPIC = "subscriptionTopic" const val EXTRA_SUBSCRIPTION_TOPIC = "subscriptionTopic"
const val REQUEST_CODE_DELETE_SUBSCRIPTION = 1; const val REQUEST_CODE_DELETE_SUBSCRIPTION = 1
} }
} }

View file

@ -0,0 +1,4 @@
<vector android:height="48dp" android:viewportHeight="24"
android:viewportWidth="24" android:width="48dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#888888" android:pathData="M20,2L4,2c-1.1,0 -2,0.9 -2,2v18l4,-4h14c1.1,0 2,-0.9 2,-2L22,4c0,-1.1 -0.9,-2 -2,-2zM20,16L5.17,16L4,17.17L4,4h16v12zM7,9h2v2L7,11zM15,9h2v2h-2zM11,9h2v2h-2z"/>
</vector>

View file

@ -1,7 +1,7 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"> android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView <androidx.recyclerview.widget.RecyclerView
@ -10,19 +10,28 @@
android:layout_height="match_parent" android:layout_height="match_parent"
android:clickable="true" android:clickable="true"
android:focusable="true" android:focusable="true"
android:layout_marginTop="10dp"
android:background="?android:attr/selectableItemBackground" android:background="?android:attr/selectableItemBackground"
app:layoutManager="LinearLayoutManager" android:visibility="gone"/> app:layoutManager="LinearLayoutManager" android:visibility="gone"/>
<LinearLayout
<TextView android:orientation="vertical"
android:id="@+id/main_no_subscriptions_text" android:layout_width="match_parent"
android:text="@string/main_no_subscriptions_text" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent"
android:layout_width="wrap_content" app:layout_constraintEnd_toEndOf="parent"
android:layout_height="wrap_content" app:layout_constraintStart_toStartOf="parent" app:layout_constraintBottom_toTopOf="@+id/fab" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" android:id="@+id/main_no_subscriptions">
app:layout_constraintEnd_toEndOf="parent" android:textAppearance="@style/TextAppearance.AppCompat.Large" <ImageView
android:padding="50dp" app:layout_constraintBottom_toBottomOf="parent" android:gravity="center_horizontal" android:layout_width="match_parent"
android:textStyle="italic"/> android:layout_height="wrap_content" app:srcCompat="@drawable/ic_sms_black_48dp"
android:id="@+id/main_no_subscriptions_image"/>
<TextView
android:id="@+id/main_no_subscriptions_text"
android:text="@string/main_no_subscriptions_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="@style/TextAppearance.AppCompat.Medium"
android:padding="10dp" android:gravity="center_horizontal"
android:paddingStart="50dp" android:paddingEnd="50dp"/>
</LinearLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton <com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab" android:id="@+id/fab"

345
assets/launcher_full.svg Normal file
View file

@ -0,0 +1,345 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="50.270832mm"
height="50.270832mm"
viewBox="0 0 50.270832 50.270832"
version="1.1"
id="svg8"
inkscape:version="1.1.1 (3bf5ae0, 2021-09-20)"
sodipodi:docname="launcher_full.svg"
inkscape:export-filename="/home/pheckel/Code/ntfy-android/assets/launcher_fg.png"
inkscape:export-xdpi="258.69"
inkscape:export-ydpi="258.69"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs
id="defs2">
<linearGradient
inkscape:collect="always"
id="linearGradient28858">
<stop
style="stop-color:#3d9d89;stop-opacity:1;"
offset="0"
id="stop28854" />
<stop
style="stop-color:#6bc5b3;stop-opacity:1"
offset="1"
id="stop28856" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient26773">
<stop
style="stop-color:#000000;stop-opacity:1;"
offset="0"
id="stop26769" />
<stop
style="stop-color:#000000;stop-opacity:0;"
offset="1"
id="stop26771" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient13319">
<stop
style="stop-color:#d3d3d3;stop-opacity:1"
offset="0"
id="stop13315" />
<stop
style="stop-color:#feffff;stop-opacity:1"
offset="1"
id="stop13317" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient873">
<stop
style="stop-color:#4d4d4d;stop-opacity:1;"
offset="0"
id="stop869" />
<stop
style="stop-color:#656565;stop-opacity:0"
offset="1"
id="stop871" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient843">
<stop
style="stop-color:#000000;stop-opacity:1;"
offset="0"
id="stop839" />
<stop
style="stop-color:#434343;stop-opacity:0.88235295"
offset="1"
id="stop841" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient843"
id="linearGradient845"
x1="59.671928"
y1="101.946"
x2="87.224854"
y2="122.54991"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.302925,0,0,1.302925,-21.025152,-36.28416)" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient873"
id="linearGradient875"
x1="59.671928"
y1="101.946"
x2="87.091209"
y2="105.0985"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.3104386,0,0,1.302925,-21.473506,-36.28416)" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient13319"
id="linearGradient13321"
x1="51.147327"
y1="81.515579"
x2="101.41816"
y2="131.78641"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient26773"
id="linearGradient26775"
x1="24.930517"
y1="34.460789"
x2="180.95911"
y2="190.48938"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient28858"
id="linearGradient28860"
x1="71.579453"
y1="89.347107"
x2="94.328819"
y2="108.10192"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient843"
id="linearGradient2286"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.8927503,0,0,2.4405445,-59.201025,-68.337415)"
x1="59.671928"
y1="101.946"
x2="87.224854"
y2="122.54991" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient873"
id="linearGradient2288"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(2.3951181,0,0,2.1213386,-89.178287,-35.795655)"
x1="59.671928"
y1="101.946"
x2="87.091209"
y2="105.0985" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient28858"
id="linearGradient2290"
gradientUnits="userSpaceOnUse"
x1="71.579453"
y1="89.347107"
x2="94.328819"
y2="108.10192"
gradientTransform="translate(9.1579637,96.181942)" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient13319"
id="linearGradient2294"
gradientUnits="userSpaceOnUse"
x1="51.147327"
y1="81.515579"
x2="101.41816"
y2="131.78641"
gradientTransform="translate(4.4756818,98.905784)" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient28858"
id="linearGradient3019"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(-1.0684816,0,0,1,239.74297,62.587825)"
x1="71.579453"
y1="89.347107"
x2="94.328819"
y2="108.10192" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.85920445"
inkscape:cx="43.645025"
inkscape:cy="442.26959"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:measure-start="0,0"
inkscape:measure-end="0,0"
inkscape:snap-text-baseline="true"
inkscape:window-width="1863"
inkscape:window-height="1025"
inkscape:window-x="1977"
inkscape:window-y="27"
inkscape:window-maximized="1"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
showguides="true"
inkscape:guide-bbox="true"
inkscape:pagecheckerboard="0" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="background"
style="display:inline">
<path
style="opacity:1;fill:url(#linearGradient13321);fill-opacity:1;stroke-width:0.264583"
d="M 51.147327,81.515579 H 101.41816 V 131.78641 H 51.147327 Z"
id="rect283"
transform="translate(-51.147326,-81.51558)" />
</g>
<g
inkscape:groupmode="layer"
id="layer4"
inkscape:label="drop shadow"
style="display:inline">
<path
id="path25977"
style="opacity:0.274892;fill:url(#linearGradient26775);fill-opacity:1;stroke:none;stroke-width:0.999999px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 167.26758,32.443359 -11.3647,41.791513 0.85286,84.027598 L 21.072266,158.26172 52.830078,190 H 190 V 55.175781 Z"
transform="scale(0.26458333)"
sodipodi:nodetypes="cccccccc" />
</g>
<g
inkscape:label="foreground"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-51.147327,-81.515579)"
style="display:inline">
<rect
style="fill:url(#linearGradient845);fill-opacity:1;stroke:none;stroke-width:0.16339;stroke-opacity:1"
id="rect283-1"
width="35.899391"
height="26.845356"
x="56.722897"
y="96.543839" />
<g
aria-label="&gt;_"
style="font-style:normal;font-weight:normal;font-size:8.48274px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.212069"
id="text320"
transform="matrix(1.302925,0,0,1.302925,-20.839797,-37.163349)">
<path
d="m 62.57046,116.77004 v -1.31201 l 3.280018,-1.45904 q 0.158346,-0.0679 0.305381,-0.1018 0.158346,-0.0452 0.282761,-0.0679 0.135725,-0.0113 0.271449,-0.0226 v -0.0905 q -0.135724,-0.0113 -0.271449,-0.0452 -0.124415,-0.0226 -0.282761,-0.0566 -0.147035,-0.0452 -0.305381,-0.1131 l -3.280018,-1.45904 v -1.32332 l 5.067063,2.31863 v 1.4138 z"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:11.3104px;font-family:'JetBrains Mono';-inkscape-font-specification:'JetBrains Mono, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;stroke-width:0.212069"
id="path1011"
inkscape:connector-curvature="0" />
<path
d="m 69.17132,117.75404 h 5.428996 v 1.27808 H 69.17132 Z"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:11.3104px;font-family:'JetBrains Mono';-inkscape-font-specification:'JetBrains Mono, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;stroke-width:0.212069"
id="path1013"
inkscape:connector-curvature="0" />
</g>
<rect
style="fill:url(#linearGradient875);fill-opacity:1;stroke-width:0.0815418"
id="rect283-1-9"
width="36.106411"
height="6.6478906"
x="56.722897"
y="96.543839" />
<path
style="fill:url(#linearGradient28860);fill-opacity:1;stroke-width:1.203"
inkscape:connector-curvature="0"
d="M 93.687597,89.445767 H 73.874439 c -1.36217,0 -2.476659,1.051813 -2.476659,2.337352 v 21.036241 l 4.9533,-4.67471 h 17.336517 c 1.362173,0 2.476651,-1.05183 2.476651,-2.3374 V 91.783119 c 0,-1.285539 -1.114478,-2.337352 -2.476651,-2.337352 z M 80.066048,99.963882 H 77.58941 v -2.337346 h 2.476638 z m 4.953301,0 h -2.476662 v -2.337346 h 2.476662 z m 4.953276,0 H 87.49599 v -2.337346 h 2.476635 z"
id="path403" />
<path
style="display:inline;fill:url(#linearGradient2294);fill-opacity:1;stroke-width:0.264583"
d="m 55.623009,180.42136 h 50.270831 v 50.27083 H 55.623009 Z"
id="rect283-9" />
<rect
style="display:inline;fill:url(#linearGradient2286);fill-opacity:1;stroke:none;stroke-width:0.269524;stroke-opacity:1"
id="rect283-1-6"
width="52.150806"
height="50.284771"
x="53.743038"
y="180.46632" />
<g
aria-label="&gt;_"
style="font-style:normal;font-weight:normal;font-size:8.48274px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;display:inline;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.212069"
id="text320-0"
transform="matrix(1.676594,0,0,1.676594,-42.700045,17.390061)">
<path
d="m 62.57046,116.77004 v -1.31201 l 3.280018,-1.45904 q 0.158346,-0.0679 0.305381,-0.1018 0.158346,-0.0452 0.282761,-0.0679 0.135725,-0.0113 0.271449,-0.0226 v -0.0905 q -0.135724,-0.0113 -0.271449,-0.0452 -0.124415,-0.0226 -0.282761,-0.0566 -0.147035,-0.0452 -0.305381,-0.1131 l -3.280018,-1.45904 v -1.32332 l 5.067063,2.31863 v 1.4138 z"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:11.3104px;font-family:'JetBrains Mono';-inkscape-font-specification:'JetBrains Mono, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;stroke-width:0.212069"
id="path1011-6"
inkscape:connector-curvature="0" />
<path
d="m 69.17132,117.75404 h 5.428996 v 1.27808 H 69.17132 Z"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:11.3104px;font-family:'JetBrains Mono';-inkscape-font-specification:'JetBrains Mono, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;stroke-width:0.212069"
id="path1013-2"
inkscape:connector-curvature="0" />
</g>
<rect
style="display:inline;fill:url(#linearGradient2288);fill-opacity:1;stroke-width:0.140663"
id="rect283-1-9-6"
width="65.9925"
height="10.823667"
x="53.743038"
y="180.46632" />
<path
style="display:inline;fill:url(#linearGradient2290);fill-opacity:1;stroke-width:1.203"
inkscape:connector-curvature="0"
d="M 102.84555,185.62771 H 83.032398 c -1.36217,0 -2.47666,1.05181 -2.47666,2.33735 v 21.03624 l 4.9533,-4.67471 h 17.336512 c 1.36217,0 2.47665,-1.05183 2.47665,-2.3374 v -14.02413 c 0,-1.28554 -1.11448,-2.33735 -2.47665,-2.33735 z m -13.621542,10.51812 h -2.47664 v -2.33735 h 2.47664 z m 4.9533,0 h -2.47666 v -2.33735 h 2.47666 z m 4.953275,0 h -2.476635 v -2.33735 h 2.476635 z"
id="path403-1" />
<path
style="display:inline;fill:url(#linearGradient3019);fill-opacity:1;stroke-width:1.24351"
inkscape:connector-curvature="0"
d="m 139.63948,152.0336 h 21.17 c 1.45546,0 2.64627,1.05181 2.64627,2.33735 v 21.03624 l -5.29251,-4.67471 h -18.52376 c -1.45545,0 -2.64625,-1.05183 -2.64625,-2.3374 v -14.02413 c 0,-1.28554 1.1908,-2.33735 2.64625,-2.33735 z m 14.55438,10.51812 h 2.64625 v -2.33735 h -2.64625 z m -5.29251,0 h 2.64627 v -2.33735 h -2.64627 z m -5.29249,0 h 2.64625 v -2.33735 h -2.64625 z"
id="path403-1-2" />
<path
id="path18850-8"
style="display:inline;fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
d="m 26.22842,149.77465 v 10.93008 h -3.240629 v 75.33081 H 34.50285 v 34.12815 h 85.1023 V 237.8902 h 1.50792 v -60.82832 h -3.2489 v -27.28723 z m 29.247827,30.64671 H 105.89384 V 230.7511 H 55.476247 v -0.0139 H 77.690395 A 25.220409,25.220409 0 0 1 55.476247,206.97013 v -2.57866 a 25.220409,25.220409 0 0 1 25.171073,-23.90396 25.220409,25.220409 0 0 1 25.04188,22.2405 V 180.46632 H 55.476247 Z M 105.6892,208.55298 A 25.220409,25.220409 0 0 1 83.604763,230.73715 H 105.6892 Z" />
</g>
<g
inkscape:groupmode="layer"
id="layer3"
inkscape:label="round icon preview"
style="display:inline">
<path
id="path18850"
style="display:inline;fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
d="M 1e-6,-3e-6 V 50.27083 H 22.272026 A 25.220409,25.220409 0 0 1 0.008786,25.241867 25.220409,25.220409 0 0 1 25.228952,0.021184 25.220409,25.220409 0 0 1 50.270834,22.261687 V -3e-6 Z M 50.270834,28.086655 A 25.220409,25.220409 0 0 1 28.186394,50.27083 h 22.08444 z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12zM7 9h2v2H7zm8 0h2v2h-2zm-4 0h2v2h-2z"/></svg>

After

Width:  |  Height:  |  Size: 288 B