Skip to content
This repository has been archived by the owner on May 4, 2022. It is now read-only.

Compact widget directive #418

Merged
merged 4 commits into from
Apr 28, 2017
Merged

Compact widget directive #418

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4cfd575
Adds compact widget card directive
vertein Apr 28, 2017
70f24ce
Removal of widget may be necessary
vertein Apr 28, 2017
acc4a5f
Removes uneeded remove button in compact widget dir
vertein Apr 28, 2017
ae273bb
Adds title into aria label of info button
vertein Apr 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 79 additions & 0 deletions uw-frame-components/css/buckyless/widget.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -421,6 +421,85 @@
}
}

.list-content {
position: relative;
margin: 5px;
background: #f3f3f3;
border-radius: 3px;
height: 150px;
color: #333;
text-align: center;

&:hover {
cursor: pointer;
}

a {
display: block;
height: 100%;
box-shadow: 0 2px 0 #ddd;
border-radius: 4px;
transition: @background-transition;

&:hover {
background-color: #f8f8f8;
box-shadow: 0 3px 0 #ddd;
}
}

h4 {
font-size: 1.2em;
margin: 0;
color: #333;
padding: 0 5px;
}

div {
display: inline-block;
float: left;
}

.icon-container {
width: 100%;
height: 67%;

i {
color: #333;
vertical-align: middle;
padding: 30px 10px;
font-size: 50px;
}
}

.list-item-container {
display: table;
width: 100%;
height: 33%;

h4 {
display: table-cell;
vertical-align: middle;
}
}
}

.add-favorites {
background: transparent;
border: 1px dashed #ccc;
display: flex;
justify-content: center;
align-items: center;

&:hover {
border: 1px solid #f8f8f8;
}

a {
transition: @background-transition;
box-shadow: 0 0 0 transparent;
}
}

//
.widget-body {
.input-group {
Expand Down
15 changes: 15 additions & 0 deletions uw-frame-components/portal/widgets/directives.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,21 @@ define(['angular', 'require'], function(angular, require) {
controller: 'WidgetCardController'
};
});

/**
Just the widget card -- gets the widget type from the scope
**/
app.directive('compactWidget', function() {
return {
restrict: 'E',
transclude: true,
scope: {
fname: '@'
},
templateUrl: require.toUrl('./partials/compact-widget-card.html'),
controller: 'WidgetCardController'
};
});

app.directive('widgetIcon', function() {
return {
Expand Down
17 changes: 17 additions & 0 deletions uw-frame-components/portal/widgets/partials/compact-widget-card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<md-card class="list-content" id="widget-id-{{::widget.nodeId}}">
<md-button class="widget-action widget-info md-icon-button" aria-label="see a brief description of this app">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

aria-label is good. As I understand it it would be better if the label included the name of the app that one would see a brief description of, so that screen reader user has more context in consuming that label.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch. I just copied and pasted a partial from before. It's always good to be better. Updated.

<md-tooltip md-direction="top" class="widget-action-tooltip">
{{widget.description}}
</md-tooltip>
<md-icon>info</md-icon>
</md-button>
<div ng-transclude id="widget-removal"></div>
<a aria-labelledby="appTitle_widget.title-{{::widget.nodeId}}" tabindex="0" ng-href="{{widget.url}}" target="{{::widget.target}}">
<div class="icon-container">
<widget-icon></widget-icon>
</div>
<div class="list-item-container">
<h4 id="appTitle_widget.title-{{::widget.nodeId}}">{{ ::widget.title }}</h4>
</div>
</a>
</md-card>