I like this technique, but as you all know, one of the great things about svg graphics is that you can re-size and re-use the same file. Is it possible to add a size variable to ng-include?
eg:
<div ng-include="'img/logo-rev.svg'" class="ng-scope" width="50">
The answer is to not specify a width or height in your SVG. Or if you do, make sure they are both set to "100%". Then as long as your SVG has a suitable viewBox attribute, it will scale to whatever size you make its parent.
.small {
width: 50px;
height: 50px;
}
.large {
width: 150px;
height: 150px;
}
<div class="small">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="green"/>
</svg>
</div>
<div class="large">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="green"/>
</svg>
</div>
Note that the two SVGs in the example above are identical.
Related
I bumped into a problem with Cypress. I just couldn't check the radio button.
I have 7 questions with Yes or No radio buttons. By default, all buttons are checked to "NO". I need to check the "YES" options, it will send an API call to the backend and continue to do magic.
The html code for YES looks like this:
<input type="radio" id="options[0]radiovalue-true" class="form-control is-action-field form-check-input" value="true" style="opacity: 0; cursor: pointer; height: 0px; width: 0px;">
The html code for NO looks like this:
<input type="radio" id="options[0]radiovalue-false" class="form-control is-action-field form-check-input" value="false" checked="" style="opacity: 0; cursor: pointer; height: 0px; width: 0px;">
By default the NO radio button has property: checked: true , the YES radio button has property: checked: false
This is my tries:
cy.get('[class="sc-fzoJMP"]')
.find('.list-group-item')
.then((item) => {
cy.wrap(item)
.eq(0)
.should('contain', 'Is this opportunity?')
.find('input[type="radio"]')
.then((radioButtons) => {
cy.wrap(radioButtons).eq(0).check({ force: true }).should('be.checked');
});
I used different locators, tried ('[type="radio"]'), (':radio'), ('#options[0]radiovalue-true') I used different check methods: cy.get(':radio').click({force: true}) , cy.get(':radio').check('true', {force: true}) and tried to move code with checking radio buttons out of the loop but this is something else. It doesn't check the radio button but can verify that it's not checked.
I found one solution to use invoke property:
cy.wrap(radioButtons).eq(0).invoke('prop', 'checked', true).should('be.checked');
cy.wrap(radioButtons).eq(1).invoke('prop', 'checked', false).should('not.be.checked');
But it's checking "YES" radio button but it's not unchecking "NO" radio button and it doesn't send API call to the backend as supposed to do.
This is full HTML code for YES and NO radio buttons:
<div class="d-flex ">
<div class="mr-4" style="position: relative;">
<div class="form-check">
<input type="radio" id="options[0]radiovalue-true" class="form-control is-action-field form-check-input" value="true" style="opacity: 0; cursor: pointer; height: 0px; width: 0px;">
<label for="options[0]radiovalue-true" class="ml-0 form-check__radio form-check-label">
<svg viewBox="0 0 24 24" style="height: 20px; min-height: 20px; width: 20px; min-width: 20px; opacity: 1;">
<title>Select Option</title>
<circle cx="12" cy="12" r="9" stroke="#666666" stroke-width="2" fill="white"></circle>
</svg>
<p class="sc-fznyAO hdDwJr ml-1 typography-body ">Yes</p>
</label>
</div>
</div>
<div class="mr-4" style="position: relative;">
<div class="form-check">
<input type="radio" id="options[0]radiovalue-false" class="form-control is-action-field form-check-input" value="false" checked="" style="opacity: 0; cursor: pointer; height: 0px; width: 0px;">
<label for="options[0]radiovalue-false" class="ml-0 form-check__radio form-check-label">
<svg viewBox="0 0 24 24" style="height: 20px; min-height: 20px; width: 20px; min-width: 20px; opacity: 1;">
<title>Selected Option</title>
<circle cx="12" cy="12" r="9" stroke="var(--dcp-color-primary)" stroke-width="2" fill="none"></circle>
<circle cx="12" cy="12" r="5" fill="var(--dcp-color-primary)"></circle>
</svg>
<p class="sc-fznyAO hdDwJr ml-1 typography-body ">No</p>
</label>
</div>
<div class="action-field-wrapper is-action-field"></div>
</div>
</div>
The id's that have been assigned contain characters that don't work with # notation, but you can use attribute notation
cy.get('.list-group-item')
.eq(0)
.find('[id="options[0]radiovalue-true"]') // query id as an attribute
.click()
cy.get('.list-group-item')
.eq(0)
.find('[id="options[0]radiovalue-false"]')
.click()
Specifically, the [] in the ids stops '#options[0]radiovalue-true' from working.
With the expanded fragment, this works
cy.get('input[id="options[0]radiovalue-true"]')
.click({force:true})
.should('be.checked')
You need force:true because of the style opacity:0 and width & height 0.
This means the input is effectively hidden, and there is probably a better way to test this - perhaps clicking on the SVG icons.
You can use the IDs and click to select the 'Yes' or 'No' radio buttons.
cy.get('.list-group-item')
.eq(0)
.find('#options[0]radiovalue-true')
.click() //Clicks Yes
cy.get('.list-group-item')
.eq(0)
.find('#options[0]radiovalue-false')
.click() //Clicks No
How do I set a custom color on a checkbox element in MDC-Web using basic CSS/HTML/JavaScript?
Example: How to make this checkbox background lightblue?
<head>
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<style>
:root {
--mdc-theme-primary: blue;
--mdc-theme-accent: lightblue;
}
.mdc-ripple-surface.mdc-ripple-upgraded.mdc-button--primary::before,
.mdc-ripple-surface.mdc-ripple-upgraded.mdc-button--primary::after {
background-color: rgba(66, 66, 66, 0.08);
}
</style>
</head>
<body>
<div class="mdc-form-field">
<div class="mdc-checkbox">
<input type="checkbox"
id="my-checkbox"
class="mdc-checkbox__native-control"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark"
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark__path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
<label for="my-checkbox">My Checkbox Label</label>
</div>
</body>
:root {
--mdc-theme-primary: blue;
--mdc-theme-secondary: lightblue;
}
Material Components for the Web now uses the css variable mdc-theme-secondary rather than --mdc-theme-accent for secondary colours.
This was changed in version 0.18.0
I'm trying to add alignment buttons to the toolbar. I'm using the method of laying out the toolbar using html elements. What I'd like to know is if it's possible to have alignment buttons represented as discrete buttons on the toolbar instead of being in a dropdown.
All of the examples that I've seen so far use the dropdown approach. Is what I'm after even possible?
You can add a dropdown option as it's own button by adding a value attribute to it like so:
<button class="ql-align" value="center">
var quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: '#toolbar'
}
});
<link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>
<div id="toolbar">
<span class="ql-formats">
<button class="ql-align" value=""></button>
<button class="ql-align" value="center"></button>
<button class="ql-align" value="right"></button>
<button class="ql-align" value="justify"></button>
</span>
</div>
<div id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>
</div>
I'd suggest using the shorthand in the js for the toolbar, so not using a custom html toolbar. Then by writing
toolbar: [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }]
you can define 4 discrete alignment buttons as per the answer here by #jhchen. He also has a nice example here. Otherwise I'd assume you could achieve the same though html (based solely on looking at the source code the shorthand generates):
<span class="ql-formats">
<button type="button" class="ql-align" value="">
<svg viewBox="0 0 18 18">
<line class="ql-stroke" x1="3" x2="15" y1="9" y2="9"></line>
<line class="ql-stroke" x1="3" x2="13" y1="14" y2="14"></line>
<line class="ql-stroke" x1="3" x2="9" y1="4" y2="4"></line>
</svg>
</button>
<button type="button" class="ql-align" value="center">
<svg viewBox="0 0 18 18">
<line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
<line class="ql-stroke" x1="14" x2="4" y1="14" y2="14"></line>
<line class="ql-stroke" x1="12" x2="6" y1="4" y2="4"></line>
</svg>
</button>
<button type="button" class="ql-align" value="right">
<svg viewBox="0 0 18 18">
<line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
<line class="ql-stroke" x1="15" x2="5" y1="14" y2="14"></line>
<line class="ql-stroke" x1="15" x2="9" y1="4" y2="4"></line>
</svg>
</button>
<button type="button" class="ql-align" value="justify">
<svg viewBox="0 0 18 18">
<line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
<line class="ql-stroke" x1="15" x2="3" y1="14" y2="14"></line>
<line class="ql-stroke" x1="15" x2="3" y1="4" y2="4"></line>
</svg>
</button>
</span>
However, I would honestly suggest you use the shorthand, it keeps it all nice and clean and it ensures it works. Furthermore, it still allows you to add custom buttons (check this)
You can use select tag with option for dropdown. Use select with class ql-align and its inside add each option with value attributes as "", "center", "right" and "justify" respectively.
var quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: '#toolbar'
}
});
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<div id="toolbar">
<select class="ql-align">
<option value=""></option>
<option value="center"></option>
<option value="right"></option>
<option value="justify"></option>
</select>
</div>
<div id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>
</div>
Just add the following line to your Quill toolbar html and Quill will take care of the rest.
<select class="ql-align"></select>
This is an example:
<svg>
<g ng-repeat="rect in rectList">
<rect ng-attr-fill="rect.fill"
ng-attr-x="rect.x"
ng-attr-y="rect.y"
ng-attr-width="rect.width"
ng-attr-height="rect.height"></rect>
</g>
</svg>
I want to add a <md-tooltip> to each of these rects. Can I do it somehow? I am talking about the Angular Material Tooltip specifically, not any other tooltip implementation from other libraries.
Try to wrap it in a div and apply the md-tooltip
<div ng-repeat="status in statuses">
<md-tooltip md-direction="right">
{{status.description}}
</md-tooltip>
<svg >
<rect width="300" height="100" >
</rect>
</svg>
</div>
Here is the working Sample
I am new both to AngularJS and SVG so if i am doing something terribly wrong i apologize.
I am trying to create an SVG pattern with AngularJS:
Code fiddle:
http://jsfiddle.net/WFxF3/
Template:
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="grid" width="{{cubeWidth}}" height="{{cubeHeight}}" patternUnits="userSpaceOnUse">
<path d="M 0 0 L 0 {{cubeHeight}}" fill="none" stroke="gray" stroke-width="1" stroke-opacity="0.5"/>
<path d="M 0 0 L {{cubeWidth}} 0" fill="none" stroke="gray" stroke-width="1" stroke-opacity="0.5"/>
<!--<rect width="80" height="80" stroke="red" stroke-width="20" stroke-opacity="0.5" fill="white"/>-->
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)"/>
</svg>
Controller:
'use strict';
angular.module('gridifyApp')
.controller('MainCtrl', function ($scope) {
var docWidth = document.width;
var columns = 12;
var cubeWidth = docWidth / columns;
var cubeHeight = 44;
$scope.cubeWidth = cubeWidth;
$scope.cubeHeight = cubeHeight;
});
It seems to work and yet I get a console error:
Any ideas why?
The problem is svg is being parsed before angular is able to do anything so the value with double curly braces is invalid before angular gets to it. Angular's team has added a way to define some kind of "delayed binding". You can use it by prefixing desired attribute with ng-attr-. It waits untill the binding evaluation is valid and adds real attribute with proper value.
In your case it would be:
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="grid" ng-attr-width="{{cubeWidth}}" ng-attr-height="{{cubeHeight}}" patternUnits="userSpaceOnUse">
<path ng-attr-d="M 0 0 L 0 {{cubeHeight}}" fill="none" stroke="gray" stroke-width="1" stroke-opacity="0.5"/>
<path ng-attr-d="M 0 0 L {{cubeWidth}} 0" fill="none" stroke="gray" stroke-width="1" stroke-opacity="0.5"/>
<!--<rect width="80" height="80" stroke="red" stroke-width="20" stroke-opacity="0.5" fill="white"/>-->
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)"/>
</svg>
There should be no errors anymore. Remember to update your angular version.
SVG parsing happens before AngularJS can set any variable. You might try to create the SVG programmatically:
SVGSVGElement reference on MDN
Programmatically creating an SVG image element with JavaScript