Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Project embed UI #4793

Merged
merged 8 commits into from
Mar 23, 2019
Merged

Project embed UI #4793

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
72aab48
WIP
Mar 18, 2019
9b3841c
Implement project embed page
Mar 22, 2019
810932f
Handle multiple pages of layer analyses
Mar 22, 2019
1bbc54d
Update changelog
Mar 22, 2019
718dc4c
Remove test from global.js
Mar 22, 2019
483692f
Add mapToken support
Mar 22, 2019
24568e5
Fix changelog
Mar 22, 2019
debfb0e
Update CHANGELOG.md
Mar 22, 2019
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
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,8 @@ project/plugins/project/
.worksheet
.ensime/*
.ensime
.metals/*
.metals
api-server/.ensime
api-server/.ensime_cache/*
/deployment/ansible/raster-foundry.retry
Expand Down
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
- Added project settings pages for v2 UI [\#4637](https://github.com/raster-foundry/raster-foundry/pull/4637)
- Added project layer color-mode UI [\#4706](https://github.com/raster-foundry/raster-foundry/pull/4706)
- Added project layer color-correction UI [\#4722](https://github.com/raster-foundry/raster-foundry/pull/4722)
- Added project embed UI [\#4793](https://github.com/raster-foundry/raster-foundry/pull/4793/files)
- Added single-band color-mode support to project layer color-mode UI [\#4728](https://github.com/raster-foundry/raster-foundry/pull/4728)
- Added owner query parameter to tools and tool-runs endpoints, support multiple owner qp's on applicable endpoints [\#4689](https://github.com/raster-foundry/raster-foundry/pull/4689)
- Added Rollbar error reporting to backsplash [\#4691](https://github.com/raster-foundry/raster-foundry/pull/4691)
Expand Down
3 changes: 2 additions & 1 deletion app-frontend/config/webpack/global.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,7 +321,8 @@ module.exports = function (_path) {
),
MAP_CENTER: JSON.stringify([-6.8, 39.2]),
MAP_ZOOM: 5,
PLATFORM_USERS: PLATFORM_USERS
PLATFORM_USERS: PLATFORM_USERS,
EMBED_URI: JSON.stringify('')
},
'HELPCONFIG': {
API_DOCS_URL: JSON.stringify('https://docs.rasterfoundry.com/'),
Expand Down
3 changes: 2 additions & 1 deletion app-frontend/config/webpack/overrides.js.template
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,8 @@ module.exports = function (_path) {
LOGOURL: JSON.stringify(false),
FAVICON_DIR: JSON.stringify('/favicon'),
FEED_SOURCE: JSON.stringify(FEED_SOURCE),
PLATFORM_USERS: PLATFORM_USERS
PLATFORM_USERS: PLATFORM_USERS,
EMBED_URI: JSON.stringify('')
},
'HELPCONFIG': {
HELP_DOCS: JSON.stringify(HELP_DOCS)
Expand Down
18 changes: 8 additions & 10 deletions app-frontend/src/app/components/filters/ingestedFilter/ingestedFilter.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
<div class="filter">
<label>Image Status</label>
<div class="input-group page-card-header cozy">
<div class="input-group page-card-header cozy">
<div class="flex-fill help-text font-size-tiny">
Include images that require processing before use in analyses or color corrections
</div>
<button
class="btn select-button btn-tiny"
ng-click="$ctrl.onToggleFilter()"
>
<button class="btn select-button btn-tiny" ng-click="$ctrl.onToggleFilter()">
<label class="checkbox" ng-class="{active: !$ctrl.filterData.ingested}">
<input type="checkbox"
ng-checked="$ctrl.filterData.ingested"
ng-click="$ctrl.onToggleFilter()"
<input
type="checkbox"
ng-checked="$ctrl.filterData.ingested"
ng-click="$ctrl.onToggleFilter()"
/>
</label>
<span>{{$ctrl.filter.label}}</span>
</button>
<span>{{ $ctrl.filter.label }}</span>
</button>
</div>
</div>
273 changes: 273 additions & 0 deletions app-frontend/src/app/components/pages/project/settings/embed/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,273 @@
<div class="sidebar">
<rf-list-item ng-repeat="layer in $ctrl.layerList track by layer.id">
<item-selector>
<rf-list-item-selector
id="layer.id"
selected="$ctrl.isSelected(layer)"
on-select="$ctrl.onSelect(layer)"
color="layer.colorGroupHex"
></rf-list-item-selector
></item-selector>
<item-title>
<strong ng-attr-title="{{ layer.name }}">{{ layer.name }}</strong>
</item-title>
<item-date>{{ layer.createdAt | date }}</item-date>
</rf-list-item>
<rf-pagination-controls
pagination="$ctrl.pagination"
is-loading="$ctrl.currentQuery"
on-change="$ctrl.fetchPage(value)"
ng-show="!$ctrl.currentQuery && !$ctrl.fetchError"
></rf-pagination-controls>
</div>
<div class="main page-content-container">
<div ng-if="!$ctrl.selectedLayers.size" class="page-card">
<div class="page-card-content center">
<span class="modal-icon">
<i class="icon-info"></i>
</span>
<h3>Select layers to start building your embed</h3>
<p>
Choose at least one layer to start selecting the base and analysis layers you'd like
to embed.
</p>
</div>
</div>

<div class="page-header" ng-if="$ctrl.selectedLayers.size">
<h3>
Embed
</h3>
</div>
<div
ng-if="$ctrl.selectedLayers.size && !($ctrl.embedParameters.layers.size || $ctrl.embedParameters.analyses.size)"
class="page-card"
>
<div class="page-card-content center">
<span class="modal-icon">
<i class="icon-info"></i>
</span>
<h3>Select layers for the embed</h3>
<p>
Your embed code isn't ready yet. You'll be able to adjust the embed settings once
some layers or analyses are selected.
</p>
</div>
</div>
<div
class="page-card"
ng-if="$ctrl.selectedLayers.size && ($ctrl.embedParameters.layers.size || $ctrl.embedParameters.analyses.size)"
>
<div class="page-card-section">
<label>Embed type</label>
<div class="input-group">
<label
class="radio"
ng-click="$ctrl.onEmbedTypeChange('comparison')"
ng-class="{'active': $ctrl.embedParameters.type === 'comparison'}"
ng-disabled="$ctrl.embedParameters.type !== 'comparison'"
>
<input
type="radio"
name="comparison"
ng-checked="$ctrl.embedParameters.type === 'comparison'"
ng-disabled="$ctrl.embedParameters.type !== 'comparison'"
/>
Comparison
</label>
<label
class="radio"
ng-click="$ctrl.onEmbedTypeChange('single')"
ng-class="{'active': $ctrl.embedParameters.type === 'single'}"
ng-disabled="$ctrl.embedParameters.type !== 'single'"
>
<input
type="radio"
name="single"
ng-checked="$ctrl.embedParameters.type === 'single'"
ng-disabled="$ctrl.embedParameters.type !== 'single'"
/>
Single pane
</label>
</div>
</div>
<div class="page-card-section">
<div class="side-by-side">
<div class="form-group">
<label for="published-link" ng-if="$ctrl.embedParameters.type === 'comparison'">
Left pane default
<i
class="icon-warning color-warning"
ng-if="!$ctrl.embedParameters.pane1"
></i>
</label>
<label for="published-link" ng-if="$ctrl.embedParameters.type === 'single'">
Default layer or analysis
<i
class="icon-warning color-warning"
ng-if="!$ctrl.embedParameters.pane1"
></i>
</label>
<div class="input-group">
<select
class="form-control"
ng-model="$ctrl.embedParameters.pane1"
ng-change="$ctrl.updateEmbedUrl()"
>
<optgroup label="Layers" ng-if="$ctrl.embedParameters.layers.size">
<option
ng-repeat="layer in $ctrl.embedParameters.layers.toJS()"
value="{{ layer.id }}"
>
{{ layer.name }}
</option>
</optgroup>
<optgroup label="Analyses" ng-if="$ctrl.embedParameters.analyses.size">
<option
ng-repeat="analysis in $ctrl.embedParameters.analyses.toJS()"
value="{{ analysis.id }}"
>
{{ analysis.name }}
</option>
</optgroup>
</select>
</div>
</div>
<div class="form-group" ng-if="$ctrl.embedParameters.type === 'comparison'">
<label for="published-link">
Right pane default
<i
class="icon-warning color-warning"
ng-if="!$ctrl.embedParameters.pane2"
></i>
</label>
<div class="input-group">
<select
class="form-control"
ng-model="$ctrl.embedParameters.pane2"
ng-change="$ctrl.updateEmbedUrl()"
>
<optgroup label="Layers" ng-if="$ctrl.embedParameters.layers.size">
<option
ng-repeat="layer in $ctrl.embedParameters.layers.toJS()"
value="{{ layer.id }}"
>
{{ layer.name }}
</option>
</optgroup>
<optgroup label="Analyses" ng-if="$ctrl.embedParameters.analyses.size">
<option
ng-repeat="analysis in $ctrl.embedParameters.analyses.toJS()"
value="{{ analysis.id }}"
>
{{ analysis.name }}
</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>
<div class="page-card-section">
<div class="form-group">
<label for="published-link">Embed code</label>
<div class="input-group">
<textarea
class="form-control"
rows="4"
ng-value="$ctrl.embedUrl"
readonly
></textarea>
<button
class="btn btn-link btn-square btn-icon"
clipboard
text="$ctrl.embedUrl"
ng-disabled="!($ctrl.embedParameters.layers.size || $ctrl.embedParameters.analyses.size)"
>
<i
class="icon-copy color-base"
aria-hidden="true"
ng-show="$ctrl.copyType !== 'page'"
>
<span class="sr-only">Copy URL</span>
</i>
<i
class="icon-check color-green"
aria-hidden="true"
ng-show="$ctrl.copyType === 'page'"
></i>
</button>
</div>
</div>
</div>
</div>
<div class="page-header" ng-if="$ctrl.selectedLayers.size">
<h3>
Layers and analyses
</h3>
</div>
<div class="page-card" ng-if="$ctrl.selectedLayers.size">
<div class="page-card-list">
<div class="page-card-list-item header">
<strong>Name</strong>
</div>
<div ng-repeat="layer in $ctrl.selectedLayers.toArray()">
<div class="page-card-list-item">
<div class="flex-fill">{{ layer.name }}</div>
<div>
<button
class="btn btn-tiny btn-ghost"
ng-if="!$ctrl.embedParameters.layers.has(layer)"
ng-click="$ctrl.onEmbedLayerToggle(layer)"
>
Add to embed
</button>
<button
class="btn btn-tiny btn-ghost"
ng-if="$ctrl.embedParameters.layers.has(layer)"
ng-click="$ctrl.onEmbedLayerToggle(layer)"
>
Remove from embed
</button>
</div>
</div>
<div
class="page-card-list-item"
ng-repeat="analysis in $ctrl.layerAnalyses[layer.id].items"
ng-if="$ctrl.layerAnalyses[layer.id].items"
>
<div class="flex-fill">{{ analysis.name }}</div>
<div>
<button
class="btn btn-tiny btn-ghost"
ng-if="!$ctrl.embedParameters.analyses.has(analysis)"
ng-click="$ctrl.onEmbedAnalysisToggle(analysis)"
>
Add to embed
</button>
<button
class="btn btn-tiny btn-ghost"
ng-if="$ctrl.embedParameters.analyses.has(analysis)"
ng-click="$ctrl.onEmbedAnalysisToggle(analysis)"
>
Remove from embed
</button>
</div>
</div>
<div
class="page-card-list-item text-center"
ng-if="$ctrl.layerAnalyses[layer.id].pagination.hasNext"
>
<div class="flex-fill">
<button
class="btn btn-tiny btn-ghost"
ng-click="$ctrl.fetchAnalysesForLayer(layer)"
>
Load more analyses for {{ layer.name }}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
Loading