Add 'New' string next to plus button on Files app
Diagnosis
When you load the page you can see its associated html:
<div id="controls"><div class="breadcrumb"><div class="crumb svg crumbmenu hidden"><a class="icon-more menutoggle" aria-expanded="false"></a><div class="popovermenu menu-center menu"><ul><li class="crumblist"><a href="/index.php/apps/files?dir=/"><span class="icon-folder"></span><span>Home</span></a></li></ul></div></div><div class="crumb svg crumbhome"><a href="/index.php/apps/files?dir=/" class="icon-home">Home</a><span style="display: none;"></span></div></div>
<div class="actions creatable" style=""><a href="#" class="button new" data-original-title="" title="">
<span class="icon icon-add"></span>
<span class="hidden-visually">Nou</span>
</a>
<div id="uploadprogresswrapper"><div id="uploadprogressbar">
<em class="label outer" style="display:none"></em>
</div>
<button class="stop icon-close" style="display:none">
<span class="hidden-visually"></span>
</button>
</div>
</div>
<div id="file_action_panel" activeaction="false"></div>
<div class="notCreatable notPublic hidden">
No teniu permís per pujar o crear fitxers aquí </div>
<input type="hidden" name="permissions" value="31" id="permissions">
<input type="hidden" id="free_space" value="415673561088">
<input type="hidden" class="max_human_file_size" value="(max )">
<div></div></div>
where you can find:
<span class="hidden-visually">Nou</span>
.
That means that the requested string is there but hidden thanks to css.
Approach 1
The associated piece of source to that 'Nou' button can be find at Nextcloud's: apps/files/js/templates.js . Specifically it is:
templates['template_addbutton'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) {
var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) {
if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
return parent[propertyName];
}
return undefined
};
return "<a href=\"#\" class=\"button new\">\n <span class=\"icon "
+ alias4(((helper = (helper = lookupProperty(helpers,"iconClass") || (depth0 != null ? lookupProperty(depth0,"iconClass") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"iconClass","hash":{},"data":data,"loc":{"start":{"line":2,"column":19},"end":{"line":2,"column":32}}}) : helper)))
+ "\"></span>\n <span class=\"hidden-visually\">"
+ alias4(((helper = (helper = lookupProperty(helpers,"addText") || (depth0 != null ? lookupProperty(depth0,"addText") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"addText","hash":{},"data":data,"loc":{"start":{"line":3,"column":31},"end":{"line":3,"column":42}}}) : helper)))
+ "</span>\n</a>\n";
},"useData":true});
Unfortunately it does not look up for a nextcloud setting property in order to show 'addText' which it's the internal name for 'Nou'.
So my first approach to solve this problem was to activate a custom javascript.
The first step is to add:
<script nonce="<?php p(\OC::$server->getContentSecurityPolicyNonceManager()->getNonce()) ?>" src="/them
es/digitaldemocratic/apps/files/js/newbutton-show-text.js" defer></script>
line at core/templates/layout.user.php
so that it loads: themes/digitaldemocratic/apps/files/js/newbutton-show-text.js
with the following content:
templates['template_addbutton'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) {
var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) {
if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
return parent[propertyName];
}
return undefined
};
return "<a href=\"#\" class=\"button new\">\n <span class=\"icon "
+ alias4(((helper = (helper = lookupProperty(helpers,"iconClass") || (depth0 != null ? lookupProperty(depth0,"iconClass") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"iconClass","hash":{},"data":data,"loc":{"start":{"line":2,"column":19},"end":{"line":2,"column":32}}}) : helper)))
+ "\"></span>\n <span>"
+ alias4(((helper = (helper = lookupProperty(helpers,"addText") || (depth0 != null ? lookupProperty(depth0,"addText") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"addText","hash":{},"data":data,"loc":{"start":{"line":3,"column":31},"end":{"line":3,"column":42}}}) : helper)))
+ "</span>\n</a>\n";
},"useData":true});
which as you can see no longer has hidden-visually as the 'New button' css class.
This approach did not work. 'Nou' text was not visible at all.
Approach 2
Same as above but javascript does not try to override a javascript variable but the DOM itself.
So:
- Search for 'controls' id element.
- Search for first 'div' inside of it with class 'actions creatable'.
- Search for 'a' inside of the former.
- Search for second span inside of the former.
- Remove 'hidden-visually' class from the found element.
Unfortunately I have not enough skills for writing such a DOM search. I also have some doubts about if this is even possible. And, even if it's possible I'm not sure if it will break sooner or later when Nextcloud is updated.
** Approach 3 **
Fork Nextcloud itself. This is actually the easiest way of fixing this problem. I discarded this approach because the goal is to use a theme so that we can use the latest Nextcloud.