I'm trying to customize Quasar's QSelect with multiple selection (https://quasar.dev/vue-components/select#The-display-value), to show text and outline in bold, when a selection is made.
I was inspired by this site (https://www.zalando.dk/herretoej/_beige.gra.sort/) and how they use multi select to highlight when a selection is made e.g. "Farve".
I wanted to do something similar using QSelect and "display-value" from API documentation (https://quasar.dev/vue-components/select#QSelect-API).
My example: https://jsfiddle.net/orbit/351f27ua/30/
My example: https://jsfiddle.net/orbit/351f27ua/30/
Basically I am trying to make the select have bold text e.g. "Items (2)" when 2 items has been selected and preferably show a thick border - as shown on (https://www.zalando.dk/herretoej/_beige.gra.sort/)
Any idea on how to achieve this using Quasar?
you can customize it using styles and with a conditional class
new Vue({
el: '#q-app',
data: function () {
return {
version: Quasar.version,
itemOptions: ['Item 1', 'Item 2', 'Item 3'],
items: [],
displayValue: ''
}
},
methods: {
addValue: function (item) {
this.items.push(item);
this.displayValue = `Items (${this.items.length})`;
},
removeValue: function (item) {
const index = this.items.findIndex(x => x.value == item.value);
this.items.splice(index, 1);
this.displayValue = this.items.length !== 0 ? `Items (${this.items.length})` : '';
}
}
})
.custom_selected {
border: 2px solid #000000;
}
.custom_selected .q-field__label,
.custom_selected .q-field__native {
color: #000000;
font-weight: bolder!important;
}
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/#quasar/extras/material-icons/material-icons.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.umd.min.js"></script>
<div id="q-app" class="q-ma-md">
<div class="q-mb-xl">
Custom QSelect - needs to show bold text when one or more items are selected and a thick border
</div>
<q-select
filled
v-model="items"
multiple
:options="itemOptions"
:label="items.length < 1 ? 'Items' : undefined"
:display-value="displayValue"
style="width: 150px;"
#add="addValue"
#remove="removeValue"
:class="{'custom_selected': items.length>0}">
</q-select>
</div>
Related
I'd like to add a hyperlink in a editor, like vscode does:
I'd like to add this formatted document and when you click into it, some operation happens, open a file dialog, for example.
I have no code to show yet because I didn't find anything like that yet, only for regular text that goes like this:
const line = editor.getPosition();
if(!line) {
throw new Error('line is null');
}
const range = new monaco.Range(line.lineNumber, 1,
line.lineNumber, 1);
const text = "empty tab";
const op: monaco.editor.IIdentifiedSingleEditOperation = {
range: range,
text: text,
forceMoveMarkers: true
};
editor.executeEdits('my-source', [op]);
but I didn't see how add a format it.
You can use an overlay element and define the placeholder content in HTML, with links that will perform actions (e.g. change the editor theme, change the language etc).
The HTML for the placeholder would look something like this:
<div class="monaco-placeholder">
This is a test placeholder that will disappear when you click into the editor.
Click
here
first if you want to change the editor language from HTML to JavaScript, or click
here
if you want to change the editor theme
</div>
Along with the following CSS:
.monaco-placeholder {
color: darkturquoise;
display: none;
position: absolute;
top: 0;
left: 65px;
pointer-events: all;
z-index: 1;
opacity: 0.7;
}
You can then wire this up in JavaScript as follows:
Functions to hide and show the placeholder:
function showPlaceholder() {
document.querySelector(".monaco-placeholder").style.display = "initial";
}
function hidePlaceholder() {
document.querySelector(".monaco-placeholder").style.display = "none";
}
Create the editor and show the placeholder:
const instance = monaco.editor.create(document.getElementById('container'), {
value: "",
language: 'html'
});
showPlaceholder();
Add event handlers for any links in the placeholder that you want to perform actions when clicked:
document.getElementsByClassName('change-language')[0].addEventListener('click', (e) => {
e.stopPropagation();
var model = instance.getModel();
monaco.editor.setModelLanguage(model, "javascript")
console.log('language successfully changed to JavaScript')
});
document.getElementsByClassName('change-theme')[0].addEventListener('click', (e) => {
e.stopPropagation();
monaco.editor.setTheme('vs-dark')
console.log('theme successfully changed')
});
Event handler to clear the placeholder and focus into the editor when the user clicks on any part of the placeholder apart from the links:
document.getElementsByClassName('monaco-placeholder')[0].addEventListener('click', () => {
hidePlaceholder();
instance.focus();
});
If you copy the HTML, CSS and JavaScript below into the Monaco Playground, you will see this working:
HTML
<div id="container" style="height: 100%"></div>
<div class="monaco-placeholder">
This is a test placeholder that will disappear when you click into the editor.
Click
here
first if you want to change the editor language from HTML to JavaScript, or click
here
if you want to change the editor theme
</div>
CSS
.monaco-placeholder {
color: darkturquoise;
display: none;
position: absolute;
top: 0;
left: 65px;
pointer-events: all;
z-index: 1;
opacity: 0.7;
}
JavaScript
const instance = monaco.editor.create(document.getElementById('container'), {
value: "",
language: 'html'
});
showPlaceholder();
function showPlaceholder() {
document.querySelector(".monaco-placeholder").style.display = "initial";
}
function hidePlaceholder() {
document.querySelector(".monaco-placeholder").style.display = "none";
}
document.getElementsByClassName('monaco-placeholder')[0].addEventListener('click', () => {
hidePlaceholder();
instance.focus();
});
document.getElementsByClassName('change-language')[0].addEventListener('click', (e) => {
e.stopPropagation();
var model = instance.getModel();
monaco.editor.setModelLanguage(model, "javascript")
console.log('language successfully changed to JavaScript')
});
document.getElementsByClassName('change-theme')[0].addEventListener('click', (e) => {
e.stopPropagation();
monaco.editor.setTheme('vs-dark')
console.log('theme successfully changed')
});
I am using kendo grid and I would like to show a tooltip everytime the user perform a mouseover on any grid cell. The following example works fine, but what about if I don't know the column the user do mouseover?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js">
</script>
</head>
<body>
<div id="grid"></div>
<style>
#grid{
width:300px;
}
</style>
<script>
var grid = null;
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
data: [
{ID:1 ,Text: "Text 1"},
{ID:2 ,Text: "Text 2"},
{ID:3 ,Text: "Text 3"}
],
schema: {
model: {
fields: {
ID: { type: "number" },
Text: { type: "string" }
}}
},
pageSize: 20
});
grid = $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: true,
filterable: true,
toolbar: ["create"],
columns: [
{ field: "ID", width: "50px" },
{ field: "Text", width: "200px", attributes: {
style: 'white-space: nowrap '
} }],
editable: "incell"
}).data("kendoGrid");
$("#grid").kendoTooltip({
filter: "td:nth-child(2)", //this filter selects the second column's cells
position: "right",
content: function(e){
var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
var content = dataItem.Text;
return content;
}
}).data("kendoTooltip");
});
</script>
</body>
</html>
So this line is not enough in my case:
var content = dataItem.Text;
because:
1) I could have field1, field2, field3, etc. In this case, we are assuming that the only column enabled to mouseover is the column named "Text".
2) I need not only the value of any cell the user perform the mouseover, but also the column name.
So what I need to show in the tooltip is:
var content = "column name: " + columname + " - Value: " + columnValue;
Where columname is the name taken from any column mouseover and the columnValue the value of that cell.
Thanks
So I am assuming you just want the column header and the value that is that specific cell you are hovering over if I am understanding your question correctly so rather than showing the entire dataItem object i.e.
{ID:1, Text:"Text Value 1"}
You just want:
Text : Text Value 1
Assuming this is what you want then this dojo should help. http://dojo.telerik.com/uleJEbiz
Here is the code just for reference:
function(e){
var grid = $('#grid').data('kendoGrid');
var rowIndex = e.target.closest("tr").index();
var colIndex = e.target.index();
var dataItem = grid.dataItem(e.target.closest("tr"));
var columns = grid.columns.filter(function(col){
return !col.hidden;
});
var content = 'Found on Row::' + rowIndex + ' Column::' + colIndex +
'<br/>' + columns[colIndex].field + '::' + dataItem[columns[colIndex].field];
return content;
}
All I have done is looked at the problem as a grid we know what row we are looking for but not necessarily the column we are after as we may have hidden columns, so we can't just look at a specific index of the dataItem to pull that item as it may be incorrect. e.g. if you have three properties but the middle one is hidden then you will end up pulling an incorrect value.
So if get the visible column headers only then we can reference the property by the field name.
I have obviously changed the content string to show you the row and column position that we have hit within the grid.
By default, hovering color of table and button in DateTimePicker is grey, how to change it into custom color? I tryed the css code below but nothing happens.
.bootstrap-datetimepicker-widget table td.active:hover{
background-color: #337ab7;
color:#fff;
}
.bootstrap-datetimepicker-widget button:hover{
background-color: #337ab7;
color:#fff;
}
Here you go:
.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td.second:hover {
background-color: #123456; // Your custom color
}
PS. Look into the basics of Chrome DevTools.
The problem is that the buttons are not <button> elements, so your CSS rule is not matched.
You can use data-action attribute to select a button element and set colors as you want.
Here a live example for the close button.
$('#datetimepicker1').datetimepicker({
useCurrent: false,
format: "YYYY/MM/DD HH:mm ZZ",
//locale: "ja",
sideBySide: true,
toolbarPlacement: "bottom",
showClose: true,
icons: {
close: 'closeText'
}
});
.closeText:before {
content: "Close";
}
.bootstrap-datetimepicker-widget table td a[data-action="close"]>span:hover {
/* Set her your custom color */
background-color: #337ab7;
color: #fff;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Note that the picker has the debug option that allows you inspect component's HTML to simplyfy style customization.
P.S. I've set up the example starting from your previous question.
I'm searching for a simple solution to build a toolbar to insert textile markup.
No parser is needed, I only miss a toolbar / buttons to insert. Like quicktags for bbcode.
Is there a textile editor / toolbar or a universal js class?
Insert markup like "*" around selected text
Toogle markup (remove if inserted before
With some examples and hints I could try to build it myself.
I know MarkitUp, but would like to use a minimal and simple toolbar.
Maybe something like used here...
Found a solution to insert markup. Should do it!
Basic example found with google
JSFiddle demo
I put together a JSFiddle demo with a contenteditable div and simple insert B-tag "button".
var selected = '';
var before = '<b>';
var after = '</b>';
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
function insert(element, selection, before, after) {
$(element).html($(element).html().replace(selection, before+selection+after));
}
$(document).ready(function (){
$('.editable').bind('mouseup touchend', function (e){
selected = getSelectionText();
});
$('#insertB').click(function(e) {
insert('.editable', selected, before, after);
$('.editable').focus();
});
$('#toggleEditor').click(function() {
var editable = $('.editable');
if (editable.attr('contenteditable') == 'false') {
editable.attr('contenteditable','true').addClass('wysiwyg').focus();
}
else {
editable.attr('contenteditable','false').removeClass('wysiwyg');
}
});
});
.editable {
border: dashed black 2px;
padding: 10px;
margin-bottom: 20px;
}
.wysiwyg {
border: solid red 2px;
}
span {
padding: 5px;
border: solid black 1px;
margin-right: 20px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<body >
<div class="editable" contenteditable=false>
Just a simple text...
</div>
<span id="insertB">insert Bold</span><span id="toggleEditor">Toggle editor</span>
</body>
I tried many times and searched this board, but I can't do a simple thing like this:
http://xs.to/xs.php?h=xs139&d=09201&f=menu676.gif
I want to render a menu like this:
item 1 | item 2 | item 3 | .... etc...
"item 1" AND pipe character "|" = sIFR rendered text
HTML:
<div id="menu"> item 1 <span class="pipe"> | </span> item 2 <span class="pipe"> | </span> </div>
This part is within my HTML at the very bottom:
<script type="text/javascript">
var metaroman2 =
{ src: 'shared/sifr/metaroman2.swf' , ratios:[....7, 1.32....] };
sIFR.activate(metaroman2);
sIFR.replace(metaroman2, {
selector: '#menu', css: ['.sIFR-root { background-color: #F9F9F9; color: #1F2956; font-weight:bold;}'], wmode: "transparent" });
sIFR.replace(metaroman2, {
selector: '.pipe', css: ['.sIFR-root { background-color: #F9F9F9; color: #1F2956;}'], wmode: "transparent" });
</script>
CSS:
.sIFR-active .pipe {
visibility : hidden; line-height : 1em; margin-left : 5px; margin-right : 5 px;
}
.sIFR-active #menu {
visibility : hidden; line-height : 1em;
}
The problem is, that the "|" character is beeing put right at the end of the word with no spacing between (5px).
How i want it:
item 1 [5px space] | [5px space] item 2
What i get:
item 1|item 2
OTHER METHOD:
If I try it with an image, the image doesnt get displayed at all. ("sIFR.fitExactly = true" has been set in sifr-config)
What I mean with "image": in stead of the pipe sign, an image which represents the pipe sign.
html:
<div id="menu"> item 1 <img src=...> item 2 <img src=...> </div>
css:
.sIFR-active #menu {
visibility : hidden; line-height : 1em;
}
script:
This part is within my HTML at the very bottom:
<script type="text/javascript">
var metaroman2 =
{ src: 'shared/sifr/metaroman2.swf' , ratios:[....7, 1.32....] };
sIFR.activate(metaroman2);
sIFR.replace(metaroman2, {
selector: '#menu', css: ['.sIFR-root { background-color: #F9F9F9; color: #1F2956; font-weight:bold;}'], wmode: "transparent" });
</script>
I'm sorry for the messy code, but I hope you can make some sense of it.
(edit: have been using sIFR for a few days, simple heading replacing with ratio's work perfectly but the above is beating me up)
wrap every menu item into separate element, and replace that with sIFR selector, don't replace pipes. wrap them into span and style only with CSS.
those replaced items and spans should all be floating block elements.
html:
<div id="menu">Item 1<span>|<span>Item2...
css:
#menu a , #menu span {
display: block;
float: left;
}