Zammad: संलग्न टेक्स्टफ़ाइल्स "रॉ" को तोड़ते हैं - सूची में अंतिम अनुलग्नक होने पर

हम भी बस इस पर ठोकर खा गए। मूल कारण टूटा हुआ आइकन प्रतीत होता है - यह <svg class="icon icon-file-text "><use xlink:href="assets/images/icons.svg#icon-file-text"></use></svg> प्रदर्शित करने की कोशिश करता है, लेकिन icons.svg वास्तव में icon-file-text । यह ब्राउज़र को खाली SVG प्रदर्शित करने का कारण बनता है, और खाली SVG का डिफ़ॉल्ट आकार स्पष्ट रूप से 300x150 px होता है:

https://svgwg.org/specs/integration/#svg -css-sizing

यदि किसी भी आकार की विशेषताएँ अनुपलब्ध हैं, तो अनुपलब्ध 'svg' तत्व की चौड़ाई को '300px' और अनुपलब्ध ऊँचाई को '150px' पर हल करें (CSS 2.1 की जगह तत्वों के आकार की गणना का उपयोग करें)।

यह देखना आसान है कि क्या आप ब्राउज़र के dev टूल में SVG में border: 1px solid; जोड़ते हैं:

इसके लिए खुदाई करने के लिए एक टन धन्यवाद @martinvonwittich ! @mrflix - क्या आप जाँच सकते हैं कि हमारा टेक्स्ट आइकन कहाँ गया? 🏖

मेरा तर्क है कि यह पहली जगह में कभी नहीं था: डी

[email protected] ~ (develop) % git grep 'icon-file-text' $(git rev-list --all -- public/assets/images/icons.svg) -- public/assets/images/icons.svg   
[email protected] ~ (develop) % 

एक अन्य आइकन के साथ तुलना:

[email protected] ~ (develop) % git grep 'icon-file-archive' $(git rev-list --all -- public/assets/images/icons.svg) -- public/assets/images/icons.svg
e26db17d75866d4a04dea925d9ab840be5cbb5ed:public/assets/images/icons.svg:</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">
80c7dec6246a3adb90eff7c0b3aef84ee463f7a0:public/assets/images/icons.svg:</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">
0db8c28bd57b7cad7deb8d96e08c618dd34b8692:public/assets/images/icons.svg:</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">
22b2f44ba02bfab05c6f9f4e4f56d089d9c339dd:public/assets/images/icons.svg:</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">
b411cabe5b640208ac910bd523e4cce0d0274725:public/assets/images/icons.svg:</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">
0445b4ee490376f1d3bd23883f2d08c0602d0b11:public/assets/images/icons.svg:</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">
3186d5e4d763f8e367f8cf9d5c4eae918284bdbf:public/assets/images/icons.svg:</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">
f4c50ae0fa23faa6ed4e461e2fc5202961b34598:public/assets/images/icons.svg:</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">
690843fcf110bb56ff6ac07dd8ac9abdc27c08c8:public/assets/images/icons.svg:</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">
7966bb3b16c2ce078e664636b3626ec47a831ce2:public/assets/images/icons.svg:</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">
95e5eb57a8a067427d4aa1d51678036e28f497ba:public/assets/images/icons.svg:</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">
b0597ad04d3e141dd2ba97addabdea2a73a875aa:public/assets/images/icons.svg:</symbol><symbol id="icon-file-archive" viewBox="0 0 24 31">

अगला में लापता आइकन के icons.svg ही है, मेरा मानना है कि icon-file-text भी याद आ रही है app/assets/stylesheets/svg-dimensions.css :

[email protected] ~ (develop) % git diff app/assets/stylesheets/svg-dimensions.css
diff --git a/app/assets/stylesheets/svg-dimensions.css b/app/assets/stylesheets/svg-dimensions.css
index 24e902dd3..f04d6dd70 100644
--- a/app/assets/stylesheets/svg-dimensions.css
+++ b/app/assets/stylesheets/svg-dimensions.css
@@ -31,6 +31,7 @@
 .icon-file-powerpoint { width: 24px; height: 31px; }
 .icon-file-unknown { width: 24px; height: 31px; }
 .icon-file-word { width: 24px; height: 31px; }
+.icon-file-text { width: 24px; height: 31px; }
 .icon-form { width: 17px; height: 17px; }
 .icon-forward { width: 16px; height: 17px; }
 .icon-full-logo { width: 175px; height: 50px; }

मैंने सोचा कि यह किसी भी तरह के लिए एक डिफ़ॉल्ट आकार प्रदान करने के लिए उपयोगी होगा.icon-file-* परिभाषाएं गायब हैं, जो हमने अभी तक नहीं देखी हैं, लेकिन मैं वास्तव में यह नहीं पता लगा सकता कि सीएसएस में ऐसा कैसे करें ताकि .icon-file-* शैली डिफ़ॉल्ट को ओवरराइड कर सकें आकार। मुझे लगता है कि इसके लिए .icon का उपयोग करना स्वीकार्य नहीं होगा क्योंकि यह सभी आइकन पर लागू होगा, न केवल फ़ाइल आइकन पर?

.icon { width: 24px; height: 31px; }

क्या हमें एक नया CSS वर्ग (जैसे .file-icon ) जोड़ना चाहिए जो डिफ़ॉल्ट आकार को परिभाषित करता है, और फिर SVG वर्ग को icon file-icon file-icon-* ?

@martinvonwittich अच्छा git कमांड स्किल्स! इस मामले की तलाश के लिए धन्यवाद। आइकन का नाम view_helpers.cfish में मैप किया
इसलिए आइकन बनाया: