I have built two widgets in Apostrophe CMS :
Multi-Column Widget which has the flexbox class applied and serves up an Add-column widget which in turn serves up richtext, etc that is intended to flex out with however many Add-Columns inserted into the Multi-Column widget. Problem is it all gets a bit funky. The editor UI goes a bit insane with a horizontal layout, drag and drop sometimes duplicates and looses content, you have to really try hard to understand what is being selected.
Is there any tools or tips on working with this type of layout?
index.js for multiple-column widget
======================================
module.exports = {
extend: 'apostrophe-widgets',
label: 'Multiple Column Layout',
contextualOnly: true,
addFields: [
{
name: 'multiColContainer',
type: 'area',
label: 'Multiple Column Container',
}
]
};
widget.html for multiple-column-widget
======================================
<div class="multiple-column">
{{ apos.area(data.widget, 'multiColContainer', {
widgets: {
'add-column': {}
}
}) }}
</div>
index.js for add-column-widget
==============================
module.exports = {
extend: 'apostrophe-widgets',
label: 'Add Column',
contextualOnly: true,
addFields: [
{
name: 'addColumn',
type: 'area',
label: 'Column',
}
]
};
widget.html for add-column-widget
=================================
<div class="add-column">
{{ apos.area(data.widget, 'addColumn', {
widgets: {
'apostrophe-images': {},
'link': {},
'apostrophe-video':{},
'apostrophe-rich-text': {
toolbar: [ 'Styles', 'Bold', 'Italic', 'Link', 'Unlink', 'Table', 'BulletedList', 'Blockquote', 'Strike', 'Subscript', 'Superscript'],
styles: [
{ name: 'Heading', element: 'h1' },
{ name: 'Subheading', element: 'h2' },
{ name: 'Title', element: 'h3' },
{ name: 'Small Title', element: 'h4' },
{ name: 'Paragraph', element: 'p' }
]
}
}
}) }}
</div>
changes to site.less for displaying flex and to help out during editing
=======================================================================
.multiple-column {
.apos-area-widgets, // proper context for logged-in user
.apos-area { // proper context for logged-out user
display: flex;
justify-content: space-around;
}
.apos-area-widget-wrapper {
flex-grow: 1;
flex-basis: 0;
}
}
// try and help to identify what is what
.multiple-column {
.apos-area-widgets{
:hover{border:1px dashed red;}
.add-column{
:hover{border:1px dashed greenyellow;}
}
}
}
Related
I am using Pivot and PivotItem from Office UI Fabric to display my content in tabs. Currently when the tab renders, all the tabs are left aligned.
I need to display the tabs with equal width so that they occupy the 100% width of the page.
Below is the code for Pivot.
<Pivot linkFormat={PivotLinkFormat.tabs} linkSize={PivotLinkSize.large} styles={pivotStyles}>
<PivotItem headerText="Foo">
<Label>Pivot #1</Label>
</PivotItem>
<PivotItem headerText="Bar">
<Label>Pivot #2</Label>
</PivotItem>
<PivotItem headerText="Bas">
<Label>Pivot #3</Label>
</PivotItem>
<PivotItem headerText="Biz">
<Label>Pivot #4</Label>
</PivotItem>
</Pivot>
Below is the code that I could figure out to add styles to Pivot. But we do not have styles attribute for PivotItem.
const pivotStyles:IPivotStyles = {
link: {},
linkContent: {},
linkIsSelected: {},
text: {},
icon: {},
count: {},
root: {
//background: DefaultPalette.greenDark
}
};
How can I apply style to PivotItem so that I can add width to it?
PivotItem styles could be adjusted via Pivot.styles property, at least the following styles could be set:
link
linkContent
linkIsSelected
Example
The following example demonstrates how to set fixed width for pivot link:
const pivotStyles: Partial<IStyleSet<IPivotStyles>> = {
link: {
width: "300px"
},
linkIsSelected: {
width: "300px"
}
};
where
const tabsItems = [
{
content: "Pivot #1",
header: "My Files"
},
{
content: "Pivot #2",
header: "Recent"
},
{
content: "Pivot #3",
header: "Shared with me"
}
];
export const PivotBasicExample: React.FunctionComponent = () => {
return (
<Pivot styles={pivotStyles}>
{tabsItems.map((tabItem,idx) => (
<PivotItem key={idx} headerText={tabItem.header}>
<Label>{tabItem.content}</Label>
</PivotItem>
))}
</Pivot>
);
};
I'm trying to put an image background to my form panel, it doesn't display anything, I'm using the code in this tutoriel:
http://miamicoder.com/2012/adding-a-login-screen-to-a-sencha-touch-application-part-2/
here is my login view:
Ext.define('MyApp2.view.Login', {
extend: 'Ext.form.Panel',
alias: "widget.loginview",
requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Img', 'Ext.util.DelayedTask'],
config: {
title: 'Login',
cls:'panelBackground',
// bodyStyle:'background-color:#fff;padding: 10px',
items: [
{
xtype: 'label',
html: 'Login failed. Please enter the correct credentials.',
itemId: 'signInFailedLabel',
hidden: true,
hideAnimation: 'fadeOut',
showAnimation: 'fadeIn',
style: 'color:#990000;margin:5px 0px;'
},
{
xtype: 'fieldset',
title: 'Login Example',
items: [
{
xtype: 'textfield',
placeHolder: 'Username',
itemId: 'userNameTextField',
name: 'userNameTextField',
required: true
},
{
xtype: 'passwordfield',
placeHolder: 'Password',
itemId: 'passwordTextField',
name: 'passwordTextField',
required: true
}
]
},
{
xtype: 'button',
itemId: 'logInButton',
ui: 'action',
padding: '10px',
text: 'Log In'
}
],
listeners: [{
delegate: '#logInButton',
event: 'tap',
fn: 'onLogInButtonTap'
}]
},
onLogInButtonTap: function() {
var me = this,
usernameField = me.down('#userNameTextField'),
passwordField = me.down('#passwordTextField'),
label = me.down('#signInFailedLabel'),
username = usernameField.getValue(),
password = passwordField.getValue();
label.hide();
// Using a delayed task in order to give the hide animation above
// time to finish before executing the next steps.
var task = Ext.create('Ext.util.DelayedTask', function() {
label.setHtml('');
me.fireEvent('signInCommand', me, username, password);
usernameField.setValue('');
passwordField.setValue('');
});
task.delay(500);
},
showSignInFailedMessage: function(message) {
var label = this.down('#signInFailedLabel');
label.setHtml(message);
label.show();
}
});
and my app.css:
.panelBackground
{
background-image: url(http://localhost:8383/MyApp2/resources/images/login.png) !important;
background-repeat: no-repeat !important;
background-size: 100% 100% !important;
}
Ps: I've tried to put it in the index.html, but it seems that nothing is changing, what I'm doing wrong?
The problem is Ext.form.Panel, it renders a scroll container above the background (You can check it in the Chrome Debugger). But i don't know how to disable that.
But when you change it to
Ext.define('MyApp2.view.Login', {
extend: 'Ext.Container',
alias: "widget.loginview",
the code is going to work.
I had a look on the rest of your code, there will be no problem when using a container instead of a form panel.
I am also using same code and tring to set image in background of panel but i am getting blank border on image.
I want to set image in full screen.
Is your images fitted on full screen if yes then please post your code.
I tried to get some custom css to customize my grid in ExtJS.
I was struggling with the cls input, but then I found an other way which worked.
What I want is to highlight a whole line regarding a value
Here is my code in the View :
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'Test ',
store: 'Users',
initComponent: function() {
this.columns = [
{header: 'ID du CPE', width: 150, dataIndex: 'ID', flex: 0},
{header: 'Modèle', dataIndex: 'Modele', flex: 1},
{header: 'Firmware', dataIndex: 'firmware', flex: 1},
{header: 'Année MeS', dataIndex: 'annee', flex: 1},
{header: 'Alerte', dataIndex: 'statut', hidden: true, hideable: false, flex: 0},
{header: 'Etat', id:'CC', dataIndex: 'alerte', flex: 0, width: 100}
and there is my code in CSS :
.x-grid-table .x-grid-row-selected .x-grid-cell-CC {
background-color: #1DAE00 !important; }
.x-grid-table .x-grid-row-over .x-grid-cell-CC {
background-color: #1DAE00 !important; }
For the moment, it works (the id=CC creates the link with the css file).
When I pass my mouse over a line or click on a line, the value concerned in the column "Etat" are highlighted in green.
I tried the cls method but I didn't succeed to make it work.
The main reason, in all the tutorials I found, the classical way to do it is :
Ext.create('Ext.grid.Panel', {
cls: 'CC',
But in my case, I have :
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
and I don't know where to put the cls attribute. Itried several ways but I always end up with an error.
So here's my two questions :
1- how to highlights the whole line (not only a line from a single column)
2- how to automatically highlight a whole line regarding a value contained in this one ?
Sorry if it's not very clear :s.
You need to provide a getRowClass method in the grid's view configuration. Like this:
,viewConfig: {
getRowClass: function(record) {
return record.get('highlight')
? 'highlight'
: '';
}
}
Here's a complete example on how to do that in class extended from grid panel:
Ext.define('My.Grid', {
extend: 'Ext.grid.Panel'
,store: {
fields: ['foo', 'bar', 'highlight']
,proxy: {
type: 'memory'
,reader: 'array'
}
,data: [[1, 'Bar', false],[2, 'Baz', false],[3, 'Bat', true]]
}
,columns: [
{dataIndex: 'foo', text: "Foo"}
,{dataIndex: 'bar', text: "Bar"}
,{dataIndex: 'highlight', text: "Highlighted"}
]
,viewConfig: {
getRowClass: function(record) {
return record.get('highlight')
? 'highlight'
: '';
}
}
});
That would work with the follwing CSS rule. Note the selector to catch highlighted rows (.x-grid-row.highlight with no spaces), and the fact that the background is applied to background TD, not directly to the TR element, which would not work.
.x-grid-row.highlight .x-grid-td {
background-color: palegreen;
}
Thanks to rixo, here's the code which makes it work !
viewConfig: {
getRowClass: function(record) {
var red = record.get('statut') // shows if a CPE is dead or not (HS = Dead)
if (red == 'HS') {
return 'highlight'
}
}
},
I'm using Redactor and need to dynamically add elements to a custom dropdown menu. I can't find any way of doing this in the documentation - does anyone know if this is possible?
Yes, it's possible if you use this:
$('#redactor').redactor({
focus: true,
buttonsAdd: ['|', 'button1'],
buttonsCustom: {
button1: {
title: 'Button',
callback: function(buttonName, buttonDOM, buttonObject) { /* … */ },
dropdown: {
alignleft: {
title: lang.align_left,
func: 'alignmentLeft'
},
aligncenter: {
title: lang.align_center,
func: 'alignmentCenter'
}
}
}
}
});
how can i change the button-text ("Done" and "Cancel") in the selectfield to german or in any text i like?
xtype: 'selectfield',
name: 'sector',
width: 150,
prependText: 'Sector:',
options: [
{text: 'Alle Termine', value: 'alldates'},
]
one easy possibilty would be to override the defaults of the picker, e.g.:
Ext.override(Ext.Picker, {
doneButton: 'Fertig',
cancelButton: 'Abbrechen'
});
You can extend Ext.form.Select to allow you to apply your own configuration to the picker it uses.
Ext.ns('MySite.ux.form');
MySite.ux.form.Select = Ext.extend(Ext.form.Select , {
getPicker: function() {
if (!this.picker) {
this.picker = new Ext.Picker(Ext.apply({
slots: [{
align : 'center',
name : this.name,
valueField : this.valueField,
displayField: this.displayField,
value : this.getValue(),
store : this.store
}],
listeners: {
change: this.onPickerChange,
scope: this
}
}, this.pickerConfig));
}
return this.picker;
}
});
Ext.reg('myselectfield', MySite.ux.form.Select);
And your selectfield configuration might look like this:
{
xtype: 'myselectfield',
name: 'sector',
label: 'Sector',
pickerConfig: {
doneButton: 'Fertig',
cancelButton: 'Abbrechen'
}
}