I´ve been trying to change the Dojo Claro theme because it´s too light and i wanted to get rid of some of the efects.
One of them is the mouse over of form dijits.
Is there any way to disable, in general, the effect of the mouse over in Buttons and inputs like textboxes, filtering selects etc.....
I cannot catch the css on firebug when the mouse is 'overing' that elements. There should be a class that it´s appended to the element that produces that effect.
can anyone tell what it is?
Thanks
Taken from the Simple-Enabled-Button on the Basic Form Widgets tab of the theme tester - http://download.dojotoolkit.org/release-1.7.0/dojo-release-1.7.0/dijit/themes/themeTester.html?theme=claro.
No hover:
<span class="dijit dijitReset dijitInline dijitButton" role="presentation" widgetid="dijit_form_Button_1">
<span class="dijitReset dijitInline dijitButtonNode" data-dojo-attach-event="ondijitclick:_onClick" role="presentation">
<span class="dijitReset dijitStretch dijitButtonContents" data-dojo-attach-point="titleNode,focusNode" role="button" aria-labelledby="dijit_form_Button_1_label" tabindex="0" id="dijit_form_Button_1">
<span class="dijitReset dijitInline dijitIcon dijitIconTask" data-dojo-attach-point="iconNode"></span>
<span class="dijitReset dijitToggleButtonIconChar">?</span>
<span class="dijitReset dijitInline dijitButtonText" id="dijit_form_Button_1_label" data-dojo-attach-point="containerNode">Simple</span>
</span>
</span>
<input type="button" value="" class="dijitOffScreen" tabindex="-1" role="presentation" data-dojo-attach-point="valueNode">
</span>
Hover:
<span class="dijit dijitReset dijitInline dijitButton dijitButtonHover dijitHover" role="presentation" widgetid="dijit_form_Button_1">
<span class="dijitReset dijitInline dijitButtonNode" data-dojo-attach-event="ondijitclick:_onClick" role="presentation">
<span class="dijitReset dijitStretch dijitButtonContents" data-dojo-attach-point="titleNode,focusNode" role="button" aria-labelledby="dijit_form_Button_1_label" tabindex="0" id="dijit_form_Button_1">
<span class="dijitReset dijitInline dijitIcon dijitIconTask" data-dojo-attach-point="iconNode"></span>
<span class="dijitReset dijitToggleButtonIconChar">?</span>
<span class="dijitReset dijitInline dijitButtonText" id="dijit_form_Button_1_label" data-dojo-attach-point="containerNode">Simple</span>
</span>
</span>
<input type="button" value="" class="dijitOffScreen" tabindex="-1" role="presentation" data-dojo-attach-point="valueNode">
</span>
Identical apart from the outer span's classes ...
No hover:
dijit dijitReset dijitInline dijitButton
Hover:
dijit dijitReset dijitInline dijitButton dijitButtonHover dijitHover
The other form fields may differ, but you'll have to take a look at those. From what little I've looked, I think each form dijit has its own hover class(es).
dijitHover appears to be a functional class, rather than a UI class, as I can't find it in the Dojo 1.8.3 css or JS:
d:\dev\js\dojo-release-1.8.3>findstr /i/s "dijithover" *.css
FINDSTR: // ignored
d:\dev\js\dojo-release-1.8.3>findstr /i/s "dijithover" *.js
FINDSTR: // ignored
but I can find dijitButtonHover:
d:\dev\js\dojo-release-1.8.3>findstr /i/s "dijitbuttonhover" *.css
FINDSTR: // ignored
dijit\themes\claro\claro.css:.claro .dijitButtonHover .dijitButtonNode,
dijit\themes\claro\claro.css:.dj_ie .claro .dijitToolbar .dijitButtonHover .dijitButtonNode,
dijit\themes\claro\claro.css:.claro .dijitToolbar .dijitButtonHover .dijitButtonNode,
dijit\themes\claro\form\Button.css:.claro .dijitButtonHover .dijitButtonNode,
dijit\themes\claro\Toolbar.css:.dj_ie .claro .dijitToolbar .dijitButtonHover .dijitButtonNode,
dijit\themes\claro\Toolbar.css:.claro .dijitToolbar .dijitButtonHover .dijitButtonNode,
dijit\themes\nihilo\form\Button.css:.nihilo .dijitButtonHover .dijitButtonNode,
dijit\themes\nihilo\nihilo.css:.nihilo .dijitButtonHover .dijitButtonNode,
dijit\themes\nihilo\nihilo.css:.nihilo .dijitToolbar .dijitButtonHover,
dijit\themes\nihilo\Toolbar.css:.nihilo .dijitToolbar .dijitButtonHover,
dijit\themes\soria\form\Button.css:.soria .dijitButtonHover .dijitButtonNode,
dijit\themes\soria\soria.css:.soria .dijitButtonHover .dijitButtonNode,
dijit\themes\soria\soria.css:.soria .dijitToolbar .dijitButtonHover,
dijit\themes\soria\Toolbar.css:.soria .dijitToolbar .dijitButtonHover,
dijit\themes\tundra\form\Button.css:.tundra .dijitButtonHover .dijitButtonNode,
dijit\themes\tundra\Toolbar.css:.tundra .dijitToolbar .dijitButtonHover,
dijit\themes\tundra\tundra.css:.tundra .dijitButtonHover .dijitButtonNode,
dijit\themes\tundra\tundra.css:.tundra .dijitToolbar .dijitButtonHover,
dojox\grid\enhanced\resources\claro\EnhancedGrid.css:.dijitButtonHover .dojoxGridFBarCloseBtnIcon {
dojox\grid\enhanced\resources\claro\EnhancedGrid.css:.dijitButtonHover .dojoxGridFCBoxRemoveCBoxBtnIcon {
dojox\grid\enhanced\resources\claro\EnhancedGrid.css:.dijitButtonHover .dojoxGridFStatusTipDelRuleBtnIcon {
dojox\grid\enhanced\resources\claro\EnhancedGrid.css:.claro .dojoxGridFBarInfoTD .dojoxGridFBarClearFilterBtn.dijitButtonHover .dijitButtonText {
dojox\grid\enhanced\resources\claro\Filter.css:.claro .dojoxGridFBarInfoTD .dojoxGridFBarClearFilterBtn.dijitButtonHover .dijitButtonText {
dojox\grid\enhanced\resources\claroEnhancedGrid.css:.dijitButtonHover .dojoxGridFBarCloseBtnIcon {
dojox\grid\enhanced\resources\claroEnhancedGrid.css:.dijitButtonHover .dojoxGridFCBoxRemoveCBoxBtnIcon {
dojox\grid\enhanced\resources\claroEnhancedGrid.css:.dijitButtonHover .dojoxGridFStatusTipDelRuleBtnIcon {
dojox\grid\enhanced\resources\claroEnhancedGrid.css:.claro .dojoxGridFBarInfoTD .dojoxGridFBarClearFilterBtn.dijitButtonHover .dijitButtonText {
dojox\grid\enhanced\resources\EnhancedGrid.css:.dijitButtonHover .dojoxGridFBarCloseBtnIcon {
dojox\grid\enhanced\resources\EnhancedGrid.css:.dijitButtonHover .dojoxGridFCBoxRemoveCBoxBtnIcon {
dojox\grid\enhanced\resources\EnhancedGrid.css:.dijitButtonHover .dojoxGridFStatusTipDelRuleBtnIcon {
dojox\grid\enhanced\resources\Filter.css:.dijitButtonHover .dojoxGridFBarCloseBtnIcon {
dojox\grid\enhanced\resources\Filter.css:.dijitButtonHover .dojoxGridFCBoxRemoveCBoxBtnIcon {
dojox\grid\enhanced\resources\Filter.css:.dijitButtonHover .dojoxGridFStatusTipDelRuleBtnIcon {
dojox\grid\enhanced\resources\tundra\EnhancedGrid.css:.dijitButtonHover .dojoxGridFBarCloseBtnIcon {
dojox\grid\enhanced\resources\tundra\EnhancedGrid.css:.dijitButtonHover .dojoxGridFCBoxRemoveCBoxBtnIcon {
dojox\grid\enhanced\resources\tundra\EnhancedGrid.css:.dijitButtonHover .dojoxGridFStatusTipDelRuleBtnIcon {
dojox\grid\enhanced\resources\tundraEnhancedGrid.css:.dijitButtonHover .dojoxGridFBarCloseBtnIcon {
dojox\grid\enhanced\resources\tundraEnhancedGrid.css:.dijitButtonHover .dojoxGridFCBoxRemoveCBoxBtnIcon {
dojox\grid\enhanced\resources\tundraEnhancedGrid.css:.dijitButtonHover .dojoxGridFStatusTipDelRuleBtnIcon {
dojox\layout\resources\RotatorContainer.css:.rotatorIcons .dijitButtonHover .previous{background-position:0 -16px;}
dojox\layout\resources\RotatorContainer.css:.rotatorIcons .dijitButtonHover .next{background-position:-16px -16px;}
Dojo buttons have 3 hierarchical layers of Html SPAN nodes.
Whenever the mouse enters the button, only the top SPAN is changed. Two CSS classes are appended: "dijitButtonHover" and "dijitHover" (as you show in your "No hover" and "hover" HTML markup).
To change the Dojo Claro to your own design when the mouse enters the button, try the CSS selector:
.claro .dijitReset.dijitInline.dijitButton.dijitButtonHover{}
This may not work if you have in your CSS stylesheet other selectors with a higher specific weight. If this is the case, add some of your CSS classes to the above selector, in order to increase its weight.
Related
I don't know how to express the CSS code below using elm-css.
input[name="tab_item"] {
display: none;
}
<div>
<input type="radio" name="tab_item">
<label>hoge hoge</label>
</div>
Please look the below image
I have two users and their allowed channels.
My issue is :
When I click one channel of a user, the same channel is also get checked of other user. For example:
When I click Commissions of user Deepu, the channel Commissions of user Midhun also get checked.
I have to avoid that, the clicked channel of the user should only selected, not other user's.
I tried this
<v-data-table
:headers="headers"
:items="UserChannels"
:loading="datatableloading"
class="elevation-1"
>
<template v-slot:items="props">
<td class="text-xs-left">{{ props.item.username }}</td>
<td class="text-xs-left">
<ul class="channel-listitems">
<li v-for="item in Channels">
<input type="checkbox" class="channel-checkbox" :value="item.id" v-model="checkedChannels">
{{ item.channel_name }}
</li>
</ul>
<br>
<span>Checked names: {{ checkedChannels }}</span>
</td>
</template>
</v-data-table>
I am using Vue.js for doing this.
You can create mapping dict for each user Channels selection.
Please refer following codepen - https://codepen.io/Pratik__007/pen/oNgaXeJ?editors=1010
In data
checkedChannels:{},
Created
created () {
console.log(this.Channels)
let vm = this;
this.Users.map(function(item){
vm.$set(vm.checkedChannels,item['name'],[])
return item;
})
},
The official Vue docs states, you can use v-model on multiple checkboxes using the same array. ( Docs : https://v2.vuejs.org/v2/guide/forms.html#Checkbox )
Also working example : https://codesandbox.io/s/hungry-kepler-t7mkw
Select elements for array with checkboxes and v-model
<template>
<div id="app">
<!-- First, iterate over all users -->
<div v-for="(user, index) in users" class="user">
<p class="name">{{ user.username }} - Checked Channels {{user.channels}}</p>
<!-- Create checkbox for each available channel, and v-model it to user.channels -->
<div class="channel">
<label v-for="(channel, index) in availableChannels">
{{channel}}
<input type="checkbox" v-bind:value="channel" v-model="user.channels">
</label>
</div>
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
users: [
{
username: "User1",
channels: ["channel1", "channel2"]
},
{
username: "User2",
channels: ["channel3"]
}
],
availableChannels: [
"channel1",
"channel2",
"channel3",
"channel4",
"channel5"
]
};
}
};
</script>
<style>
.user {
min-height: 100px;
display: flex;
align-items: center;
border: 1px solid black;
margin-bottom: 10px;
justify-items: center;
}
.name,
.channel {
flex: 1;
}
.channel {
min-height: 100px;
display: flex;
flex-direction: column;
}
</style>
Hey guys i'm having some problems with how to upload and save images using angularjs and flowjs.
I'm new to angularjs and had my problems trying to make an image upload but i got it working with ng-flow, still i'm having some problems trying to save the image to some designed path.
One exemple and similar problem is this one How and where save uploaded files with ng-flow? , but i still couldn't made it work.
Here's the code for the upload and preview, working fine so far so good:
<div class="ng-scope add-file" flow-init="{target:'../WebService/WebService.asmx/setImage'}"
flow-name="image.flow" flow-files-submitted="$flow.upload()"
flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]">
<div class="row" style="margin-top: 0px!important;">
<div class="col-sm-10">
<p><label for="image">ADD PHOTO</label></p>
<table style="border: 0px;">
<tr>
<td ng-repeat="file in $flow.files" class="ng-scope thumbnail" style="margin: 3px 3px 3px 3px;">
<div class="text-right">
<a class="glyphicon glyphicon-remove" ng-click="file.cancel()"
style="color:#ff4b4b; text-decoration: none!important;"></a>
</div>
<div class="frame" ng-show="$flow.files.length" style="min-width: 210px!important;">
<span class="helper"></span>
<img flow-img="file" src="" class="image-thumbnail">
</div>
<div class="progress progress-striped" ng-class="{active: file.isUploading()}">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0"
aria-valuemax="100" ng-style="{width: (file.progress() * 100) + '%'}">
</div>
<span class="sr-only ng-binding">1% Complete</span>
</div>
</td>
</tr>
</table>
</div>
<div class="col-sm-2 text-right drop" flow-drop="" ng-class="dropClass">
<span class="file-upload btn btn-primary" flow-btn="">
Choose file
<input type="file" multiple="multiple" style="visibility: hidden; position: absolute;">
</span>
</div>
</div>
But here's the problem, i don't know how or what to do to create this image in some path...
I'm passing to ng-flow-init my webservice method as it will send via url parameters like this:
flow-init="{target:'../WebService/WebService.asmx/setImage'}"
and the ws receive it like the following example:
../setImage?flowChunkNumber=1&flowChunkSize=1048576&flowCurrentChunkSize=198637&flowTotalSize=198637&flowIdentifier=198637-1jpg&flowFilename=1.jpg&flowRelativePath=1.jpg&flowTotalChunks=1
'flowChunkNumber=1
'flowChunkSize=1048576
'flowCurrentChunkSize=111168
'flowTotalSize = 111168
'flowIdentifier=111168-Figura1png
'flowFilename=Figura1.png
'flowRelativePath=Figura1.png
'flowTotalChunks = 1
What should i do with these informations or what do i need to send the data (binary, base64, etc) and save/create the image on my server?
Edit 1: I already know that i need the file data and figured that i do need an upload.php to transform and send the file.
Still can't even think about how to create an upload.php for vb.net
After a long time searching i decided to move forward and do with an entirely different way, i removed pretty much all my custom css and style to make it more clean to read.
Before anything i changed somethings like i'm not using ng-flow anymore, it's purely angularjs and javascript, and i'm encoding the file to Base64 and decoding it on my server side.
HTML:
<div class="row">
<div class="col-sm-10">
<table>
<tr>
<td ng-repeat="image in images">
<div>
<img id="imagePreview{{$index}}" src="#" alt="" />
</div>
</td>
</tr>
</table>
</div>
<div class="col-sm-2 text-right">
<input type="file" id="img" />
<button ng-click="addImage()" type="button">ADD</button>
</div>
</div>
AngularJS Controller:
$scope.images = [];
//Don't let the same file to be added again
$scope.removeImage = function (index) {
$scope.images.splice(index, 1);
}
//Add new file to $scope.images
$scope.addImage = function () {
var
reader = new FileReader(),
$img = $("#img")[0],
index = $scope.images.length;
reader.onload = function (e) {
if ($scope.images.indexOf(e.target.result) > -1) return;
$scope.images.push(e.target.result);
if (!$scope.$$phase) $scope.$apply();
$("#imagePreview" + index).attr('src', e.target.result);
$scope.uploadImage(index);
}
reader.readAsDataURL($img.files[0]);
};
And here it is how to get the files converted to Base64:
$scope.uploadImage = function (index) {
var res = $scope.images[index];
//{...} Your code here, method call etc.
}
I tried tweaking the CSS coding and no prevail. Things i want:
search box with border radius of 5px
enlarge the search icon with out getting it dispalced
both search box and search icon evenly placed around the div
HTML CODE:
<div class="search"
<div class="searchbox">
<form action="/search" method="get" class="search_form">
<input type="text" value="Search Blog..." class="search_text" name="q">
<input type="image" src="http://s25.postimg.org/d3fu892zz/search_button_without_text_md.png" height="20" width="20"class="button">
</form>
</div>
</div>
CSS CODE:
.search{position:fixed;
height:25px;
width:194px;
top:189px;
left:14px;
border:2px solid black;
background-color:black;
border-radius:10px;
padding-left:2px;
padding-bottom:4px;
opacity:.8;}
Notice: Your class="search" div is not closed !!
Here is the code that should work and fullfill all the three conditions of yours
<div class="search">
<div class="searchbox">
<form action="/search" method="get" class="search_form">
<input type="text" value="Search Blog..." class="search_text" name="q">
<input type="image" src="http://i42.tinypic.com/fayl43.png" class="button">
</form>
</div>
Css Code:
.search{position:absolute;
height:28px;
width:190px;
top:140px;
left:100px;
border:2px solid black;
background-color:black;
border-radius:10px;
padding-left:2px;
padding-bottom:4px;
opacity:.8;
}
form#input{
display:inline-block;
}
.searchbox{
}
.search_text{
margin-top:4px;
margin-left:5px;
border-radius:5px;
text-align:center;
}
.button{
margin-top:5px;
margin-left:2px;
position:absolute;
height:20px;
width:20px;
}
.button:hover{
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
-o-transform:scale(1.3);
opacity: 3;
}
Working JSfiddle Demo - http://jsfiddle.net/vg8Mn/
Hope this helps :)
Is there any way to add buttons to TitlePane header(right side of title bar), so that i can do some operations(download,delete...)
Thanks in advance.
dijit TitlePane header contains the following
<div class="dijitTitlePaneTitleFocus" data-dojo-attach-point="focusNode" aria-pressed="true" role="button" aria-controls="dijit_TitlePane_0_pane" tabindex="0">
<span data-dojo-attach-point="arrowNode" class="dijitInline dijitArrowNode" role="presentation"></span><span data-dojo-attach-point="arrowNodeInner" class="dijitArrowNodeInner">-</span><span data-dojo-attach-point="titleNode" class="dijitTitlePaneTextNode" style="user-select: none;">Rule</span>
<span class="dijit dijitReset dijitInline dijitButton" role="presentation" widgetid="dijit_form_Button_1">
<span class="dijitReset dijitInline dijitButtonNode" data-dojo-attach-event="ondijitclick:__onClick" role="presentation">
<span class="dijitReset dijitStretch dijitButtonContents" data-dojo-attach-point="titleNode,focusNode" role="button" aria-labelledby="dijit_form_Button_1_label" tabindex="0" id="dijit_form_Button_1" style="user-select: none;">
<span class="dijitReset dijitInline dijitIcon dijitNoIcon" data-dojo-attach-point="iconNode"></span><span class="dijitReset dijitToggleButtonIconChar"></span>
<span class="dijitReset dijitInline dijitButtonText" id="dijit_form_Button_1_label" data-dojo-attach-point="containerNode">x</span></span></span></span>
</div>
As you see there are several attach points we can reference.
To add any item, even a dijit or custom widget do the following to place items after the last in the focusNode attach point (note: you have to style it correctly in order for items to appear in the position you want)
var myTitlePane = new TitlePane({ title: "TitlePane" });
var deleteButton = new Button({
label: 'x',
onClick: function () {
//do something here like delete the titlepane
//alert();
}
});
deleteButton.placeAt(rulesTitlePane.focusNode);
This will produce something that looks like this,
Or you can replace everything and create whatever you want in the focusNode.
There is. I was able to do it using the .placeAt() method in the added dijit's creation, such as below:
In index.htm
<div id="divMap"></div>
In main.js within callback
ready (function() {
var ttpMyTitlePane = new TitlePane({
title: 'My Title'
});
divMenu.appendChild(ttpMyTitlePane.domNode);
var btnMyButton = new Button({
label: 'ButtonText',
onClick: function() {
// do stuff
}
}).placeAt(ttpMyTitlePane.domNode);
}