Updates yellow color and notices box-shadow.

This commit is contained in:
mateuswetah 2023-01-20 15:36:21 -03:00
parent f7008c2b5f
commit e944aa7c82
12 changed files with 60 additions and 98 deletions

View File

@ -1571,25 +1571,6 @@
</option>
</b-select>
</div>
<transition name="filter-item">
<div
v-if="selectedMarkerIndexes.length"
class="geocoordinate-panel--input">
<p>{{ selectedMarkerIndexes.length == 1 ? $i18n.get('label_one_selected_location') : $i18n.getWithVariables('label_%s_selected_locations', [ selectedMarkerIndexes.length ]) }}. <a @click="clearSelectedMarkers()">{{ $i18n.get('label_clean') }}</a></p>
</div>
</transition>
<section
v-if="!geocoordinateMetadata.length"
class="section">
<div class="content has-text-grey has-text-centered">
<p>
<span class="icon is-large">
<i class="tainacan-icon tainacan-icon-30px tainacan-icon-public" />
</span>
</p>
<p>{{ $i18n.get('info_empty_geocoordinate_metadata_list') }}</p>
</div>
</section>
</div>
</l-control>
<l-control
@ -2051,9 +2032,9 @@ export default {
setTimeout(() => {
if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject ) {
if (this.itemsLocations.length == 1)
this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 0] });
this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16, paddingTopLeft: [0, 0] });
else
this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 0] });
this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16, paddingTopLeft: [0, 0] });
}
}, 500)
},
@ -2431,9 +2412,9 @@ export default {
this.selectedMarkerIndexes = [];
if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject ) {
if (this.itemsLocations.length == 1)
this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 0] });
this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16, paddingTopLeft: [0, 0] });
else
this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 0] });
this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16, paddingTopLeft: [0, 0] });
}
},
showItemByLocation(index) {
@ -2441,7 +2422,7 @@ export default {
this.selectedMarkerIndexes = [];
this.selectedMarkerIndexes.push(index);
if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject )
this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds( [ this.itemsLocations[index].location ], { animate: true, maxZoom: 12, paddingTopLeft: [0, 286] });
this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds( [ this.itemsLocations[index].location ], { animate: true, maxZoom: 16, paddingTopLeft: [0, 286] });
},
showLocationsByItem(item) {
this.mapSelectedItemId = item.id;
@ -2456,9 +2437,9 @@ export default {
if ( selectedLocationsByItem.length) {
if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject ) {
if (selectedLocationsByItem.length > 1)
this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 286] });
this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16, paddingTopLeft: [0, 286] });
else
this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 286] });
this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16, paddingTopLeft: [0, 286] });
}
} else {
this.$buefy.snackbar.open({

View File

@ -11,20 +11,8 @@
<b-input
name="mapProvider"
v-model="mapProvider"
@input="emitValues()" />
</b-field>
<b-field :addons="false" >
<label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-geocoordinate', 'extra_tile_layers') }}
<help-button
:title="$i18n.getHelperTitle('tainacan-geocoordinate', 'extra_tile_layers')"
:message="$i18n.getHelperMessage('tainacan-geocoordinate', 'extra_tile_layers')" />
</label>
<b-input
name="extraTileLayer"
v-model="extraTileLayer"
@input="emitValues()" />
@input="emitValues()"
placeholder="https://tile.openstreetmap.org/{z}/{x}/{y}.png" />
</b-field>
<b-field
@ -33,13 +21,14 @@
{{ $i18n.getHelperTitle('tainacan-geocoordinate', 'attribution') }}
<span>&nbsp;*&nbsp;</span>
<help-button
:title="$i18n.getHelperTitle('tainacan-geocoordinate', 'attribution')"
:message="$i18n.getHelperMessage('tainacan-geocoordinate', 'attribution')" />
:title="$i18n.getHelperTitle('tainacan-geocoordinate', 'attribution')"
:message="$i18n.getHelperMessage('tainacan-geocoordinate', 'attribution')" />
</label>
<b-input
name="attribution"
v-model="attribution"
@input="emitValues()" />
@input="emitValues()"
placeholder="© OpenStreetMap contributors" />
</b-field>
@ -49,15 +38,16 @@
{{ $i18n.getHelperTitle('tainacan-geocoordinate', 'initial_zoom') }}
<span>&nbsp;*&nbsp;</span>
<help-button
:title="$i18n.getHelperTitle('tainacan-geocoordinate', 'initial_zoom')"
:message="$i18n.getHelperMessage('tainacan-geocoordinate', 'initial_zoom')" />
:title="$i18n.getHelperTitle('tainacan-geocoordinate', 'initial_zoom')"
:message="$i18n.getHelperMessage('tainacan-geocoordinate', 'initial_zoom')" />
</label>
<b-input
<b-numberinput
name="initialZoom"
v-model="initialZoom"
@input="emitValues()"
type="number"
step="1" />
:step="1"
:max="21"
:min="1" />
</b-field>
<b-field
@ -69,12 +59,13 @@
:title="$i18n.getHelperTitle('tainacan-geocoordinate', 'maximum_zoom')"
:message="$i18n.getHelperMessage('tainacan-geocoordinate', 'maximum_zoom')" />
</label>
<b-input
<b-numberinput
name="maximumZoom"
v-model="maximumZoom"
@input="emitValues()"
type="number"
step="1" />
:step="1"
:max="21"
:min="1" />
</b-field>
</section>
@ -96,18 +87,16 @@
},
created() {
if (this.value) {
this.mapProvider = this.value.map_provider || 'http://?';
this.extraTileLayer = this.value.extra_tile_layers || [];
this.attribution = this.value.attribution || '';
this.initialZoom = this.value.initial_zoom || 5;
this.maximumZoom = this.value.maximum_zoom || 12;
this.mapProvider = this.value.map_provider || 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
this.attribution = this.value.attribution || '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors';
this.initialZoom = Number(this.value.initial_zoom) || 5;
this.maximumZoom = Number(this.value.maximum_zoom) || 12;
}
},
methods: {
emitValues(){
this.$emit('input',{
map_provider: this.mapProvider,
extra_tile_layers: this.extraTileLayer,
attribution: this.attribution,
initial_zoom: this.initialZoom,
maximum_zoom: this.maximumZoom,

View File

@ -137,9 +137,6 @@
attribution() {
return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.attribution ? this.itemMetadatum.metadatum.metadata_type_options.attribution : '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors';
},
extraTileLayers() {
return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.extra_tile_layers ? this.itemMetadatum.metadatum.metadata_type_options.extra_tile_layers : [];
},
itemMetadatumIdentifier() {
return 'tainacan-item-metadatum_id-' + this.itemMetadatum.metadatum.id + (this.itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + this.itemMetadatum.parent_meta_id) : '');
},
@ -198,7 +195,7 @@
this.selected = Array.isArray(this.value) ? (this.value.length == 1 && this.value[0] == "" ? [] : this.value) : [this.value];
// Listens to window resize event to update map bounds
// We need to pass mapComoponentRef here instead of creating it inside the function
// We need to pass mapComponentRef here instead of creating it inside the function
// otherwise the listener would conflict when multiple geo metadata are inserted.
const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
eventBusItemMetadata.$on('itemEditionFormResize', () => this.handleWindowResize(mapComponentRef));

View File

@ -23,7 +23,6 @@ class GeoCoordinate extends Metadata_Type {
$this->set_description( __('Represents a geographical location that is determined by latitude and longitude coordinates.', 'tainacan') );
$this->set_default_options([
'map_provider' => 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
'extra_tile_layers' => [],
'attribution' => '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
'initial_zoom' => 5,
'maximum_zoom' => 12,
@ -43,12 +42,8 @@ class GeoCoordinate extends Metadata_Type {
public function get_form_labels(){
return [
'map_provider' => [
'title' => __( 'Tile provides', 'tainacan' ),
'description' => __( 'Link to the service used as source for displaying tile layers on the map', 'tainacan' ),
],
'extra_tile_layers' => [
'title' => __( 'Extra tile layer', 'tainacan' ),
'description' => __( 'The extra layer of blocks to be displayed on the map', 'tainacan' ),
'title' => __( 'Map Tiles provider', 'tainacan' ),
'description' => __( 'Link to the service used as source for displaying tile layers on the map.', 'tainacan' ),
],
'attribution' => [
'title' => __( 'Attribution', 'tainacan' ),
@ -101,6 +96,7 @@ class GeoCoordinate extends Metadata_Type {
public function get_value_as_html(\Tainacan\Entities\Item_Metadata_Entity $item_metadata) {
global $TAINACAN_BASE_URL;
$value = $item_metadata->get_value();
$options = $this->get_options();
if (
( is_string( $value ) && empty( $value ) ) ||
@ -111,7 +107,8 @@ class GeoCoordinate extends Metadata_Type {
$metadatum = $item_metadata->get_metadatum();
$item_metadatum_id = $metadatum->get_id();
$item_metadatum_id .= $metadatum->get_parent() ? ( $metadatum->get_parent() . '_parent_meta_id-') : '';
$zoom_geo_query = isset($options['initial_zoom']) ? ('z=' . $options['initial_zoom'] ) : '' ;
$return = '';
if ( $item_metadata->is_multiple() ) {
@ -125,7 +122,11 @@ class GeoCoordinate extends Metadata_Type {
$latitude = isset($coordinate_as_array[0]) ? $coordinate_as_array[0] : '';
$longitude = isset($coordinate_as_array[1]) ? $coordinate_as_array[1] : '';
$single_value = "<span class='tainacan-coordinates' data-latitude='{$latitude}' data-longitude='{$longitude}'><span>{$latitude}</span><span class='coordinates-separator'>,</span><span>{$longitude}</span></span>";
$single_value = "<a class='tainacan-coordinates' data-latitude='{$latitude}' data-longitude='{$longitude}' href='geo:{$latitude},{$longitude}?q={$latitude},{$longitude}&{$zoom_geo_query}'>
<span>{$latitude}</span>
<span class='coordinates-separator'>,</span>
<span>{$longitude}</span>
</a>";
$return .= empty($return)
? $prefix . $single_value . $suffix
: $separator . $prefix . $single_value . $suffix;
@ -136,20 +137,21 @@ class GeoCoordinate extends Metadata_Type {
$latitude = isset($coordinate_as_array[0]) ? $coordinate_as_array[0] : '';
$longitude = isset($coordinate_as_array[1]) ? $coordinate_as_array[1] : '';
$return .= "<span class='tainacan-coordinates' data-latitude='{$latitude}' data-longitude='{$longitude}'><span>{$latitude}</span><span class='coordinates-separator'>,</span><span>{$longitude}</span></span>";
$return .= "<a class='tainacan-coordinates' data-latitude='{$latitude}' data-longitude='{$longitude}' href='geo:{$latitude},{$longitude}?q={$latitude},{$longitude}&{$zoom_geo_query}'>
<span>{$latitude}</span>
<span class='coordinates-separator'>,</span>
<span>{$longitude}</span>
</a>";
}
wp_enqueue_style( 'tainacan-geocoordinate-item-metadatum', $TAINACAN_BASE_URL . '/assets/css/tainacan-gutenberg-block-geocoordinate-item-metadatum.css', array(), TAINACAN_VERSION);
$options = $this->get_options();
$options_as_strings = '';
foreach ( $options as $option_key => $option ) {
if ( is_array($option) )
$options_as_strings .= 'data-' . $option_key . '="' . json_encode($option) . '" ';
else if ( $option_key == 'attribution' )
$options_as_strings .= 'data-' . $option_key . '="' . htmlentities($option) . '" ';
else if ( $option_key == 'map_provider' )
$options_as_strings .= 'data-' . $option_key . '="' . esc_url($option) . '" ';
else
$options_as_strings .= 'data-' . $option_key . '="' . $option . '" ';
};

View File

@ -5,7 +5,7 @@
min-width: auto !important;
font-size: 0.75em;
border-radius: 3px;
box-shadow: 0 0 8px -6px rgba(0, 0, 0, 0.25);
box-shadow: 0 2px 7px -4px rgba(0, 0, 0, 0.65);
&.is-dark,
&.is-dark .button,

View File

@ -54,9 +54,9 @@ $green1-invert: findColorInvert($green1);
$green2: #25a189;
$green2-invert: findColorInvert($green2);
// Warning, used for warning messages
$yellow1: #fcebd9;
$yellow1: #fff7ee;
$yellow1-invert: findColorInvert($yellow1);
$yellow2: #e69810;
$yellow2: #bb7700;
$yellow2-invert: findColorInvert($yellow2);
// Text, no quite black

View File

@ -5,7 +5,7 @@
#tainacan-admin-view-mode-map,
#tainacan-view-mode-map {
position: relative;
//position: relative;
border: none;
border-left: 1px solid var(--tainacan-input-border-color);
float: right;

View File

@ -134,13 +134,6 @@
</option>
</b-select>
</div>
<transition name="filter-item">
<div
v-if="selectedMarkerIndexes.length"
class="geocoordinate-panel--input">
<p>{{ selectedMarkerIndexes.length == 1 ? $i18n.get('label_one_selected_location') : $i18n.getWithVariables('label_%s_selected_locations', [ selectedMarkerIndexes.length ]) }}. <a @click="clearSelectedMarkers()">{{ $i18n.get('label_clean') }}</a></p>
</div>
</transition>
<section
v-if="!geocoordinateMetadata.length"
class="section">
@ -441,9 +434,9 @@ export default {
setTimeout(() => {
if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
if (this.itemsLocations.length == 1)
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 0] });
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16, paddingTopLeft: [0, 0] });
else
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 0] });
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16, paddingTopLeft: [0, 0] });
}
}, 500)
},
@ -474,9 +467,9 @@ export default {
this.selectedMarkerIndexes = [];
if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
if (this.itemsLocations.length == 1)
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 0] });
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16, paddingTopLeft: [0, 0] });
else
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 0] });
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16, paddingTopLeft: [0, 0] });
}
},
showItemByLocation(index) {
@ -484,7 +477,7 @@ export default {
this.selectedMarkerIndexes = [];
this.selectedMarkerIndexes.push(index);
if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject )
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( [ this.itemsLocations[index].location ], { animate: true, maxZoom: 12, paddingTopLeft: [0, 286] });
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( [ this.itemsLocations[index].location ], { animate: true, maxZoom: 16, paddingTopLeft: [0, 286] });
},
showLocationsByItem(item) {
this.mapSelectedItemId = item.id;
@ -499,9 +492,9 @@ export default {
if ( selectedLocationsByItem.length) {
if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
if (selectedLocationsByItem.length > 1)
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 286] });
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16, paddingTopLeft: [0, 286] });
else
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 286] });
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 16, paddingTopLeft: [0, 286] });
}
} else {
this.$buefy.snackbar.open({

View File

@ -43,7 +43,7 @@ export default (element) => {
const attribution = element.hasAttribute('data-attribution') ? element.getAttribute('data-attribution') : '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors';
const initial_zoom = element.hasAttribute('data-initial_zoom') ? element.getAttribute('data-initial_zoom') : 5;
const maximum_zoom = element.hasAttribute('data-maximum_zoom') ? element.getAttribute('data-maximum_zoom') : 12;
TainacanLeaflet.tileLayer(map_provider, {
attribution: attribution,
zoom: initial_zoom,
@ -55,6 +55,6 @@ export default (element) => {
TainacanLeaflet.marker(coordinate).addTo(tainacanMap);
});
tainacanMap.flyToBounds(coordinates);
tainacanMap.flyToBounds(coordinates, { maxZoom: maximum_zoom });
}
};

View File

@ -257,7 +257,7 @@ export default {
color: #25a189 !important;
}
.tainacan-icon-delete {
color: #e69810 !important;
color: #bb7700 !important;
}
}
&.number-block--items,
@ -301,7 +301,7 @@ export default {
background-color: #25a189;
}
&:nth-child(5) {
background-color: #e69810;
background-color: #bb7700;
}
&:nth-child(6) {
opacity: 0.35;

View File

@ -45,7 +45,7 @@ export default (element) => {
'#298596', // Tainacan Turquoise
'#01295c', // Tainacan Blue
'#25a189', // Tainacan Green
'#e69810', // Tainacan Yellow
'#bb7700', // Tainacan Yellow
'#a23939', // Tainacan Red
'#592570', // Tainacan Purple
'#ed4f63', // Tainacan Pink

View File

@ -555,7 +555,7 @@
padding: 1em 2em;
}
.dashicons-info {
color: #e69810;
color: #bb7700;
}
.capabilities-list {
padding: 1em 0;