How can I set up my Ionic 2 app to allow me to select and copy text when inside an app? I have tried with the "user-select: text;" CSS but the app won't allow me to copy text.
It seems that there is some additional CSS needed for a ".selectable" class:
.selectable {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
Doing this and adding class="selectable" to an element will allow users to select and copy text within an app.
http://markwillia.ms/allow-users-select-copy-text-ionic-2-apps/
Related
I am trying to add the plugin: nativescript-fonticon
I am currently stuck on the part where I have to convert the css file.
In the readme it states that I have to configure my css and converter before I can start converting:
import * as application from 'application';
import {TNSFontIcon, fonticon} from 'nativescript-fonticon';
TNSFontIcon.debug = true; <-- Optional. Will output the css mapping to console.
TNSFontIcon.paths = {
'fa': 'font-awesome.css',
'ion': 'ionicons.css'
};
TNSFontIcon.loadCss();
application.resources['fonticon'] = fonticon;
application.start({ moduleName: 'main-page' });
How am I supposed to do this in nativescript-vue?
You look like you're on the right track. You should put the initialising code in your main.js file (or whatever the entry point file is named).
Here's how to get it to work in NativeScript-Vue.
Download and extract fontawesome-free-5.9.0-web.zip from here.
Add webfonts/fa-brands-400.ttf, webfonts/fa-regular-400.ttf and webfonts/fa-solid-900.ttf to app/fonts directory.
Add css/fontawesome.css to app/assets directory. Remove any non fa-*:before classes from this file.
In your app's main.js. You should see a console log for each class when starting your app.
import { TNSFontIcon, fonticon } from 'nativescript-fonticon'
TNSFontIcon.debug = true
TNSFontIcon.paths = {
'fa': './assets/fontawesome.css',
}
TNSFontIcon.loadCss()
Vue.filter('fonticon', fonticon)
In your app's main css file, e.g. app.scss.
.fa-brands {
font-family: "Font Awesome 5 Brands", "fa-brands-400";
}
.far {
font-family: "Font Awesome 5 Free", "fa-regular-400";
font-weight: 400;
}
.fas {
font-family: "Font Awesome 5 Free", "fa-solid-900";
font-weight: 900;
}
Now use them in your view.
<Label :text="'fa-facebook-f' | fonticon" class="fa-brands" />
<Label :text="'fa-eye' | fonticon" class="far" />
<Label :text="'fa-eye' | fonticon" class="fas" />
I have found a blog that actually uses the fonticons plugin and how to use it:
https://nativescript-vue.org/blog/using-fonticons/
EDIT:
After a few Nativescript and Nativescript-Vue updates it does not seem to work properly. It's rather hard to use.
I suggest importing the font and using the respective unicodes like this:
Data:
icon: '\ue905'
Markup:
<Label class="ico" :text="icon"/>
Im writing a python script which reads from a file and plots graphs in seperate html files with plotly.I would like to have a button to redirect from one page to another(load from disc).I've come across this :
updatemenus = list([
dict(type="buttons",
buttons=list([dict(label = 'Next',method = 'update', args = ['shapes', []])])
)])
layout=go.Layout(title="Iteration_Number:"+str(counter_iter),updatemenus=updatemenus)
But this is used for updating data or changing layout. What i want is open another html page from disc on button click. Is that possible ?
I have also seen this :
import webbrowser
url = "file:///home/tinyOS/Simulation_"+str(counter_iter+1)+".html"
webbrowser.open(url)
Which helps me open a new page but again i want it to happen when clicking on the button.Any ideas? Thanks a lot !
From the question I understand that you want a group of buttons on the plotly graph, that are going to open a plotly graph in new tab.
So you need not use plotly buttons for this requirements.because they are mainly used for restyle, relayout, etc., so there is no relation between these buttons and opening links in new tabs.
I would recommend having simple html buttons which on click are going to take you to the new tab.
A simple way to do it will be, wrap the plot in a div set to relative positioning and make the div wrapping the button absolute positioned and position it anywhere over the graph, please refer the below example and let me know if this solves your issue!
Solution:
import plotly.plotly as py
import plotly.graph_objs as go
import plotly.offline as py_offline
from IPython.core.display import display, HTML
py_offline.init_notebook_mode()
display(HTML("""
<style>
.wrapper{
position:relative;
}
.button-group{
position:absolute;
top:40px;
left:90%;
z-index: 30000;
}
.button-group a{
display:block;
}
</style>
"""))
What is happening in the above piece of code is, first we include the necessary packages, then styles needed!
data = [go.Bar(
x=['giraffes', 'orangutans', 'monkeys'],
y=[20, 14, 23]
)]
display(HTML("""
<div class="wrapper">
<div class="button-group">
Google It
Yahoo It
</div>"""
+str(py_offline.plot(data, filename='plot_name' ,output_type="div", include_plotlyjs=False))
+ '</div>'))
The main piece of code, with which we embed the buttons is shown above, first we define the plotly plot , then using display and html functions, we can embed the buttons inside a div with class button-group and with CSS we position that button.
Please do try the above code and let me know if there are any doubts regarding the working!
I have been playing with Drupal 8. At the moment I want to have an image as the header background in Bartik. For this I created a subtheme called "freex" in the following way:
Create folder freex in /themes/custom/
Create freex.info.yml in /themes/custom/freex/ containing:
name: Freex
description: Basis thema voor verenigingen
type: theme
core: 8.x
base theme: bartik
libraries:
- freex/global-styling
Create file freex.libraries.yml in /themes/custom/freex/ containing:
global-styling:
version: 1.0
css:
theme:
css/style.css: {}
Create file in /themes/custom/freex/css/ called style.css containing:
#header {
background-color: yellow;
}
Just to see of it works... It doesn't, the header does not change background color. Any ideas as to what I am missing?
Turn off the page cache: Configuration Menu -> Development -> Performance
Uncheck the checkboxes : Aggregate Css files, aggregate javascript files.
If you do this, when you see page source, you see your file name style.css - not the generated css file name, as you write. At the top of the performance page, click to clear all cache. And after that, see your page.
The Bartik theme includes colors.css last (I think it's auto-generated from the theme settings) so the subtheme colours are overriden by the later color module colours.
Add "!important" to your CSS color settings, so they won't be overridden. For example:
#header {
background-color: #CDBE79 !important;
background-image: linear-gradient(to bottom, #CDBE79 0%, #CDBE79 100%) !important;
}
I want to create a PDF document with properly styled HTML. This is what I am trying:
QTextDocument *doc = new QTextDocument();
const char* s1 = "<html><head><style>body { font-family: sans-serif;}.note-atomic { background: rgb(242,242,242); width: 1000px; margin: 5px auto; border: 1px solid grey; border-radius: 8px;padding: 5px;}</style></head><body><div class = 'note-atomic'>Hi</div><img src = '/Users/attitude/Desktop/RnSghvV.png' width='400' height='300' /></body></html>";
doc->setHtml(QString::fromStdString(s1));
QPrinter *printer = new QPrinter();
printer->setOutputFileName("/Users/attitude/Desktop/fool.pdf");
printer->setOutputFormat(QPrinter::PdfFormat);
QPainter *painter = new QPainter();
painter->begin( printer );
doc->drawContents(painter, printer->pageRect().translated( -printer->pageRect().x(), - printer->pageRect().y() ));
doc->print(printer);
const char* s2 = "<html><body><div>Bye</div></body></html>";
doc->setHtml(QString::fromStdString(s2));
printer->newPage();
doc->drawContents(painter, printer->pageRect().translated( -printer->pageRect().x(), - printer->pageRect().y() ));
doc->print(printer);
painter->end();
I expect the PDF to have 2 pages - first one with text Hi, and the next and last one with text Bye. And the first page styled like it appears in a HTML page with the same markup:
However, the first page of the PDF comes up with content completely messed up:
How do I make it look as expected?
The image I am trying in the HTML doc: http://imgur.com/RnSghvV
Platform - Qt 5.3.1, 32 bit. OS X Yosemite.
This is QTextDocument. It rendered rich text (it is not HTML + CSS).
Available properties and elements you may check on http://doc.qt.io/qt-5/richtext-html-subset.html (for example there is no css property border for p or div).
Also you can see how it looks in Qt Designer, if you put your html code into QTextEdit.
For rendering HTML you can use QWebView (http://doc.qt.io/qt-5/qwebframe.html#print)
webview->mainFrame()->print(printer);
QTextDocument is not a web browser. It won't go fetching networked URLs for you. You need to add a QVariant QTextDocument::loadResource(int type, const QUrl & name) method to your QObject (QWidget is-a QObject!), and make the QTextDocument a child of that object. The document instance will the invoke your implementation of loadResource, where you can leverage the QNetworkAccessManager to do the fetching.
For this to have any chance of being user-friendly, you cannot block on network requests. This is accomplished by doing the processing twice. First simply take note of what URLs are to be loaded and initiate their fetching, returning an empty QVariant. Once all network requests are completed successfully and you've stored them in a cache, you can re-run the same code and it'll correctly render the page and won't block for network access.
All of this has to be done asynchronously.
We have a very restricted rich text editor for our client. We only allow a handful of standard tags. We want all styling to be dictated by the CSS we've built for the site. They are not allowed to deviate.
We've removed most options form the toolbar and only having specific tags in the dropdown, but we recently added CSS to the editor so that the text in the editor is styled like it is on the page to make it easier for authors to visualize. Now under certain circumstances, it will insert span tags with inline styles like:
<h2><span style="font-family: Georgia, 'Times New Roman', serif; color: #232b37;">text</span></h2>
It seems to be pulling our CSS in. Is there a way to configure it to just not do this? Thanks.
No, you cannot change this behavior by configuration. What you could do is add an item:saving event handler, that removes any unwanted tags like these span tags whenever a content editor saves the item. It is not the nicest solution but at least it works. I often use it to clean out unwanted (empty) paragraph tags the rich text editor tends to add.
<event name="item:saving">
<handler type="ExampleProject.Events.RemoveUnwantedTags, ExampleProject" method="OnItemSaving" />
</event>
Removing empty P-tags is easy, but for your solution you could use a regex to replace any tags with an inline style attribute (which should be unique anyway).
Here's a mockup code template you could use to replace all rich text editor field values in an item for this event handler:
public class RemoveUnwantedTags
{
public void OnItemSaving(object sender, EventArgs args)
{
var item = Event.ExtractParameter(args, 0) as Item;
if (item == null)
{
return;
}
foreach (Field field in item.Fields)
{
if (!field.TypeKey.Equals("rich text", StringComparison.InvariantCultureIgnoreCase))
{
continue;
}
var content = field.Value;
if (!string.IsNullOrEmpty(content))
{
content = content.Trim();
// replace whatever you want over here
using (new SecurityDisabler())
{
item.Editing.BeginEdit();
field.Value = content;
item.Editing.EndEdit();
}
}
}
}
}
Of course it's tempting to make all sort of item:save pipelines because they just work. But don't forget about more specific pipelines that can actually hook into the moment after you click on the Accept button and the moment Sitecore put's the richtext in the field.
<!-- Transforms markup from rich text fields before the Rich Text Editor loads it. -->
<loadRichTextContent/>
<!-- Transforms markup from the Rich Text Editor before saving it as a rich text field value. -->
<saveRichTextContent/>
Both are pipelines that work great for this purpose.
An example implementation of this can be found at https://techmusingz.wordpress.com/2014/06/14/wrapping-rich-text-value-in-paragraph-tag-in-sitecore/
copy/paste from the website mentioned above:
public void Process(SaveRichTextContentArgs args)
{
if (!(args.Content.Trim().StartsWith("<p>") && args.Content.Trim().EndsWith("</p>")))
args.Content = "<p>" + args.Content + "</p>";
}
I personally don't like real string operations on the output so I would recommend handling the richtext content with HtmlAgilityPack (which Sitecore comes with) or use a XDocument.
Example by myself with HtmlAgilityPack that removes script and style elements:
HtmlDocument doc = new HtmlDocument();
doc.LoadHtml(html);
// Strip output from all kinds of stuff
doc.DocumentNode.Descendants()
.Where(n => n.Name == "script" || n.Name == "style")
.ToList()
.ForEach(n => n.Remove());
An even better solution would be to parse and clean it up with a good and solid HtmlSanitizer.
https://github.com/mganss/HtmlSanitizer
Make sure you create some unittests to wrap the pipeline and test it to its extends.
Best Regards,
Alex van Wolferen