I moved the quasar.variables.scss to ./src/app/css/. And then redefined the value of the $primary variable:
/* Prev */
/* $primary: #00b4ff; */
$primary: green;
/* ... */
But the variable has not been redefined.
Reproduction URL
https://stackblitz.com/edit/quasarframework-webpack-nvwe18?file=src/components/AppBtn.vue
I tried to configure this through various properties(scssLoaderOptions, sassLoaderOptions) in property build in quasar.config.js, for example:
scssLoaderOptions: {
additionalData: '#import "App/src/app/css/quasar.variables.scss"; ',
},
sassLoaderOptions: {
additionalData: '#import App/src/app/css/quasar.variables.scss;',
},
Related
I copy-paste code from another view(for example: about-page), where modal works just as I expect. But for some reason in this view (for example: contact-page) I can only close modal by pressing Esc. If I click on the background, then modal move a little to the right side.
%div
-if annotations.empty?
%p.text-2xl.text-primary-600.mt-2.text-center= t('views.doctor_portal.annotation_form.no_annotations')
-else
.text-center.text-xl.text-primary-600= t('views.doctor_portal.annotation_modal.header')
.flex.flex-row.flex-wrap.border-2.border-gray-700.w-full.h-max.overflow-y-auto.justify-center.rounded{style: 'max-height: 14rem'}
- annotations.each do |annotation|
%button{data: { controller: "modal", "data-modal-allow-background-close" => "true" } }
.flex.flex-col.w-52.h-max.border-2.border-primary-500.m-1.p-1.rounded{ "data-action" => "click->modal#open", :href => "#" }
/ Modal Container
.hidden.animated.fadeIn.fixed.inset-0.overflow-y-auto.flex.items-center.justify-center{ data: { action: "click->modal#closeBackground keyup#window->modal#closeWithKeyboard", "modal-target" => "container", "modal-disable-backdrop" => true }}
/ Modal Inner Container
.max-h-screen.w-full.max-w-lg.relative{ :style => "z-index: 9999;"}
/ Modal Card
.m-1.rounded.shadow-2xl.bg-white.p-5
.text-center.text-xl.text-primary-500= t('views.doctor_portal.annotation_modal.note')
.text-center.p-2=annotation.content
.text-center.text-xs.-mb-5= t('views.doctor_portal.annotation_modal.press_esc')
%div.text-center
- if I18n.locale == :en
#{l annotation.created_at, format: '%B %d %Y'}
- else
#{l annotation.created_at, format: '%d %B, %Y'}
%div.text-center #{annotation.content[0..19]}(...)
:css
#modal-background{
display: none;
}
EDIT:
package.json
"stimulus": "^2.0.0",
"stimulus_reflex": "3.4.1",
"tailwindcss": "npm:#tailwindcss/postcss7-compat",
"tailwindcss-stimulus-components": "^2.1.1",
application_controller.js
import { Controller } from 'stimulus'
import StimulusReflex from 'stimulus_reflex'
/* This is your ApplicationController.
* All StimulusReflex controllers should inherit from this class.
*
* Example:
*
* import ApplicationController from './application_controller'
*
* export default class extends ApplicationController { ... }
*
* Learn more at: https://docs.stimulusreflex.com
*/
export default class extends Controller {
connect () {
StimulusReflex.register(this)
}
/* Application-wide lifecycle methods
*
* Use these methods to handle lifecycle concerns for the entire application.
* Using the lifecycle is optional, so feel free to delete these stubs if you don't need them.
*
* Arguments:
*
* element - the element that triggered the reflex
* may be different than the Stimulus controller's this.element
*
* reflex - the name of the reflex e.g. "Example#demo"
*
* error/noop - the error message (for reflexError), otherwise null
*
* reflexId - a UUID4 or developer-provided unique identifier for each Reflex
*/
beforeReflex (element, reflex, noop, reflexId) {
// document.body.classList.add('wait')
}
reflexSuccess (element, reflex, noop, reflexId) {
// show success message
}
reflexError (element, reflex, error, reflexId) {
// show error message
}
reflexHalted (element, reflex, error, reflexId) {
// handle aborted Reflex action
}
afterReflex (element, reflex, noop, reflexId) {
// document.body.classList.remove('wait')
}
finalizeReflex (element, reflex, noop, reflexId) {
// all operations have completed, animation etc is now safe
}
}
In a Firefox extension, I open new tabs:
var tab = gBrowser.addTab(url, referrer, null, postData, null, null);
With Firefox 30, this fails, sometimes, after 9 tabs opened:
TypeError: this.selectedItem is null
However, the number of tabs does increase by 1 (checked with gBrowser.browsers.length).
I tried this alternative code, but I get the same error after a while:
var wm = Components.classes["#mozilla.org/appshell/window-mediator;1"].getService(Components.interfaces.nsIWindowMediator);
var my_browser = wm.getMostRecentWindow("navigator:browser").getBrowser();
var tab = my_browser.addTab(url, referrer, null, postData, null, null);
Somehow this was fixed by changing some of the custom CSS used to modify the display of the browser
#navigator-toolbox {
/*display: none;*/ /* causes crashes!!! */
max-height: 0;
overflow: hidden;
}
#TabsToolbar {
/*display: none;*/ /* causes crashes!!! */
max-height: 0;
overflow: hidden;
}
I wish to detect what media query is active - I'm using Bootjack, so hence I am using the default breakpoints
I expected to be able to use getComputedStyle() to get hold of the value of the 'content' property in the example below - but I don't seem to get the syntax correct. I can happily get the value of an element - say the font-famly on the body, but not pseudo-elements...
Here's what I am doing:
Given this css..
/* tablets */
#media(min-width:768px){
body::after {
content: 'tablet';
display: none;
}
}
#media(min-width:992px){
body::after {
content: 'desktop';
display: none;
}
}
#media(min-width:1200px){
body::after {
content: 'large-screen';
display: none;
}
}
I have this in my dart file:
String activeMediaQuery = document.body.getComputedStyle('::after').getPropertyValue('content');
but activeMediaQuery is always empty.
I've tried ('after') and (':after') and anything else weird and wonderful but to no avail.
String activeMediaQuery = document.body.getComputedStyle().getPropertyValue('font-family');
sets the variable activeMediaQuery to the value of the font-family that I am using (not much use to me though!)
What should I be doing?
You can also subscribe to MediaQuery change events
for more details see https://github.com/bwu-dart/polymer_elements/blob/master/lib/polymer_media_query/polymer_media_query.dart
There is a bug in Dart and the workaround uses dart-js-interop.
This is the code from the polymer-media-query element. I don't know if the comments not suppored in Dart yet are still valid. It's a few months since I tried it.
Here is an example page that shows how to use the element.
https://github.com/bwu-dart/polymer_elements/blob/master/example/polymer_media_query.html
var _mqHandler;
var _mq;
init() {
this._mqHandler = queryHandler;
mqueryChanged(null);
if (_mq != null) {
if(context['matchMedia'] != null) {
_mq.callMethod('removeListener', [_mqHandler]);
}
// TODO not supported in Dart yet (#84)
//this._mq.removeListener(this._mqHandler);
}
if (mquery == null || mquery.isEmpty) {
return;
}
if(context['matchMedia'] != null) {
_mq = context.callMethod('matchMedia', ['(${mquery})']);
_mq.callMethod('addListener', [_mqHandler]);
queryHandler(this._mq);
}
// TODO not supported in Dart yet (#84)
// Listener hast to be as MediaQueryListListener but this is and abstract
// class and therefor it's not possible to create a listner
// _mq = window.matchMedia(q);
// _mq.addListener(queryHandler);
// queryHandler(this._mq);
}
void queryHandler(mq) {
queryMatches = mq['matches'];
//fire('polymer-mediachange', detail: mq);
}
This worked for me with the CSS you provided in your question but only when the window was wider than 768 px. You might miss a rule with max-width: 768px
import 'dart:html' as dom;
void main () {
dom.window.onResize.listen((e) {
var gcs = dom.document.body.getComputedStyle('::after');
print(gcs.content);
});
}
Here is the script:
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
$('#file_upload').uploadify({
'uploader' : '/uploadify/uploadify.swf',
'script' : '/upload2.php',
'cancelImg' : '/uploadify/cancel.png',
'folder' : '/uploads',
'auto' : false,
'onError' : function (event,ID,fileObj,errorObj) {
alert(errorObj.type + ' Error: ' + errorObj.info);
},
'fileExt' : '*.wma;*.mp3',
'fileDesc' : 'Audio Files',
'scriptData' : {'fileID':'20541','hash':'2e1177c09a6503d11b1a401177022de50409e96279a2dbb11c5aef5783d231c975da22e2ddfd480b5e050f4fb09d9b7caa47a71ab0150b7c462b06d06e61e664','hashit':'fe458d423c6d1c18248b73dad776a9d4a6ff1ac9fc4b07674b3715b4992a80b9d2b4e3a340973642497d66ac8e8d57d7aa737f8911a784888b164e84961f177a'},
'onComplete' : function(eventID,ID,fileObj,response,data) {
window.location = "http://www.messageshare.com/welcome/file_farm/20541/fe458d423c6d1c18248b73dad776a9d4a6ff1ac9fc4b07674b3715b4992a80b9d2b4e3a340973642497d66ac8e8d57d7aa737f8911a784888b164e84961f177a";
}
});
});
// ]]>
</script>
I need to change 'auto' from false to true.
Since all those scriptData values seem liable to change from page load to page load, what you'd want to do is intercept that <script> node on the fly, clone it and only change 'auto' to true, using RegEx.
On Firefox Greasemonkey, you can do that with the stupefyingly brilliant (^_^) checkForBadJavascripts utility. Like so:
// ==UserScript==
// #name _Modify JS as it's loaded
// #include http://YOUR_SERVER.COM/YOUR_PATH/*
// #require https://gist.github.com/raw/2620135/checkForBadJavascripts.js
// #run-at document-start
// #grant GM_addStyle
// ==/UserScript==
/*- The #grant directive is needed to work around a design change
introduced in GM 1.0. It restores the sandbox.
*/
function replaceTargetJavascript (scriptNode) {
var scriptSrc = scriptNode.textContent;
scriptSrc = scriptSrc.replace (
/'auto'\s+\:\s+false/,
"'auto' : true"
);
addJS_Node (scriptSrc);
}
checkForBadJavascripts ( [
[false, /'auto'\s+\:\s+false/, replaceTargetJavascript]
] );
I want to make "jQuery UI TAB" blink (like notification).
I have diffrent tabs (Inbox | Sent | Important). My timer function checks if there is a new message in inbox, if so, I want the Inbox tab to start blinking/ flashing unless its clicked open.
Have tried diffrent options like .effect(..), .tabs(fx: {..}) but nothing seems to work :(
Any idea if its possible or not?
Yes it's definitely possible.
To give me some practice, I've written a jQuery blinker plugin for you:
jQuery:
(function($){
// **********************************
// ***** Start: Private Members *****
var pluginName = 'blinker';
var blinkMain = function(data){
var that = this;
this.css(data.settings.css_1);
clearTimeout(data.timeout);
data.timeout = setTimeout(function(){
that.css(data.settings.css_0);
}, data.settings.cycle * data.settings.ratio);
};
// ***** Fin: Private Members *****
// ********************************
// *********************************
// ***** Start: Public Methods *****
var methods = {
init : function(options) {
//"this" is a jquery object on which this plugin has been invoked.
return this.each(function(index){
var $this = $(this);
var data = $this.data(pluginName);
// If the plugin hasn't been initialized yet
if (!data){
var settings = {
css_0: {
color: $this.css('color'),
backgroundColor: $this.css('backgroundColor')
},
css_1: {
color: '#000',
backgroundColor: '#F90'
},
cycle: 2000,
ratio: 0.5
};
if(options) { $.extend(true, settings, options); }
$this.data(pluginName, {
target : $this,
settings: settings,
interval: null,
timeout: null,
blinking: false
});
}
});
},
start: function(){
return this.each(function(index){
var $this = $(this);
var data = $this.data(pluginName);
if(!data.blinking){
blinkMain.call($this, data);
data.interval = setInterval(function(){
blinkMain.call($this, data);
}, data.settings.cycle);
data.blinking = true;
}
});
},
stop: function(){
return this.each(function(index){
var $this = $(this);
var data = $this.data(pluginName);
clearInterval(data.interval);
clearTimeout(data.timeout);
data.blinking = false;
this.style = '';
});
}
};
// ***** Fin: Public Methods *****
// *******************************
// *****************************
// ***** Start: Supervisor *****
$.fn[pluginName] = function( method ) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || !method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist in jQuery.' + pluginName );
}
};
// ***** Fin: Supervisor *****
// ***************************
})( jQuery );
See it in action here
The plugin and the fiddle are pretty raw in that I haven't tried to integrate with jQuery-ui-tabs. This may be easy or hard, I don't know, but providing each tab is addressable by class or id then it shouldn't be too difficult.
Something you may need to consider is stopping a blinking tab when it is clicked. For this you may wish to call the .blinker('stop') method directly (with a .on('click') handler) or from an appropriate jQuery-ui-tabs callback.
API
The plugin is properly written in jQuery's preferred pattern. It puts just one member in the jQuery.fn namespace and .blinker(...) will chain like standard jQuery methods.
Methods :
.blinker('init' [,options]) : Initialises selected element(s) with blinker behaviour. Called automatically with .blinker(options), or just .blinker() in its simplest form.
.blinker('start') : causes selected element(s) to start blinking between two styles as determined by plugin defaults and/or options.
.blinker('stop') : causes selected element(s) to stop blinking and return to their natural CSS style(s).
Options : a map of properties, which determine blinker styles and timing:
css_0 : (optional) a map of css properties representing the blink OFF-state.
css_1 : a map of CSS properties representing the blink ON-state.
cycle : the blink cycle time in milliseconds (default 2000).
ratio : ON time as a proportion of cycle time (default 0.5).
By omitting css_0 from the options map, the OFF state is determined by the element(s)' natural CSS styling defined elsewhere (typically in a stylesheet).
Default values are hard-coded for css_1.color, css_1.backgroundColor, cycle time and ratio. Changing the default settings programmatically is not handled, so for different default styling the plugin will need to be edited.
jQuery comes by default with a slew of effects to pick from. You can easily use them wherever you see the need for them and they can be applied like so:
$('#newmsg').effect("pulsate", {}, 1000);
Demo
yes... this is what you need...!!!
this is javascript
if(newmessage==true){
$('#chat-86de45de47-tab').effect("pulsate", {}, 1000);
}
i think it's